性能优化从零到一

性能优化需要做的事情很多我所理解的是从网络层面，构建层面，浏览器渲染层面，服务器层面展开

页面监控的指标有哪些

FCP（First Contentful Paint)：白屏时间（第一个文本绘制时间）

Speed Index：首屏时间

TTI（Time To Interactive）：第一次可交互的时间

lighthouse score（performance）：Chrome 浏览器审查工具性能评分

FCP（白屏时间）：是指从用户进入网站（输入 url、刷新、跳转等方法）的时刻开始计算，一直到页面有内容展示出来的时间节点

这个过程包括 dns 查询、建立 tcp 连接、发送首个 HTTP 请求、返回 html 文档、html 文档 head 解析完毕

有哪些软件可以监控到

百度、google...

如何提速

说白了是如何做性能优化，这里不说废话，从四个角度切入

前端工程化角度思考（以 webpack 为例）

webpack 方面的

构建时压缩图片、使用 webp 图片、优化 SVG 图标

框架角度

Vue 我不熟，仅 React 而言，可以从这几个方面来做功夫

如果是类组件的话，使用 pureComponent、shouldComponentUpdate

如果是函数式组件的话，可以使用 useMemo、useCallback、memo

useMemo 和 useCallback 的区别

memo 应该和 useMemo 结合

优化 UI 代码体积

使用 React.lazy 做代码分割

如果遇到列表，使用 key 做关键字，并可使用虚拟列表

关于虚拟列表的解决方案，我在这篇文章都写了

具体为懒加载、IntersectionObserver、getBoundingClientRect

HTTP 方面

使用 HTTP 缓存

升级为 HTTP2

服务器使用 gzip 压缩

OSS+CDN 加速

页面构建方面

CSS 放顶部、JS 放底部

减少回流和重绘

回流和重绘

script defer、async

实战

react 项目部署后如何工作

缓存周末工作（搭配 node 服务器实战）

js、css、html 保证更新，又利用缓存

纯协商缓存方案

优点：能够保证每次前端打包后丢上服务器资源一定更新

缺点：只要文件是新放的，即使文件内容没变也不缓存

强缓存加定时

优点:：一定期限内，根本不用向服务器询问，一定是拿到缓存。速度最快

缺点：如何不配合hash，无法感知到文件更新

Sponsor

小报童专栏导航

性能优化从零到一 ​

页面监控的指标有哪些 ​

有哪些软件可以监控到 ​

如何提速 ​

前端工程化角度思考（以 webpack 为例） ​

框架角度 ​

HTTP 方面 ​

页面构建方面 ​

实战 ​

纯协商缓存方案 ​

强缓存加定时 ​

参考资料 ​