如何分析页面加载慢

一般情况下，如果网页加载时间超过5s，用户就会感觉页面比较卡，遇到耐心不好的用户，肯定就直接关闭走人了，所以加载的时间对于一个网站来说还是相当重要的。如果是你的头头，给你一个url，让你分析页面为什么这么卡，你该如何办呢？

查看页面加载时间

现在的浏览器都是有开发者调试模式的，以chrome为例，打开页面后，按ctrl+shift+i，或者点击右键菜单里的检查，就进入了开发者模式，开发者模式里面有很多功能，跟页面加载时间相关的就是network标签。如下图所示：

chrome开发者模式

在最下面的数据反应了该页面的整体加载情况。比如总共有111个请求，5.8M的数据，以及三个时间点，finish、DOMContentLoaded和load。
finish：页面最后一个请求截止的时间，如果页面加载完后，触发了ajax请求，那么该时间会变更。

DOMContentLoaded：dom内容加载并解析完成的时间
load：页面所有的资源（图片，音频，视频等）加载完成的时间

那什么是dom内容加载完毕呢？我们从打开一个网页说起。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。

在这里我们可以明确DOMContentLoaded所计算的时间，当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。

接下来，我们来说说load，页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。

通俗来讲就是DOMContentLoaded是页面白屏的时间，load是通常所说的页面加载完成，浏览器不再转菊花的时间。

影响页面加载的因素

js性能太差，阻塞页面

因为浏览器解析过程中，遇到