背景
百度近期在《百度移动搜索落地页体验白皮书4.0》提到，页面的首屏内容应在1.5秒内加载完成。页面加载速度是影响用户搜索体验的一个重要因素。百度搜索对用户行为的研究表明，页面首屏的加载时间在1.5秒以内的网站，会带给用户流畅快捷的极速体验。作为一名合格的SEOre或者站长，总之要靠百度吃饭的，百度推出什么算法，不管它是否真的对我们网站有影响，我们都应该积极响应，正是基于这样的原则才有今天这篇文章，为大家深度解读一下，如果优化网站的首屏打开速度！
之前写过一篇《如何提升网站打开速度》，里面用案例来为大家分析了网站很多问题和解决方案，不过，因为涉及的东西比较多，讲得比较泛，如果不懂技术的人，可能会看得一愣一愣的，所以今天为大家深度讲解一下如果做好js文件的优化，从而提高网站首屏的打开速度。
什么是网站首屏速度
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
简而言之，二者触发时间的区别在于：DOMContentLoaded在HTML文档被解析完成之后触发，而load是在HTML所有相关资源被加载完成后触发。为了感受这两个事件，可以使用Chrome内核的浏览器(小超越喜欢用360)打开一个任意一个网页。然后打开控制台的Network面板。因为湛江seo网站使用的是mip改造的，就不以本站为例了，以下打开客户的网站测速截图
在上图，我们可以看到有两条线，一条蓝线，代表DOMContentLoaded事件，触发时间为203ms;一条红线，代表load事件，触发时间为1.40s。
如果你想更直观的感受这两者的区别，可以访问：https://testdrive-archive.azurewebsites.net/HTML5/DOMContentLoaded/Default.html
看到了这里，你肯定想问的，这和我们seo有什么关系？关系大着呢，说了这么多，就是想让你明白，DOMContentLoaded事件代表的就是网站首屏的打开速度，那么我们就着重优化这一块而又不影响用户的体验，懂了吗？
DOMContentLoaded顾名思义，就是dom内容加载完毕。那什么是dom内容加载完毕呢? 我们从打开一个网页说起。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。
HTML解析过程
当我们了解DOMContentLoaded事件代表的就是网站首屏打开速度的时候，我们就要了解一下html解析的过程和浏览器是如何工作的，只有这样我们才能更好的进行seo网站首屏打开速度。
这时候问题又来了，什么是HTML文档被加载和解析完成。要解决这个问题，我们就必须了解浏览器渲染原理。
当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，遍开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。
下面就是页面加载和解析过程中，浏览器的一个快照
上面我们看到在解析html的过程中，html的解析会被中断，这是因为JavaScript会阻塞DOM的解析。当解析过程中遇到<script>标签的时候，遍会停止解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后执行。在处理完脚本之后，浏览器便继续解析html文档。
同时JavaScript的执行会受到标签前面样式文件的影响，如果在标签前面有样式文件，需要样式文件加载并解析完毕后才执行脚本。这是因为JavaScript可以查询对象的样式。
这里需要注意一点，在现在浏览器中，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载。当解析被阻塞的时候，浏览器会有一个轻量级的HTML(或CSS)扫面器(scanner)继续在文档中扫描，查找那些将来可能能够用到的资源文件的url，在渲染器使用它们之前将其下载下来。
在这里我们可以明确DOMContentLoaded所计算的时间，当文档中没有脚本时,浏览器解析完文档遍能触发DOMContentLoaded事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded的触发不需要等待图片等其他资源加载完成。
接下来，我们来说说load，页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。
下面画图详细说一下：
- 1.在既没有CSS也没有JS的情况下，HTML文档的解析过程为：
DOMContentLoaded事件的触发时机为:HTML解析为DOM之后。
- 2.有CSS无JS的情况下，HTML文档解析过程为：
这里与1.不同的地方在于，渲染树的生成是基于DOM和CSSOM的。但是触发DOMContentLoaded的时间依然是在HTML解析为DOM后，无论此时CSS解析为CSSOM的过程是否完成。
- 3.当有JS时，HTML文档解析过程为：
那么网站首屏打开时间就是计算这个网页从空白到出现内容所花费的时间。那怎么计算这段时间？这段时间其实就是HTML 文档加载和解析的时间。也就是DOMContentLoaded 事件触发之前所经历的时间。
看完以上的图解，相信你对html的解析过程有了一定的理解。
之前你或许碰到过有其他人建议您把js文件放在最后面，其实这都是片面的，对于我们seo提升网站打开速度而言一点毛用都没有！
对于首屏时间而言，js放在HTML文档的开头和结尾处效果是一样的而js放在结尾的目的并不是为了减少首屏时间，而是由于js经常需要操纵DOM，放在后面才更能保证找到DOM节点！你明白了吗？
了解完了这些小知识之后，我们该如何来优化呢？
JavaScript 异步加载(async)
为何使用异步加载原因：
优化脚本文件的加载提高页面的加载速度，一直是提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制，以及加载脚本会阻塞其他资源和文件的加载，因此更多的采用异步加载。
关于同步加载与异步加载的区别
同步加载：同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载(如图像)、渲染、代码执行。
异步加载：异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。
如上图所示， HTML 文档被解析时如果遇见(同步)脚本，则停止解析，先去加载脚本，然后执行，执行结束后继续解析 HTML 文档。HTML文档解析完毕后触发DOMContentLoaded。
对此，《JavaScript高级程序设计》一书的解释是：带async的脚本一定会在load事件之前执行，可能会在DOMContentLoaded之前或之后执行。
为什么async脚本可能会在DOMContentLoaded之前或之后执行呢？或者说，为什么DOMContentLoaded事件的触发既可能在async脚本执行前、又可能在async脚本执行后呢？ 这是因为，async 标签的脚本加载完毕的时间有两种情况：
情况1： HTML 还没有被解析完的时候，async脚本已经加载完了，那么 HTML 停止解析，去执行脚本，脚本执行完毕后触发DOMContentLoaded事件。如下图所示：
情况2： HTML 解析完了之后，async脚本才加载完，然后再执行脚本，那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件。如下图所示：
总之， DomContentLoaded 事件只关注 HTML 是否被解析完，而不关注 async 脚本。
JavaScript 延迟加载(defer)
如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。
文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析和渲染完毕后，会等到所有的defer脚本加载完毕并按照顺序执行完毕才会触发DOMContentLoaded事件，也就是说下图两种情况都是有可能发生的：
HTML 还没有被解析完的时候，defer脚本已经加载完了，那么 等待HTML 解析完成后执行脚本，脚本执行完毕后触发DOMContentLoaded事件。
defer脚本同样包含两种情况：
情况1：HTML还没解析完成时，defer脚本已经加载完毕，那么defer脚本将等待HTML解析完成后再执行。defer脚本执行完毕后触发DOMContentLoaded事件。如下图所示
情况2：HTML解析完成时，defer脚本还没加载完毕，那么defer脚本继续加载，加载完成后直接执行，执行完毕后触发DOMContentLoaded事件。如下图所示：
注意defer情况2与async情况2的两个图非常相似，区别就在于DOMContentLoaded事件的触发时间点。
对于defer脚本，《JavaScript高级程序设计》一书的说法是:“按照h5规范，两个defer脚本会安装它们出现的先后顺序执行，两个脚本会在DOMContentLoaded之前执行。”这和我们上面的分析一致。然而，该书接下来说，“但事实上，defer脚本不一定会按顺序执行，也不一定会在DOMContentLoaded之前执行。”这是一个待再继续研究测试的问题
DOMContentLoaded和load的区别
document.readyState
document.readyState属性描述了文档的加载状态。一个文档的readyState可以是以下之一：
loading——加载，此时document仍在加载 interactive——互动，此时文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。 complete——完成，此时T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。
总结
写了这么多，不知道你看懂了没有！总之，要优化网站首屏速度，js文件必须是要进行的合理得优化，如果不是加载html的时候，就需要用js来控制，就统统的采用js异步来处理，好好的消化以上的内容，然后对你的网站js文件进行优化，相信你的网站首屏打开速度有质的飞越！当然，如果你负责的网站一个js文件都没用，那。。。不好意思，浪费了你那么多时间！
转载：https://blog.csdn.net/weixin_39805539/article/details/117849898