共计 627 个字符，预计需要花费 2 分钟才能阅读完成。
最近在看前端网页优化的文章，来这里做个总结吧！
优化，为什么要做前端网页优化尼！还不是因为网页关上慢吗？他人的都是秒开，就咱家的 10 秒开，为啥？浏览器对咱有意见。。。。。。
好了，废话不多说了，间接上干货。
#### 首先咱们来拆解下，页面加载到底慢在哪？
- 白屏工夫
- 首屏工夫
- 页面加载时长
其次咱们来看看，网页是如何展现到浏览器上的吧。
1: WebView 初始化（个别耗时在 400ms，只有挪动端的 hybrid）
2：DNS 服务器解析域名（耗时在 150ms）
3：建设 TCP 链接。（300ms）
4：服务器响应，获取获取数据）
5：解析获取到的 html，生成 DOM 树，渲染到页面上
白屏工夫个别指的就是 1 到 4 的过程，因为还在申请数据，这个工夫页面是空白的。那咱们该如何优化尼：
- WebView 初始化优化，咱们是能够在关上 app 之后，做一个 webview 预加载的（后盾运行，先初始化好），当要用到的时候，在间接拿进去用就能够了，个别能够节俭 200ms
- DNS 解析，这里能够加一个 dns 预解析的 代码如下
- 这里选用 http2.0；多路复用的，同域名下多个申请，建设一次 tcp 链接就能够了，
- 这步很要害了，下载速度跟你的资源大小有很大的关系。所以动态资源越小越好；比方：nginx 服务器走 gzip 压缩，vue 打包文件做路由懒加载（包切割），或者离线包 cnd 服务，缓存 等等哈。
- 这步的话，次要防止重排。因为重排 渲染器须要从新计算 dom 树，十分耗性能。
嗨呀！写到这里 又词穷了，那等我想想，今天再来写吧！
正文完