js延迟加载_前端网页加载渲染链路优化

页面性能和用户体验的各个指标怎么来优化呢&＃xff1f;open signal官方提供了2018年2月份统计的全世界4G网络覆盖率和通信速率的统计分布图如下&＃xff0c;在目前移动互联网的浪潮下&＃xff0c;我们要利用好用户终端设备的每个字节的流量。

当然页面性能和体验优化并不是一蹴而就的&＃xff0c;需要不断的研究、跟踪&＃xff0c;发现问题&＃xff0c;解决问题。但是我们可以在一开始编写业务代码的时候就做的更好&＃xff0c;做到极致。所以&＃xff0c;关于优化实战我们主要分为两部分&＃xff1a;加载渲染链路优化 和 编程代码优化。

从访问url到页面呈现&＃xff0c;整个链路可以做优化的思路。

幸运的是&＃xff0c;W3C推荐的Navigation Timing标准中所定义的核心的页面性能数据&＃xff0c;它包含了从上个页面销毁到跳转到当前页面加载完成每个阶段所消耗的时间。在canIuse上查到的兼容性也很好&＃xff1a;

利用这个接口可以很方便的帮助我们排查链路问题。在Navigation Timing标准中介绍到这个API主要包含两个接口&＃xff1a;PerformanceTiming和PerformanceNavigation&＃xff0c;这两个接口由浏览器进行实现和维护&＃xff0c;当浏览器创建页面的时候就会把接口定义的相关数据挂载到window.performance.timing和window.performance.navigation这两个属性上。我们可以打开一个网页看一下&＃xff1a;

我们把这两个图对比一下&＃xff0c;就可以很容易的排查出页面的加载链路问题。

静态资源链路

打开页面的第一步是请求页面的html&＃xff0c;这里面涉及TTFB这个综合指标。同时如果有必要我们也可以统计DNS时间和TCP时间。

DNS时间&＃xff1a;主要是根据请求域名查询到对应主机IP的时间。这个和DNS服务器有关系&＃xff0c;也可能和本地缓存有关&＃xff0c;如果这个很慢&＃xff0c;可以找服务商排查下问题。

TCP时间&＃xff1a;tcp是承接http协议的下层协议。主要是路由到主机ip&＃xff0c;并建立tcp链接的时间。这个时间反应了服务器到用户客户端之间链路是否通畅&＃xff0c;网络是否通畅。

请求完HTML之后&＃xff0c;就开始解析html代码&＃xff0c;按照从上至下、自然顺序解析&＃xff0c;解析内联CSS代码或者加载外链CSS脚本&＃xff0c;解析内联Javascript脚本&＃xff0c;或者加载外链Javascript脚本。由于浏览器是单线程的&＃xff0c;这些CSS和Javascript脚本很可能就会造成页面卡顿。参考 浏览器线程理解与microtask与macrotask。

CDN是内容分发网络&＃xff0c;主要用于缓存静态资源。CDN服务商一般会在全国各地部署服务&＃xff0c;而且带宽很大&＃xff0c;这样访问CDN的资源时就可以有较短的路由路径&＃xff0c;而且带宽也比较大&＃xff0c;访问比较快。

1. 建议最好把html, CSS、JS、font、img这些资源放在CDN上&＃xff0c;没有CDN也可以放在OSS存储服务上&＃xff0c;总之比自己的服务器硬盘快多了&＃xff0c;至少服务商会在不同区域做分布式部署
2. 如果没有钱买CDN服务&＃xff0c;那么就尽可能少的加载外联CSS和JS代码&＃xff0c;注意html头部可以增加dns-prefetch&＃xff0c;减少DNS解析时间
3. 不是在首屏展示的资源&＃xff0c;不要立即加载&＃xff0c;可以在页面onload之后加载&＃xff0c;或者首屏渲染完成再加载
4. 压缩CSS、JS、font、img&＃xff0c;尽量减少体积&＃xff0c;服务端开启gzip
5. 考虑资源combo请求&＃xff0c;减少http请求量&＃xff0c;浏览器一般都有并发限制, 比如chrome一次6个并发http请求&＃xff0c;不同浏览器内核可能不一样。