摘要：通俗来讲就是是页面白屏的时间页面所有的资源图片，音频，视频等加载完成的时间。深入分析页面的性能粗略扫一眼请求的时间，都是清一色几十毫秒。
一般情况下，如果网页加载时间超过5s，用户就会感觉页面比较卡，用户体验相当差，用户可能会直接走人，所以加载的时间对于一个网站来说还是相当重要的。那做项目的时候怎样分析页面的加载速度慢呢？
首先我们要知道影响页面加载的因素JS性能太差，阻塞页面
浏览器解析过程中，遇到
查看页面加载时间以chrome为例，打开页面后，按F12或者点击右键菜单里的检查，就进入了开发者模式，开发者模式里面有很多功能，跟页面加载时间相关的就是Network标签。如下图所示：
依次是17个请求；622K数据；页面最后一个请求截止用时1.7s；DOM内容加载并解析完成用时1.48；页面所有的资源（图片，音频，视频等）加载完成用时1.58s
Finish：页面最后一个请求截止的时间，如果页面加载完后，触发了ajax请求，那么该时间会加长。
DOMContentLoaded：DOM内容加载并解析完成的时间。（通俗来讲就是是页面白屏的时间）
load：页面所有的资源（图片，音频，视频等）加载完成的时间。（页面加载完成，浏览器不再转圈的时间，页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。）
一般情况下html页面在解析渲染的过程中，会有大量的请求，比如外链的css、js、图片等等，这些资源都需要浏览器去重新发起http请求。这些请求其实都是类似的一个过程。
首先我们打开F12开发都工具的Network标签，看看单个请求的各个时间段（不同的时段分别有不同的颜色区分），将鼠标悬停在waterfall字段就可以看到这个请求具体的耗时，如下图所示：
Queueing深入分析页面的性能
请求排队的时间。就是浏览器与同一个域名建立的TCP连接数是有限制的，比方chrome设置的6个，如果说同一时间，发起的同一域名的请求超过了6个，这时候就需要排队了，也就是这个Queueing时间。
Stalled
就是浏览器得到要发出请求的指令到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。
Stalled/Blocking
请求能够被发出去前的等等时间。包含了用于处理代理的时间。另外，如果有已经建立好的连接，那么这个时间还包括等待已建立连接被复用的时间，这个遵循浏览器对同一源最大TCP连接的规则。
Proxy Negotiation
处理代理的时间。
DNS Lookup
DNS查询的时间，页面内任何新的域名都需要走一遍 完整的DNS查询过程，已经查询过的则走缓存。
Initial Connection / Connecting
建立TCP连接的时间，包括TCP的三次握手和SSL的认证。
SSL
完成ssl认证的时间
Request sent/sending
请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间。
Waiting
请求发出后，到收到响应的第一个字节所花费的时间。
Content Download
收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。
粗略扫一眼请求的时间，都是清一色几十毫秒。这时候我们可以在Network里瀑布般的Timeline里很直观的看出来请求的耗时情况。
在timeline里，每一条线代表一个TCP的连接，每一种颜色代表请求一个时间段，每条线的颜色一直循环变化，从灰色到深绿最后蓝色，然后又变灰色，说明浏览器建立的TCP连接一直在循环复用，这样就省去了三次握手的时间。
有一条蓝色竖线和红色竖线，蓝色竖线表示触发DomContentLoad事件触发时间，红色表示Load事件触发，如下图：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106144.html
摘要：通俗来讲就是是页面白屏的时间页面所有的资源图片，音频，视频等加载完成的时间。深入分析页面的性能粗略扫一眼请求的时间，都是清一色几十毫秒。 一般情况下，如果网页加载时间超过5s，用户就会感觉页面比较卡，用户体验相当差，用户可能会直接走人，所以加载的时间对于一个网站来说还是相当重要的。那做项目的时候怎样分析页面的加载速度慢呢？ 首先我们要知道影响页面加载的因素 JS性能太差，阻塞页面 浏览...
摘要：二模块化误区加快加载和执行的速度，一直是前端优化的一个热点。结果文件减少，也达到了预期的效果。避免不必要的延迟。最后再根据文件的功能类型，来决定是放在页面的头部还是尾部。 注：本文是纯技术探讨文，无图无笑点，希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了，某种程度上讲，同等水平前端的工资都要比后端高上不少，而圈内的另一项共识则是——网页是公司的脸面！ 几年前，谷歌的一项...
摘要：大多数情况下，对一个直接量和一个局部变量数据访问的性能差异是微不足道的。 前端性能优化之 JavaScript 前言 本文为 《高性能 JavaScript》 读书笔记，是利用中午休息时间、下班时间以及周末整理出来的，此书虽有点老旧，但谈论的性能优化话题是每位同学必须理解和掌握的，业务响应速度直接影响用户体验。 一、加载和运行 大多数浏览器使用单进程处理 UI 更新和 JavaScri...
阅读 2185·2021-11-19 09:55
阅读 2641·2021-11-11 16:55
阅读 3179·2021-09-28 09:36
阅读 1947·2021-09-22 16:05
阅读 3275·2019-08-30 15:53
阅读 1809·2019-08-30 15:44
阅读 2900·2019-08-29 13:10
阅读 1341·2019-08-29 12:30
