落地页首屏渲染优化实战：在项目中实践“输入url到页面显示发生了什么”

1. 前言

一只木桶盛水的多少，并不取决于桶壁上最高的那块木块，而恰恰取决于桶壁上最短的那块。

2. 项目介绍

3. 优化背景

资源请求->执行js->页面构建->图片请求->页面再次渲染(reflow/repaint)

4. 粗暴地计算首屏渲染时间

js执行 > 页面渲染 > 资源加载

• 强网下资源(代码/图片)普遍能在50ms内加载完成，因此页面流程耗时可以理想且粗暴地表现为

模板文件请求(150ms) -> 各种js/css资源并行请求(50ms * 6 速度太快可以认为是串行加载) -> js执行/页面绘制(50ms，页面渲染过程中这块耗时占比很小因此粗暴按50ms计算) -> 图片请求(50ms * 3) -> 页面触发重绘/回流完成渲染(忽略不计)

模板文件请求(800ms) -> 各种js/css资源请求(1.5s 基本是并行加载的请求只计算耗时最久的) -> js执行/页面绘制(50ms，页面渲染过程中这块耗时占比很小因此粗暴按50ms计算) -> 图片请求(1.6s 也是并行加载的) -> 页面触发重绘/回流完成渲染(忽略不计)

5. 优化思路

• 观察弱网情况下的页面耗时可以发现：因为首屏图片依赖vue和lazyload动态生成并加载，这导致图片请求必须等到js资源加载执行完成之后才发出。我们期望能在首次加载资源的时候利用资源并行加载的特性对首屏图片做一次预加载，省下上文所述的图片请求流程中1.6s的开销。实现这一步可以利用浏览器的缓存机制，当读取本地缓存资源(disk cache/memory cache)时只会有0~3ms的时间开销，可以忽略不计。

• 页面介绍的页面流程中提到，落地页中的图片通过请求接口得到。直接想到的是提前发出接口请求得到页面图片，提取出首屏的图片进行预加载。但同步XHR不是一个推荐的做法，见同步和异步请求

注意：从Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)，Blink 39.0和Edge 13开始，主线程上的同步请求由于对用户体验的负面影响而被弃用。但开发人员通常不会注意到这个问题，因为在网络状况不佳或服务器响应速度慢的情况下，挂起只会显示同步XHR现在处于弃用状态。建议开发人员远离这个API。

• 做完以上两点理论上弱网下页面的首屏渲染速度会有非常快(秒级)的提升。解决了图片加载速度的瓶颈之后可以做进一步的优化。比如拆分页面的组件，优先渲染首屏组件，异步渲染剩下的组件。

• 具体的框架编程层面，弱网情况下mounted中的异步事件也先于load执行，而且异步事件中发出的一些请求(比如以Image的方式发出的埋点)会被计入load的时间中。优化的目标是是尽早完成首屏渲染和load，在load之后做额外的页面逻辑。通过判断document.readyState值，当页面还未完成readyState的complete事件时挂载readyState事件的监听器等到页面完成complete之后再做额外的逻辑。

• 观察上文中弱网情况下的网络贴图可以发现，区别于强网下的只会加载一张首图的情况，弱网下不仅发出了首图的请求，还触发了懒加载对屏幕之外图片的请求。基于上面一点的推迟非首屏逻辑执行的思路，对lazy-load插件也进行一次修改，页面complete之后再挂载图片的监听，这样可以避免lazy-load一执行就触发首屏之外图片的加载拖长首屏渲染时间。

6. 如何去观测页面性能及一些指标

6.1 Window.performance

• window.performance.timing

interface PerformanceTiming {
    "connectStart":number;
    "navigationStart":number;
    "loadEventEnd":number;
    "domLoading":number;
    "secureConnectionStart":number;
    "fetchStart":number;
    "domContentLoadedEventStart":number;
    "responseStart":number;
    "responseEnd":number;
    "domInteractive":number;
    "domainLookupEnd":number;
    "redirectStart":number;
    "requestStart":number;
    "unloadEventEnd":number;
    "unloadEventStart":number;
    "domComplete":number;
    "domainLookupStart":number;
    "loadEventStart":number;
    "domContentLoadedEventEnd":number;
    "redirectEnd":number;
    "connectEnd":number;
}

