WEB前端优化实践

开发者 · 2024-10-5 01:45:16

提升首屏的加载速率，是前端性能优化中最告急的环节，这里笔者梳理出一些通例且有效的首屏优化发起
目标：通过对比优化前后的性能变革，来验证方案的有效性，相识并把握其原理

1、路由懒加载

SPA 项目，一个路由对应一个页面，如果不做处理惩罚，项目打包后，会把全部页面打包成一个文件，当用户打开首页时，会一次性加载全部的资源，造成首页加载很慢，低沉用户体验。
列一个实际项目标打包详情：

将路由全部改成懒加载
// 通过webpackChunkName设置分割后代码块的名字const Home = () => import(/* webpackChunkName: "home" */ "@/views/home/index.vue");const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue");…………const routes = [ { path: "/", name: "home", component: Home }, { path: "/metricGroup", name: "metricGroup", component: MetricGroup }, ………… ]重新打包后，首页资源拆分为 app.js 和 home.js，以及对应的 css 文件
通过路由懒加载，该项目标首页资源压缩约 52%
路由懒加载的原理

懒加载条件的实现：ES6的动态地加载模块——import()

调用 import() 之处，被作为分离的模块出发点，意思是，被哀求的模块和它引用的全部子模块，会分离到一个单独的 chunk 中
——摘自《webpack——模块方法》的import()末节

要实现懒加载，就得先将举行懒加载的子模块分离出来，打包成一个单独的文件。
webpackChunkName 作用是 webpack 在打包的时间，对异步引入的库代码（lodash）举行代码分割时，设置代码块的名字。webpack 会将任何一个异步模块与类似的块名称组合到类似的异步块中。
2、组件懒加载

除了路由的懒加载外，组件的懒加载在许多场景下也有告急的作用
举个?：
home 页面和 about 页面，都引入了 dialogInfo 弹框组件，该弹框不是一进入页面就加载，而是须要用户手动触发后才展示出来
home 页面示例：
<template>  <div终极，使用组件路由懒后，该项目标首页资源进一步镌汰约 11%
组件懒加载的使用场景

偶然资源拆分的过细也欠好，大概会造成欣赏器 http 哀求的增多
总结出三种得当组件懒加载的场景：
1）该页面的 JS 文件体积大，导致页面打开慢，可以通过组件懒加载举行资源拆分，使用欣赏器并行下载资源，提升下载速率（比如首页）
2）该组件不是一进入页面就展示，须要肯定条件下才触发（比如弹框组件）
3）该组件复用性高，许多页面都有引入，使用组件懒加载抽离出该组件，一方面可以很好使用缓存，同时也可以镌汰页面的 JS 文件大小（比如表格组件、图形组件等）
3、公道使用 Tree shaking

Tree shaking 的作用：消除无用的 JS 代码，镌汰代码体积
举个?：
// util.jsexport function targetType(target) {  return Object.prototype.toString.call(target).slice(8, -1).toLowerCase();}export function deepClone(target) {  return JSON.parse(JSON.stringify(target));}项目中只使用了 targetType 方法，但未使用 deepClone 方法，项目打包后，deepClone 方法不会被打包到项目里
tree-shaking 原理：
依靠于ES6的模块特性，ES6模块依靠关系是确定的，和运行时的状态无关，可以举行可靠的静态分析，这就是 tree-shaking 的底子
静态分析就是不须要实行代码，就可以从字面量上对代码举行分析。ES6之前的模块化，比如 CommonJS 是动态加载，只有实行后才知道引用的什么模块，就不能通过静态分析去做优化，正是基于这个底子上，才使得 tree-shaking 成为大概
Tree shaking 并不是万能的

并不是说全部无用的代码都可以被消除，照旧上面的代码，换个写法 tree-shaking 就失效了
// util.jsexport default {  targetType(target) { return Object.prototype.toString.call(target).slice(8, -1).toLowerCase();  },  deepClone(target) { return JSON.parse(JSON.stringify(target));  }};// 引入并使用import util from '../util';util.targetType(null)同样的，项目中只使用了 targetType 方法，未使用 deepClone 方法，项目打包后，deepClone 方法照旧被打包到项目里
在 dist 文件中搜刮 deepClone 方法
究其缘故原由，export default 导出的是一个对象，无法通过静态分析判断出一个对象的哪些变量未被使用，以是 tree-shaking 只对使用 export 导出的变量见效
这也是函数式编程越来越火的缘故原由，由于可以很好使用 tree-shaking 精简项目标体积，也是 vue3 全面拥抱了函数式编程的缘故原由之一
4、骨架屏优化白屏时长

