最近在看前端网页优化的文章,来这里做个总结吧!
优化,为什么要做前端网页优化尼!还不是因为网页关上慢吗?他人的都是秒开,就咱家的 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 树,十分耗性能。
嗨呀!写到这里 又词穷了,那等我想想,今天再来写吧!