05-3 白屏优化?
注意:这里直接给出方案,具体白屏过程解析请看上一篇博文
- 白屏定义放一下:
渲染进程
拿到数据后,会创建一个 空白页面 (这个空白页面就是常说的 解析白屏),然后 等待 css
和 js
文件加载完成 -> 先生成 CSSOM
-> 执行 js
-> 合成布局树 -> 首次渲染
优化的主要参考文章:前端性能优化之白屏时间
1. DNS解析优化
针对DNS Lookup
环节,我们可以针对性的进行 DNS
解析优化
- DNS 缓存优化
- DNS 预加载策略
- 稳定可靠的DNS服务器
2. TCP网络链路优化
针对网络链路的优化,好像除了花钱没有什么更好的方式!
3. 服务端处理优化
服务端的处理优化,是一个非常庞大的话题,会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…
4. 浏览器下载、解析、渲染页面优化
根据浏览器对页面的下载、解析、渲染过程,可以考虑一下的优化处理:
- 尽可能的精简
HTML
的代码和结构(HTML
层级不要太深) - 还可以尽量 减少文件大小,比如通过
webpack
等工具移除一些不必要的注释,并压缩JavaScript
文件 - 尽可能的 优化CSS文件和结构(选择器是从右向左解析,所以尽可能减少层级)
- 用
link
别用@import
(@import
是延迟加载,遇到了代码才加载,预解析的时候不能和 js 文件并发加载) - 对于大的
CSS
文件,可以通过媒体查询属性,将其拆分为多个不同用途的 CSS 文件,这样只有在特定的场景下才会加载特定的 CSS 文件
- 用
- 一定要 合理的放置JS代码,尽量不要使用内联的 JS 代码
- 没有
defer
和async
标签的script
会立即加载并执行 - js 执行阻断 html 解析 - 有
async
标签的 js - js 的加载和 html 的解析和渲染并行,加载完即执行 - 有
defer
标签的 js - js的加载和 html 的解析和渲染并行,但会在 html 解析完成后执行,在触 发DOMContentLoaded
事件前执行
- 没有
- 减少 HTTP 请求次数和请求大小