课程笔记

《前端全链路性能优化实战》[ ] 书籍 [ ] 讲座 [x] 视频
作者	刘威	出版社	极客时间
阅读日期	2020-9-6	更新日期	2020-9-6
相关链接	课程页面仓库	备注	不知道为啥下架了

全课程结构大致如下：

视频《前端全链路性能优化实战》 - 图1

课程笔记

视频《前端全链路性能优化实战》 - 图2

1 课程背景介绍

从访问页面到渲染页面，让访问更快、性能更好。

网址或者app的性能优化非常重要。

需要体系化学习

2 静态资源优化

2.1 图片：格式选择

jpeg 有损压缩、颜色丰富
png 无损、有透明 png24 png8
gif 256色、透明和不透明。动画
webp 现代格式、可有损无损、可动画、最多256色不适合彩色图片

看京东的 network 能看到 jpg gif png

2.2 图片：图片加载

使用压缩

png图片压缩

压缩png node-pngquant-native 跨平台，压缩效果好
实际中使用 jdf-png-native 进一步封装，可以使用node进行压缩，代码忽略

jpg图片压缩

使用 jpegtran 这个包，具体用法也忽略

gif图片压缩

使用 gifsicle 工具，具体用法忽略

图片尺寸随着网络环境变化

不同的网络环境 wifi 4g 3g 加载不同尺寸的图片，通过url的参数来改变，CDN一般会提供

xxx/s100x100/xxx.jpg

响应式图片

js绑定时间检测窗口大小
css媒体查询，设置图片宽度
img srcset 属性，设置多张图片

<img srcset="img-320w.jpg, img-640w.jpg 2x,img-960w.jpg 3x" src="img-960w.jpg">

这里的 x表示 drp设置像素比

逐步加载图像

统一使用占位符
LQIP(low quality image placeholders) 低质量图像占位符 npm i lqip lqip-loader
- 可以取图片低质量的base64、可以取图片主题色值
SQIP(svg quality image placeholders) 基于svg的图像占位符 npm i sqip 官网
- 可以设置压缩比

不一定真的需要图片：

使用 web front
base64
雪碧图 image sprite

2.3 图片：服务端图片自动优化

给图片添加特殊参数，获得不同尺寸、格式、质量的图片

也可以加log 模糊之类的，使用工具来实现压缩

2.4 精简html

优化代码减少html结构、精简https: 、压缩等

css尽量放到头部（之前文章也提到），因为css加载不会阻塞DOM的解析，但会阻塞渲染，也阻塞后面js的执行，尽可能早执行，减少抖动、白屏

js尽可能放到后面

设置 favicon.ico 图标

首屏必要的css和js，白屏优化

举例了 m.weibo.com

2.5 css的优化原则

提升CSS渲染性能

谨慎使用 nth-child 等，fixed等
减少样式层级数
避免 text-indent:999等
避免耗电量大的效果 transform opactiy 等
合理使用选择器
外链
精简、压缩
缓存字体以base64放到localstorage中
css动画，延迟、多个同时、结合svg

2.6 js执行效率

常规优化

需要时候优化
- 提升加载性能，当底部
- js变量和函数优化
  - 使用id选择器
  - 避免eval
  - 节流
  - 事件委托
- js动画优化
  - 使用css canvas
  - 合理使用 requestAnimationFrame 替代定时器
- 合理使用缓存
可维护性

2.7 js缓存和优化

cookie。访问 m.jd.com 看到cookie，有很多内容，用来识别用户、记录行为等
session
indexedDB 谷歌文档石墨文档等看石墨文档的indexedDB
localStorage 实践百度m站首页，还有hash来识别

更多的是基于业务进行思考

2.8 选择模块化方案

口水话 cjs amd umd es

2.9 减少浏览器回流和重绘

css控制
js及时合并，减少影响范围

2.10 控制DOM

口水

2.11 有哪些压缩工具

没看到

2.12 打包方案

2.13 版本号策略

缓存更新，修改header头
文件名修改
2.14 构架工具

还有fis和jdf，百度和京东的修改构建工具，定制开发

jdf可以看一下

2.15 打包优化

定位体积大的模块
删除无关依赖
抽离CDN
dll&dllReference 方式优化

webpack.DllPlugin

总的来说，就是念文档，但直接看百度和京东的m站操作还是很神，至少熟悉

3 页面渲染架构设计和性能优化

3.1 浏览器渲染过程

简述渲染过程：

浏览器解析parse HTML 生成 DOM Tree
浏览器解析CSS，生成 CSSOM(CSS Object Model) Tree
js通过DOM API和CSSOM API来操作 DOM Tree和CSS Rule Tree，合成渲染树 Render Tree
布局Layout，也就是回流reflow，根据 render tree 进行回流，计算每个节点的几何信息
绘制painting，根据上一步，得到每个节点的绝对像素
展示 display，把像素发给GPU，展示页面

3.2 主流页面渲染技术架构和方案

SSR
- 后端同步渲染
- 同构直出
- BigPipe
CSR 客户端渲染

3.3 后端同步渲染

最传统，以jsp为例

快速生鲜、耦合严重、不好改、得套页面

3.4 动态页面静态化

纯静态化、伪静态化

占用空间、死链、seo好

3.5 前后端分离

3.6 单页面

3.7 BigPipe

把页面加载到 pagelet的小部件中，加快页面渲染速度，区分不同区块，实现流传输管道

还是在页面中引入js执行时候对每一个块执行不通的渲染效果

他山之石

视频《前端全链路性能优化实战》