【总结】2072- 前端常见性能优化策略

优化策略

• 关键资源个数越多，首次页面加载时间就会越长
• 关键资源的大小，内容越小，下载时间越短
• 优化白屏：内联css和内联js移除文件下载,较小文件体积
• 预渲染，打包时进行预渲染
• 使用SSR加速首屏加载（耗费服务端资源），有利于SEO优化。 首屏利用服务端渲染，后续交互采用客户端渲染

什么是Perfomance API

衡量和分析各种性能指标对于确保 web 应用的速度非常重要。Performance API 提供了重要的内置指标，并能够将你自己的测量结果添加到浏览器的性能时间线（performance timeline）中。性能时间线使用高精度的时间戳，且可以在开发者工具中显示。你还可以将相关数据发送到用于分析的端点，以根据时间记录性能指标。

网络优化策略

减少HTTP请求数，合并JS、CSS,合理内嵌CSS、JS

合理设置服务端缓存，提高服务器处理速度。 (强制缓存、对比缓存)

避免重定向，重定向会降低响应速度 (301,302)

使用dns-prefetch,进行DNS预解析

采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理6个TCP链接问题。

采用CDN加速加快访问速度。(指派最近、高度可用)

gzip压缩优化 对传输资源进行体积压缩 (html,js,css)

加载数据优先级 : preload（预先请求当前页面需要的资源） prefetch（将来页面中使用的资源） 将数据缓存到HTTP缓存中

关键渲染路径

• 重排（回流）Reflow： 添加元素、删除元素、修改大小、移动元素位置、获取位置相关信息
• 重绘 Repaint：页面中元素样式的改变并不影响它在文档流中的位置。

我们应当尽可能减少重绘和回流

1.强制同步布局问题

JavaScript强制将计算样式和布局操作提前到当前的任务中

2.布局抖动（layout thrashing）问题

在一段js代码中，反复执行布局操作，就是布局抖动

3.减少回流和重绘

• 脱离文档流
• 渲染时给图片增加固定宽高
• 尽量使用css3 动画
• 可以使用will-change提取到单独的图层中

静态文件优化

1.图片优化

图片格式：

• jpg:适合色彩丰富的照片、banner图；不适合图形文字、图标（纹理边缘有锯齿），不支持透明度
• png:适合纯色、透明、图标，支持半透明；不适合色彩丰富图片，因为无损存储会导致存储体积大
• gif:适合动画，可以动的图标；不支持半透明，不适和存储彩色图片
• webp:适合半透明图片，可以保证图片质量和较小的体积
• svg格式图片:相比于jpg和jpg它的体积更小,渲染成本过高,适合小且色彩单一的图标;

图片优化：

避免空src的图片

减小图片尺寸，节约用户流量

img标签设置alt属性， 提升图片加载失败时的用户体验

原生的loading:lazy 图片懒加载

不同环境下，加载不同尺寸和像素的图片

对于较大的图片可以考虑采用渐进式图片

采用base64URL减少图片请求

采用雪碧图合并图标图片等

2.HTML优化

1. 语义化HTML:代码简洁清晰，利于搜索引擎，便于团队开发
2. 提前声明字符编码，让浏览器快速确定如何渲染网页内容
3. 减少HTML嵌套关系、减少DOM节点数量
4. 删除多余空格、空行、注释、及无用的属性等
5. HTML减少iframes使用 (iframe会阻塞onload事件可以动态加载iframe)
6. 避免使用table布局

3.CSS优化

减少伪类选择器、减少样式层数、减少使用通配符

避免使用CSS表达式，CSS表达式会频繁求值， 当滚动页面，或者移动鼠标时都会重新计算 (IE6,7)

删除空行、注释、减少无意义的单位、css进行压缩

使用外链css,可以对CSS进行缓存

添加媒体字段，只加载有效的css文件

CSS contain属性,将元素进行隔离

减少@import使用，由于@import采用的是串行加载

4.JS优化

通过async、defer异步加载文件

减少DOM操作，缓存访问过的元素

操作不直接应用到DOM上，而应用到虚拟DOM上。最后一次性的应用到DOM上。

使用webworker解决程序阻塞问题

IntersectionObserver

虚拟滚动 vertual-scroll-list

requestAnimationFrame、requestIdleCallback

尽量避免使用eval, 消耗时间久

使用事件委托，减少事件绑定个数。

尽量使用canvas动画、CSS动画

5.字体优化