前端性能优化的整理笔记（一）：https://developer.aliyun.com/article/1414333
CSS对性能的影响
1.降低CSS对渲染的阻塞
尽早的完成下载，譬如优先完成首屏的样式加载
2.利用GPU进行完成动画
对 transform 和 opacity 这样的属性，进行优化，单独建立一个层。不进行布局和重绘。
3.使用 contain 属性
contain 属性，大大降低了布局的时间。浏览器不会重新计算，同级其他元素。
.news li { contain: layout; } 复制代码
4.使用font-display属性
font-display属性在@font-face声明时使用。
借助它，我们可以通过一行简单的CSS来控制字体的显示方式，而不需要使用基于JavaScript的解决方案。这意味着我们的网页可以减小体积，提高性能。
以Vue项目举例，代码优化
1.代码模块化
封装组件，代码复用。通过css预加载处理器，定义css变量和混入mixin。
2.for循环设置key值
for循环，数据遍历渲染的时候，每一项设置唯一的值。
为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值取对比的时候，可以更快的定位到diff
3.Vue路由懒加载
当首屏渲染的时候，能够加快渲染速度。
4.更加理解Vue的生命周期
不要造成内存泄漏，使用过后的全局变量在组件销毁后重新置为null
5.可以使用keep-alive
keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
第四章 资源优化
资源的压缩和合并
一直以来，资源的压缩和合并，都是最为有效的优化方案。
1.减少http请求数量
2.减少请求资源的大小
HMTL压缩
1.使用在线工具进行压缩
2.使用 html-minifier 等npm工具
CSS压缩
1.使用在线工具进行压缩
2.使用 clean-css 等 npm 工具
JS压缩与混淆
1.使用在线工具进行压缩
2.使用Webpack对JS在构建时压缩
CSS JS 文件合并
1.若干小文件。这种情况，可以采用
2.无冲突，服务相同的模块。这种情况， 优先考虑
3.优化加载。这种情况，不考虑
图片优化的方案
图片格式的比较
💎 JPG格式：压缩比高，画质可以很好的保存，色彩感好
使用场景，譬如首页轮播图
缺陷：边缘粗糙，logo一般不会使用 JPG
💎 PNG格式：体积比较大，一般用来做图标和logo
💎 WebP 谷歌提出的新的图片格式
JPG一样的质量，压缩比更高
图片加载的优化
💎 图片的懒加载
1.原生的图片懒加载方案
<img src="./example.jpg" loading="lazy" alt="zhangxinxu"> 复制代码
2.第三方图片懒加载方案
💎使用渐进式图片
渐进式图片的解决方案
💎 使用响应式图片
srset 属性，设置多个图片源，根据屏幕宽度，挑选合适的图片
sizes 属性，视窗宽度的百分比
根据设备的 dpi 和视窗大小，显示合适的图片
字体优化
字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
使用 font-display 属性
第五章 构建优化
项目构建的时候，通过配置，进行优化。
- webpack的优化配置
- 代码拆分
- 代码压缩
- 持久化缓存
- 监测与分析
- 按需加载
这次不展开讲，先挖个坑。
第六章 传输加载优化
在 nginx上 配置 Gzip 压缩
对传输资源，进行体积压缩，可高达 90%
如何配置 nginx 启用 Gzip
gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 9; gzip_types text /plain application /x-javascript text /css application /xml ; gzip_vary on; 复制代码
启用Keep Alive
Keep Alive是在TCP中一个可以检测死连接的机制，可以保持tcp长连接不被断开，属于 tcp 层功能。
HTTP1.1协议默认开启 keepa-live 保持长连接，主要作用是：
提高对 tcp 连接的复用率，减少创建连接过程给系统带来的性能损耗。
HTTP标准中的一部分，默认是开启的。
相关参数的配置，到达最优的体验。
Request Headers 请求头中 Connection: keep-alive 表示开启了 Keep Alive
HTTP资源缓存
官方文档 developer.mozilla.org/zh-CN/docs/…
Service Worker实现渐进式应用
Service Worker作用
1.加速重复访问
2.离线支持
使用 service-worker 可以缓存静态文件
Service Worker注意
1.延长了首屏时间，但页面总加载时间减少
2.兼容性
service worker 在浏览器和移动端的兼容性如下图所示：
3.只能在localhost或https下使用
HTTP/2加速传输
HTTP/2优势
1.二进制传输
HTTP/1是基于文本的，效率比较低，而且不安全
HTTP/2二进制编码，安全而且提供了传输效率
2.请求响应，多路复用
简而言之：多个http请求可以共用同一个TCP连接。
3.Server push 服务端主动推送
html 页面包含 script.js 和 style.css 资源文件。客户端只需要请求page.html，
服务端发现html页面中包含资源文件，会主动推送给客户端。减少客户端请求的次数。
nginx开启HTTP2支持
listen 443 ssl http2; server_name www.orzr3.com; 复制代码
搭建HTTP/2服务
1.HTTP/2只能工作在HTTPS下
需要创建签名证书
2.适合较高的请求量，比较高的请求量，才能发挥他最大的作用
SSR加速渲染
SSR：server side render
服务端渲染SSR的好处
服务器把需要的组件或页面渲染成 HTML 字符串，
然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容
1.加速首屏加载
2.改善SEO 搜索引擎优化
是否使用SSR?
1.架构大型项目，动态页面，面向公众用户
2.搜索引擎排名很重要
第七章 其他的解决方案
IconFont
通过 iconfont 字体引入图标
阿里矢量图库
从 PNG 到 iconfont 的优点：
1.多个图标 =》 一套字体，减少获取时的请求数量和体积。
2.矢量图形，可伸缩
3.直接通过 CSS 修改样式（颜色，大小等）
缺点：
单色彩
SVG 解决方案
从 IconFont 到 SVG 的优点：
1.保持了图片能力，支持多色彩
2.独立的矢量图形，不像iconfont需要下载整套字体
3.XML语法
使用 FlexBox 优化布局
display: flex; flex-flow: row wrap; 复制代码
页面渲染 rendering 和 painting 节省了不少时间，性能明显提升。
FlexBox 的优势
1.更高性能的实现方案
2.容器有能力决定子元素的大小，顺序，对齐，间隔等。
3.双向布局，横向 row 和纵向 column
大厂面试题分享 面试题库
后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
预加载
优化资源加载的顺序
资源优先级
1.浏览器默认安排，资源加载优先级
先有 html 解析头部，加载js和样式，然后解析图片等资源。
2.使用 preload 和 prefetch 调整优先级
preload 优先加载
举例，通过 link 标签，可以预加载图片
1. <head> 2. <metacharset="UTF-8"><title>Water</title><linkrel="preload"href="img/product2.svg"as="image" /></head>复制代码
prefetch 空闲加载，后面会用到的东西。
<link rel="prefetch"as="style" href="product-font.css /> 复制代码
preload 和 prefetch 使用场景
1.preload 提前加载较晚出现，但是对当前页面非常重要的资源，譬如图片和字体。
2.prefetch 加载完当前页面之后，提前加载后面路由需要的资源，优先级低。
预渲染
预渲染的作用
1.大型单页应用的性能瓶颈：JS下载+解析+执行
2.SSR的主要问题：牺牲TTFB 请求过程，来补救首次加载 First Paint 实现起来，也很复杂
3.Pre-rendering 打包时提前渲染页面，没有服务端参与
vue 预渲染
npm install prerender-spa-plugin -D 复制代码
配置 vue.config.js 和 修改main.js
修改 vue.config.js
const path = require('path') // 预渲染插件constPrerenderSPAPlugin = require('prerender-spa-plugin') constRenderer = PrerenderSPAPlugin.PuppeteerRenderermodule.exports = { configureWebpack: { plugins: [ newPrerenderSPAPlugin({ // 生成文件的路径，与webpack打包一致即可staticDir: path.join(__dirname, 'dist'), // 需要预渲染的路由routes: ['/', '/mine'], renderer: newRenderer({ inject: { foo: 'bar' }, headless: false, renderAfterDocumentEvent: 'render-event', }) }) ] } } 复制代码
修改 main.js
newVue({ router, mounted() { document.dispatchEvent(newEvent('render-event')) }, render: h =>h(App) }).$mount('#app') 复制代码
修改路由模式为history
构建成功后 dist 目录下：
根路径和需要预渲染的路径，都生成了 index.html 文件。
当浏览器访问这时，服务器返回的就是对应 html 文件的内容。
骨架组件
使用骨架组件，减少布局移动（Layout Shift）
1.占位
2.提升用户感知性能
最后的话
大厂面试题分享 面试题库
后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