'重定向时间' -- (time.redirectEnd - time.redirectStart) / 1000;
'DNS解析时间' -- (time.domainLookupEnd - time.domainLookupStart) / 1000;
'TCP完成握手时间' -- (time.connectEnd - time.connectStart) / 1000;
'HTTP请求响应完成时间' -- (time.responseEnd - time.requestStart) / 1000;
'DOM开始加载前所花费时间' -- (time.responseEnd - time.navigationStart) / 1000;
'DOM加载完成时间' -- (time.domComplete - time.domLoading) / 1000;
'DOM结构解析完成时间' -- (time.domInteractive - time.domLoading) / 1000;
'脚本加载时间' -- (time.domContentLoadedEventEnd - time.domContentLoadedEventStart) / 1000;
'onload事件时间' -- (time.loadEventEnd - time.loadEventStart) / 1000;
'页面完全加载时间' -- '重定向时间' + 'DNS解析时间' + 'TCP完成握手时间' + 'HTTP请求响应完成时间' + 'DOM结构解析完成时间' + 'DOM加载完成时间';

• window.performance.getEntries()

const PerformanceEntries: Array<PerformanceTiming>;

6.2 Chrome DevTools - Network

我们期望能在首次加载资源的时候利用资源并行加载的特性对首屏图片做一次预加载

6.3 Chrome DevTools - Performance

FP(First Paint): 页面在导航后首次呈现出不同于导航前内容的时间点。

FCP(First Contentful Paint): 首次绘制任何文本，图像，非空白canvas或SVG的时间点。

FMP(First Meaningful Paint): 首次绘制页面“主要内容”的时间点。

LCP(Largest Contentful Paint): 可视区域“内容”最大的可见元素开始出现在页面上的时间点。

7. 实战开始

7.1 参考Network分析页面加载流程

1. 前1600ms：全都花费在了模板(即第一个文件preview，即类似于index.html之类的文件)的请求上。

2. 1600ms~2700ms：模板文件加载完成之后浏览器便开始解析该文件，通过该文件中的外链标签发出一堆请求获取资源。这一步便是之间主要做的事情。

3. 当main.js(第九个资源，main_202006221554.js文件)加载完成之后浏览器执行main.js中的代码。在main.js中调用new Vue()创建Vue的实例并开始页面元素的搭建。

4. 2700ms：总览中出现了一条蓝色的竖线，该竖线标识DOMContentLoaded事件的触发。差不多的时间点里图中选中的请求ajaxDetail在main.js中作为异步请求发出，该请求中包含页面里使用到的一些图片地址。

5. 3500ms~4800ms：即图中红框圈出来的部分，在3500ms左右发出了首屏图片的请求，经过1300ms左右完成首屏图片的加载。

6. 3600ms~5500ms：即图中黄框圈出来的部分，发出了几个埋点和统计代码的请求，等这些请求完成之后总览中出现了一条红色的竖线，该竖线标识Load事件的触发。

7.2 参考页面加载流程整理优化点

• 模板资源加载优化

• 异步请求优化

• 图片加载节点优化

• 图片预加载的优化

对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

  /**
   * 判断是否支持preload
   */
  const isPreloadSupported = () => {
    const link = document.createElement("link");
    const relList = link.relList;
    if (!relList || !relList.supports) {
      return false;
    }
    return relList.supports("preload");
  };

  /**
   * 使用preload的方式预加载图片
   */
  const sendImgWithPreload = (url) => {
    const link = document.createElement("link");
    link.rel = "preload";
    link.as = "image";
    link.href = url.ossimg();
    document.head.appendChild(link);
  };

• vue-lazyload优化

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

Vue.directive('lazy', {
  bind: lazy.add.bind(lazy),
  update: lazy.update.bind(lazy),
  componentUpdated: lazy.lazyLoadHandler.bind(lazy),
  unbind: lazy.remove.bind(lazy)
})