使用骨架屏，可以紧缩白屏时间，提升用户体验。
国内大多数的主流网站都使用了骨架屏，特殊是手机端的项目。
SPA 单页应用，无论 vue 照旧 react，最初的 html 都是空缺的，须要通过加载 JS 将内容挂载到根节点上，这套机制的副作用：会造成长时间的白屏。
常见的骨架屏插件就是基于这种原理，在项目打包时将骨架屏的内容直接放到 html 文件的根节点中。
使用骨架屏插件，打包后的 html 文件（根节点内部为骨架屏）：
同一项目，对比使用骨架屏前后的 FP 白屏时间：

无骨架屏：白屏时间 1063ms
有骨架屏：白屏时间 144ms

骨架屏确实是优化白屏的不二选择，白屏时间紧缩了 86%
骨架屏插件

这里以 vue-skeleton-webpack-plugin 插件为例，该插件的亮点是可以给差别的页面设置差别的骨架屏，这点确实很酷
1）安装
npm i vue-skeleton-webpack-plugin
2）vue.config.js 设置
// 骨架屏const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");module.exports = { configureWebpack: { plugins: [ new SkeletonWebpackPlugin({ // 实例化插件对象 webpackConfig: { entry: { app: path.join(__dirname, './src/skeleton.js') // 引入骨架屏入口文件 } }, minimize: true, // SPA 下是否须要压缩注入 HTML 的 JS 代码 quiet: true, // 在服务端渲染时是否须要输出信息到控制台 router: { mode: 'hash', // 路由模式 routes: [ // 差别页面可以设置差别骨架屏 // 对应路径所须要的骨架屏组件id，id的界说在入口文件内 { path: /^\/home(?:\/)?/i, skeletonId: 'homeSkeleton' }, { path: /^\/detail(?:\/)?/i, skeletonId: 'detailSkeleton' } ] } }) ] }}3）新建 skeleton.js 入口文件
// skeleton.jsimport Vue from "vue";// 引入对应的骨架屏页面import homeSkeleton from "./views/homeSkeleton";import detailSkeleton from "./views/detailSkeleton";export default new Vue({ components: { homeSkeleton, detailSkeleton, }, template: ` <div> <homeSkeleton id="homeSkeleton" style="display:none;" /> <detailSkeleton id="detailSkeleton" style="display:none;" /> </div> `,});5、长列表假造滚动

首页中不乏有须要渲染长列表的场景，当渲染条数过多时，所须要的渲染时间会很长，滚动时还会造成页面卡顿，团体体验非常欠好
假造滚动——指的是只渲染可视地区的列表项，非可见地区的不渲染，在滚动时动态更新可视地区，该方案在优化大量数据渲染时效果是很显着的
假造滚动图例：
假造滚动根本原理：
盘算出 totalHeight 列表总高度，并在触发时滚动变乱时根据 scrollTop 值不停更新 startIndex 以及 endIndex ，以此从列表数据 listData 中截取对应元素
假造滚动性能对比：

使用假造滚动使性能提升了 78%
假造滚动插件

假造滚动的插件有许多，比如 vue-virtual-scroller、vue-virtual-scroll-list、react-tiny-virtual-list、react-virtualized 等
这里简单先容 vue-virtual-scroller 的使用
// 安装插件npm install vue-virtual-scroller// main.jsimport VueVirtualScroller from 'vue-virtual-scroller'import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'Vue.use(VueVirtualScroller)// 使用<template> <RecycleScroller 测试实行：
如果直接把下面这段代码直接丢到主线程中，盘算过程中页面不停处于卡死状态，无法操纵
let sum = 0;for (let i = 0; i < 200000; i++) { for (let i = 0; i < 10000; i++) { sum += Math.random() } }使用 Web Worker 实行上述代码时，盘算过程中页面正常可操纵、无卡顿
// worker.jsonmessage = function (e) { // onmessage获取传入的初始值 let sum = e.data; for (let i = 0; i < 200000; i++) { for (let i = 0; i < 10000; i++) { sum += Math.random() } } // 将盘算的效果通报出去 postMessage(sum);}Web Worker 详细的使用与案例，详情见一文彻底相识Web Worker，十万、百万条数据都是弟弟?
Web Worker 的通讯时长

