The front-end realizes the optimization of the first screen

This article has participated in the [Newcomer Creation Ceremony] activity to start the road of Nuggets creation together

Recently, it is the spring recruitment and summer internship recruitment. The landlord has also faced more than 10 interviews with large factories. There are also many questions about front-end optimization. Among them, the most frequently asked is the optimization of the first screen, so I will summarize here. Now, what are the ways to optimize the first screen in the front end?

First of all, let’s talk about why performance optimization is needed and what are the benefits of doing performance optimization?

The benefits of performance optimization

The front-end is a battlefield where a product is directly displayed in front of the user, and the front-end performance directly affects the user experience. It can be said that performance optimization is a necessary knowledge point and core skill for beginner and intermediate engineers to advance to senior engineers.

The business value of performance optimization

• For mbify, every 100ms increase in the speed of the homepage load increases the conversion rate by 1.11% and increases the average annual revenue by $380,000;
• Pinterest rebuilt their page for performance, reducing perceived wait time by 40%, resulting in a 15% increase in search engine traffic and signups;
• By reducing the average page load time by 850ms, COOK found that they were able to increase conversions by 7%, reduce bounce rates by 7%, and increase the number of pages per page by 10%;

It can be seen that the impact of front-end performance optimization is directly linked to our revenue, and high-performance websites are better at attracting and retaining users than poor-performing websites.

"50% of users will abandon a website that loads in more than 3 seconds"

If high performance is an asset, poor performance is a liability. Performance optimization is a topic that cannot be avoided after a project has developed for a certain period of time. It is also a thorn in the heart of every engineer. The quality of the product determines the customer's experience. There are many factors in the quality of a product, among which performance is the determining factor.

• When users can get a response within 2 seconds, they will feel that the system responds quickly;
• When the user gets a response within 2-5 seconds, they will feel that the response speed of the system is OK;
• When users get a response within 5-8 seconds, they will feel that the response speed of the system is very slow, but it is acceptable;
• When the user still can't get a response after more than 8 seconds, he will feel that the system is bad, or think that the system has lost response, and choose to leave the Web site, or initiate a second request.

The performance of a website is the basis for retaining users and realizing monetization, and it is also an issue that our front-end engineers pay attention to every day.

Front-end performance optimization division

其实，前端性能优化大体分为两个方向，一个是加载时优化，一个是运行时优化

• 加载时优化：预加载、缓存、网络层、页面解析、静态资源、

• 运行时优化：避免强制同步布局、长列表优化、避免js执行时间过长、并行计算-service worker、Composite分层绘制、滚动事件性能优化、Passive event listeners、动画

其中，首屏优化就属于加载时优化

首屏优化

首先，应该区分两个概念，一个是首屏时间，一个是白屏时间

• 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
• 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

• 影响白屏时间的因素：网络，服务端性能，前端页面结构设计。
• 影响首屏时间的因素：白屏时间，资源下载执行时间。

首屏性能指标

FPS：最能反映页面性能的指标FPS(frame per second)，一般系统设置屏幕的刷新率为60fps。小于24就会出现明显的卡顿

DOMContentLoaded：DOM加载并解析完成会触发DOMContentLoaded事件，如果源码输出的内容太多，客户端解析DOM的时间也会变长，例如增加2000个嵌套层叠可能会相应增加50-200ms，尽量保证首屏输出即可，后续的内容只保留钩子，利用js渲染。

流畅度：FPS 值越高，视觉呈现越流畅，在等待的过程中可以加入一些视觉缓冲。

首屏加载时间：通过DOMContentLoad或者performance来计算出首屏时间

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime
​
// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};
复制代码

1. DNS解析耗时: domainLookupEnd - domainLookupStart
2. TCP连接耗时: connectEnd - connectStart
3. SSL安全连接耗时: connectEnd - secureConnectionStart
4. 网络请求耗时(TTFB): responseStart - requestStart
5. 数据传输耗时: responseEnd - responseStart
6. DOM解析耗时: domInteractive - responseEnd
7. 资源加载耗时: loadEventStart - domContentLoadedEventEnd
8. 首包时间: responseStart - domainLookupStart
9. 首次渲染时间 / 白屏时间: responseEnd - fetchStart
10. 首次可交互时间: domInteractive - fetchStart
11. DOM Ready时间: domContentLoadEventEnd - fetchStart
12. 页面完全加载时间: loadEventStart - fetchStart
复制代码

加载慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下：

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候，渲染内容堵塞了

优化方法

我们可以从这个过程来挖掘优化点：交给DNS域名解析 -> 找到对应的IP地址 -> 然后进行TCP连接 -> 浏览器发送HTTP请求 -> 服务器接收请求 -> 服务器处理请求并返回HTTP报文 -> 以及浏览器接收并解析渲染页面通过缩短请求时间，从而去加快网站的访问速度，提升性能。

常见的几种SPA首屏优化方式

• 减小入口文件体积
• 静态资源本地缓存
• UI框架按需加载
• 图片资源的压缩
• 组件重复打包
• 开启GZip压缩
• 使用SSR

减小入口文件体积

常用方法：

• 路由懒加载： Vue：箭头函数+import React：React.Lazy
• 静态资源引入CDN

---

静态资源本地缓存

后端返回资源问题：

• 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
• 采用Service Worker离线缓存

前端合理利用localStorage

---

UI框架按需加载

常见诸如Element-UI、Antd 快速使用中都有按需使用的文档

---

图片资源的压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素

对于所有的图片资源，我们可以进行适当的压缩

对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。

---

组件重复打包

假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载

解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3
复制代码

minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

---

开启GZip压缩

拆完包之后，我们再用gzip做一下压缩 安装compression-webpack-plugin

cnmp i compression-webpack-plugin -D
复制代码

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')
​
configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /.js$|.html$|.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }
复制代码

在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用
复制代码

---

使用SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染，React建议Next.js

运行时优化

运行时性能是指页面运行时的性能表现，而不是页面加载时的性能。可以通过chrome开发者工具中的 Performance 面板来分析页面的运行时性能。

比如：

• 减少重绘与重排
• 避免页面卡顿
• 长列表优化
• 滚动事件性能优化
• 使用 Web Workers
• 写代码时的优化点

参考链接

前端首屏优化