在同一网络环境中，有两个网站可以满足您的需求。半个点击加载，另一个点击更改半天。如果你选择它，它将使用哪一个？ ？
页面性能是前端开发的重要组成部分，但我们还没有很好的方法来检测页面性能。直到新的API窗口。 W3C性能团队提供的性能，浏览器目前支持IE9以上。它是浏览器中的一个对象，它在加载和分析页面的过程中注册关键点。放置在全球环境中，您可以通过JavaScript访问它。
使用性能API
您可以通过以下方式检测并兼容性能：
性能var=window.performance ||
window.msPerformance ||
window.webkitPerformance；
是（表现）{
//你的代码
}
让我们看一下性能结构：
Performance.memory显示此时内存的使用，它是一个动态值，其中：
usedJSHeapSize表示：JS对象占用的内存量（包括V8引擎的内部对象）
totalJSHeapSize表示：可用内存
jsHeapSizeLimit表示：内存大小限制
通常，usedJSHeapSize不能大于totalJSHeapSize，如果它更大，则可能存在内存泄漏。
Performance.navigation显示页面的源信息，其中：
redirectCount表示：如果存在重定向，则页面将通过多个重定向重定向。默认值为0。
类型表示页面的打开方式。
0表示正常输入TYPE_NAVIGATENEXT页面（未更新，未重定向等）
1表示使用window.location.reload（）更新TYPE_RELOAD页面
2表示浏览器的前进和后退按钮（历史记录）输入的TYPE_BACK_FORWARD页面
255表示未以前一种方式输入TYPE_UNDEFINED
performance.onresourcetimingbufferfull属性是一个事件处理程序，它将在resourcetimingbufferfull事件被激活时被调用。它的值是手动配置的回调函数，该函数在浏览器资源时间性能缓冲区已满时运行。performance.timeOrigin是一系列时间点的参考点，精度为万分之一毫秒。
Performance.timing是一系列关键时间点，包含一系列时间数据，如网络和分析。
以下是对这些时间点的解释。
时间: {
//在同一浏览器中下载页面结束时的时间戳。如果没有上一页，则此值将与fetchStart相同。
NavigationStart: 1543806782096，
//上一页的下载事件启动时的时间戳。如果没有上一页，则该值将返回0。
unloadEventStart: 1543806782523，
//对应于unloadEventStart，即处理下载事件的时间戳。如果没有上一页，则该值将返回0。
unloadEventEnd: 1543806782523，
//启动第一个HTTP重定向时的时间戳。如果没有重定向，则该值返回0，或者重定向中的源不同。
redirectStart: 0，
//上次HTTP重定向完成时的时间戳（即直接接收HTTP响应的最后一位的时间）。
//如果重定向中没有重定向或不同的源，则此值将返回0。
redirectEnd: 0，
//浏览器已准备好通过HTTP请求获取文档的时间戳。此时间点将在检查应用程序的任何缓存之前。
fetchStart: 1543806782096，
//DNS域名查询开始的UNIX时间戳。
//如果使用持久连接，或者此信息存储在缓存或本地资源中，则此值将与fetchStart一致。
domainLookupStart: 1543806782096，
//DNS域名查询完成的时间。
//如果使用本地缓存（即没有DNS查询）或持久连接，则它等于fetchStart值domainLookupEnd: 1543806782096，
//HTTP（TCP）域名查询结束的时间戳。
//如果使用持久连接，或者此信息存储在缓存或本地资源中，则此值将与fetchStart一致。
connectStart: 1543806782099，
//HTTP（TCP）返回建立浏览器和服务器之间连接时的时间戳。
//如果建立了持久连接，则返回值等于fetchStart属性的值。建立连接意味着所有识别和认证程序都已完成。
connectEnd: 1543806782227，
//HTTPS返回浏览器和服务器启动安全链接协议时的时间戳。如果当前网页不需要安全连接，则返回0。
secureConnectionStart: 1543806782162，
//返回浏览器向服务器发出HTTP请求时（或者当它开始读取本地缓存时）的时间戳。
requestStart: 1543806782241，
//返回浏览器收到服务器的第一个字节（或从本地缓存中读取）时的时间戳。
//如果在启动请求并重新打开连接后传输层失败，则将对该属性进行计数，直到新请求的相应开始时间为止。
responseStart: 1543806782516，
//返回浏览器从服务器收到（或从本地缓存读取或从本地资源读取）的最后一个字节
//（如果HTTP连接在该日期之前已关闭，则返回时间戳）。
AnswerEnd: 1543806782537，
//分析开始时当前页面的DOM结构的时间戳（即，当Document.readyState属性变为“loading”并且触发相应的readystatechange事件时）。
domLoading: 1543806782573，
//分析完成并开始加载嵌入资源时（即，当Document.readyState属性变为“interactive”并且相应的readystatechange事件被激活时）当前页面的DOM结构的时间戳。domInteractive: 1543806783203，
//当分析器发送DOMContentLoaded事件时，该事件是分析要执行的所有脚本的时间戳。
domContentLoadedEventStart: 1543806783203，
//当所有要立即执行的脚本都已执行时的时间戳（无论执行顺序如何）。
domContentLoadedEventEnd: 1543806783216，
//当前文档的分析已完成，即Document.readyState变为“complete”并且readystat的相应更改被激活时的时间戳
domCompleta: 1543806783796，
//发送加载事件时的时间戳。如果尚未发送此事件，则其值将为0。
loadEventStart: 1543806783796，
//当load事件结束时，事件完成时会加载时间戳。如果此事件尚未发送或尚未完成，则其值将为0。
loadEventEnd: 1543806783802
}
这些参数对于帮助我们获得Domready时间，加载时间，白屏时间等非常有用。页面的页面，以及每个阶段中各个页面资源的性能参数，从发送请求到响应。
对我们有用的页面性能数据可能包括以下内容。这些参数由先前performance.timing的每个属性的差异组成。它是毫秒的精确值。计算方法如下：
重定向时间：redirectEnd - redirectStart
DNS查询非常耗时：domainLookupEnd - domainLookupStart
TCP连接非常耗时：connectEnd - connectStart
耗时的HTTP请求：responseEnd - responseStart
解析太阳树时间：domComplete - domInteractive
空白屏幕时间：responseStart - navigationStartDOMready time：domContentLoadedEventEnd - navigationStart
加载时间：loadEventEnd - navigationStart，这是执行加载回调函数的时间。
如何优化？
优化重定向：有三种类型的重定向，301（永久重定向），302（临时重定向）和304（未修改）。 304用于优化缓存，它非常有用，应尽可能避免前两个。任何需要重定向跳代码的代码都可以在重定向之后将地址直接写入html或前端JS。减少客户端和服务器之间的通信过程，节省消耗时间的重定向。
DNS优化：通常，在前端优化中有两个与DNS相关的点：一个是减少DNS请求的数量，另一个是执行DNS预搜索。典型的DNS解析需要20到120毫秒（移动设备会慢一些），减少DNS解析的数量是一个很好的优化方法。尝试在cdn域名中放置多个资源。以前的DNS搜索允许在后台解析具有此属性的域名，而无需用户单击该链接。域名解析和内容加载是串行网络操作，因此该方法可以减少用户的等待时间并改善用户体验。新版本的浏览器以前在与当前域名（正在导航的网页的域名）相同的域中包含域名并缓存结果。这是先前对隐式DNS的搜索。如果您想先前获取未在页面上显示的域，请使用显示的DNS预取。下图显示了DNS预取方法：
腾讯
TCP请求的优化：TCP优化主要在服务器端完成。前端可以做的是最小化TCP请求的数量，即减少HTTP请求的数量。 Http 1.0默认使用短连接，这也是一个短TCP连接，也就是说，每次客户端和服务器执行http操作时，建立连接并在任务完成时连接结束。在此过程中有3个TCP请求协议和4个TCP请求版本。有两种方法可以减少TCP请求：一种是资源整合，它将页面上的图像，css和js组合在一起以减少请求数量。另一个使用长链接，使用http1.1，HTTP响应头将添加连接:保持活动。打开网页时，连接不会立即关闭。当您再次访问该服务时，它将继续使用这么长时间。连接。这大大减少了TCP协议的数量和启动次数。或者使用Websocket进行通信，您只需要始终建立TCP链接。优化HTTP请求：使用内容分发网络（CDN）并减少请求。使用CDN可以减少网络请求的延迟。 CDN的域名不能与主站的域名相同。这将避免在访问CDN时携带主机cookie的问题。对于网络请求，您可以使用fetch来发送不带cookie的请求，从而减少http。包的大小您还可以使用本地缓存策略来最小化对服务器数据的重复访问。
代表性的优化：在浏览器的渲染过程的一面，作为一个大框架，VUE和反应，他们的工作人员确实是从HTML代码代表了浏览器端，不是直接的，而是要到代码相关框架要移动的帧在渲染页面时，渲染过程在第一个屏幕中有很大的损失，白色屏幕的时间会增加。如有必要，可以在服务器端表示所有html代码，以便所有html代码直接在我们的浏览器中而不是在浏览器端。
上海IT外包服务网 链接：http://www.linemore.com
中文
电话咨询
微信咨询
公众号