并不是实行时间高出 50ms 的使命，就可以使用 Web Worker，还要先考虑通讯时长的题目
如果一个运算实行时长为 100ms，但是通讯时长为 300ms，用了 Web Worker大概会更慢
比如新建一个 web worker, 欣赏器会加载对应的 worker.js 资源，下图中的 Time 是这个资源的通讯时长（也叫加载时长）
当使命的运算时长 - 通讯时长 > 50ms，保举使用Web Worker
7、requestAnimationFrame 制作动画

requestAnimationFrame 是欣赏器专门为动画提供的 API，它的革新频率与表现器的频率保持同等，使用该 api 可以办理用 setTimeout/setInterval 制作动画卡顿的环境
下面的案例演示了两者制作进度条的对比（运行按钮可点击）
可以看到使用定时器制作的动画，卡顿照旧比力显着的
jcode
setTimeout/setInterval、requestAnimationFrame 三者的区别：
1）引擎层面
setTimeout/setInterval 属于 JS引擎，requestAnimationFrame 属于 GUI引擎
JS引擎与GUI引擎是互斥的，也就是说 GUI 引擎在渲染时会壅闭 JS 引擎的盘算
2）时间是否正确
requestAnimationFrame 革新频率是固定且正确的，但 setTimeout/setInterval 是宏使命，根据变乱轮询机制，其他使命会壅闭或耽误js使命的实行，会出现定时器禁绝的环境
3）性能层面
当页面被潜伏或最小化时，setTimeout/setInterval 定时器仍会在背景实举措画使命，而使用 requestAnimationFrame 当页面处于未激活的状态下，屏幕革新使命会被体系停息
8、JS 的6种加载方式

1）正常模式

<script src="index.js"></script>
这种环境下 JS 会壅闭 dom 渲染，欣赏器必须等候 index.js 加载和实行完成后才华去做别的事变
2）async 模式

<script async src="index.js"></script>
async 模式下，它的加载是异步的，JS 不会壅闭 DOM 的渲染，async 加载是无序次的，当它加载竣事，JS 会立即实行
使用场景：若该 JS 资源与 DOM 元素没有依靠关系，也不会产生其他资源所须要的数据时，可以使用async 模式，比如埋点统计
3）defer 模式

<script defer src="index.js"></script>
defer 模式下，JS 的加载也是异步的，defer 资源会在 DOMContentLoaded 实行之前，而且 defer 是有序次的加载
如果有多个设置了 defer 的 script 标签存在，则会按照引入的前后序次实行，即便是反面的 script 资源先返回
以是 defer 可以用来控制 JS 文件的实行序次，比如 element-ui.js 和 vue.js，由于 element-ui.js 依靠于 vue，以是必须先引入 vue.js，再引入 element-ui.js
<script defer src="vue.js"></script><script defer src="element-ui.js"></script>defer 使用场景：一样平常环境下都可以使用 defer，特殊是须要控制资源加载序次时
4）module 模式

<script type="module">import { a } from './a.js'</script>
在主流的当代欣赏器中，script 标签的属性可以加上 type="module"，欣赏器会对其内部的 import 引用发起 HTTP 哀求，获取模块内容。这时 script 的运动会像是 defer 一样，在背景下载，而且等候 DOM 剖析
Vite 就是使用欣赏器支持原生的 es module 模块，开辟时跳过打包的过程，提升编译服从
5） preload

<link rel="preload" as="script" href="index.js">
link 标签的 preload 属性：用于提前加载一些须要的依靠，这些资源会优先加载（如下图红框）
vue2 项目打包天生的 index.html 文件，会自动给首页所须要的资源，全部添加 preload，实现关键资源的提前加载
preload 特点：
1）preload 加载的资源是在欣赏器渲染机制之进步行处理惩罚的，而且不会壅闭 onload 变乱；
2）preload 加载的 JS 脚本其加载和实行的过程是分离的，即 preload 会预加载相应的脚本代码，待到须要时自行调用；
6）prefetch

