前端笔记（11）提升首屏加载速度

首屏加载速度影响着用户对整个网站的第一体验尤为关键。那么如果才能够优化首次加载时的白屏时间？
上一篇文章简单介绍了在浏览器里，从输入 URL 到页面展示的过程。现在我们将整个过程划分为三个阶段:

1.从请求发出后到文档提交阶段，这个阶段中用户看到的还是跳转前的上一个页面。
2.文档提交以后，渲染进程创建一个空白页面，并等待css、javascript的加载，生成CSSOM和DOM，然后构建布局树渲染页面。
3.页面渲染完成以后进入页面绘制阶段。

影响第一个阶段的主要因素是网络以及服务器。影响第三个阶段主要因素是浏览器的性能已经用户的主机性能。
这里我们主要分析第二个阶段。这个阶段如果处理的不好就会存在过长的白屏时间严重影响体验。我们再次分解第二个阶段：

• 解析html生成DOM
• 下载css
• 下载javascript
• 生成CSSOM
• 执行javascript
• 生成布局树
• 渲染页面

在这其中下载javascript以及执行javascript会阻塞DOM树的构建，下载css虽然不会直接阻塞DOM树的构建但是JavaScript执行需要等css下载完成以后，因此也可能阻塞DOM树的构建。

由于css代码不会阻塞DOM构建所有我们可以将其应该尽量靠前。

javascript代码无论放在任何位置都会阻塞DOM树的构建，我可以将不存在dom操作的JavaScript代码放在css之前，使其不受css下载的影响。将存在dom操作的JavaScript代码放在尽量靠后的位置，使其可以操作dom的同时尽可能与css距离足够远尽可能减少受css下载影响的可能性。

因此我们可以通过以下几种手段优化首屏加载速度：

• 根据情况调整JavaScript代码与css代码的位置。（包括内联、外联）
• 使用内联JavaScript、内联css，是的DOM构建以及页面渲染不需要等待外部资源的下载。
• 内联并非所有情况都使用，通过压缩、移除注释、移除打印来较小JavaScript文件以及css文件的大小
• 使用async和defer标记script标签实现JavaScript的异步执行。
• 通过媒体查询标记不同用途的css文件，使得某些css文件只有在特定情况下加载。

实际场景中还需要根据情况进行分析，找出影响页面首屏速度关键点。例如针对单页面应用使用服务端渲染首屏、使用浏览器的强缓存与协商缓存。