<link rel="prefetch" as="script" href="index.js">
prefetch 是使用欣赏器的空闲时间，加载页面未来大概用到的资源的一种机制；通常可以用于加载其他页面（非首页）所须要的资源，以便加速后续页面的打开速率
prefetch 特点：
1）pretch 加载的资源可以获取非当前页面所须要的资源，而且将其放入缓存至少5分钟（无论资源是否可以缓存）
2）当页面跳转时，未完成的 prefetch 哀求不会被停止
加载方式总结

async、defer 是 script 标签的专属属性，对于网页中的其他资源，可以通过 link 的 preload、prefetch 属性来预加载
现在当代框架已经将 preload、prefetch 添加到打包流程中了，通过机动的设置，去使用这些预加载功能，同时我们也可以审时度势地向 script 标签添加 async、defer 属性行止理惩罚资源，这样可以明显提升性能
9、图片的优化

平常大部分性能优化工作都会合在 JS 方面，但图片也是页面上非常告急的部分
特殊是对于移动端来说，完全没有须要去加载原图，浪费带宽。怎样去压缩图片，让图片更快的展示出来，有许多优化工作可以做
淘宝首页的图片资源都很小：

图片的动态裁剪

许多云服务，比如阿里云或七牛云，都提供了图片的动态裁剪功能，效果很棒，确实是钱没有白花
只需在图片的url地点上动态添加参数，就可以得到你所须要的尺寸大小，比如：http://7xkv1q.com1.z0.glb.clouddn.com/grape.jpg?imageView2/1/w/200/h/200
图片瘦身前后对比：

原图：1.8M
裁剪后：12.8KB

颠末动态裁剪后的图片，加载速率会有非常显着的提升
图片的懒加载

对于一些图片量比力大的首页，用户打开页面后，只须要出现出在屏幕可视地区内的图片，当用户滑动页面时，再去加载出现在屏幕内的图片，以优化图片的加载效果
图片懒加载实现原理：
由于欣赏器会自动对页面中的 img 标签的 src 属性发送哀求并下载图片，可以通过 html5 自界说属性 data-xxx 先暂存 src 的值，然后在图片出现在屏幕可视地区的时间，再将 data-xxx 的值重新赋值到 img 的 src 属性即可
<img src="" alt="" data-src="./images/1.jpg"><img src="" alt="" data-src="./images/2.jpg">这里以 vue-lazyload 插件为例
// 安装 npm install vue-lazyload // main.js 注册import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// 设置项Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', // 图片加载失败时的占位图 loading: 'dist/loading.gif', // 图片加载中时的占位图 attempt: 1})// 通过 v-lazy 指令使用<ul> <li v-for="img in list"> <img v-lazy="img.src" :key="img.src" > </li></ul>使用字体图标

字体图标是页面使用小图标的不二选择，最常用的就是 iconfont

字体图标的长处：
1）轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会立刻渲染出来，镌汰了 http 哀求
2）机动性：可以随意的改变颜色、产生阴影、透明效果、旋转等
3）兼容性：险些支持全部的欣赏器，请放心使用
图片转 base64 格式

将小图片转换为 base64 编码字符串，并写入 HTML 大概 CSS 中，镌汰 http 哀求
转 base64 格式的优缺点：
1）它处理惩罚的通常黑白常小的图片，由于 Base64 编码后，图片大小会膨胀为原文件的 4/3，如果对大图也使用 Base64 编码，后者的体积会显着增加，即便镌汰了 http 哀求，也无法补充这巨大的体积带来的性能开销，得不偿失
2）在传输非常小的图片的时间，Base64 带来的文件体积膨胀、以及欣赏器剖析 Base64 的时间开销，与它节省掉的 http 哀求开销相比，可以忽略不计，这时间才华真正表现出它在性能方面的优势
项目可以使用 url-loader 将图片转 base64：
// 安装npm install url-loader --save-dev // 设置module.exports = { module: { rules: [{ test: /.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { // 小于 10kb 的图片转化为 base64 limit: 1024 * 10 } }] }] }};

WEB前端优化实践

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品