前端页面的常用性能优化

• 2021-01-10
  说常用的性能优化是因为优化方法有很多很多，我肯定不能全都理解而且用上，而且有很多方法非常鸡肋，费力不讨好的我也不写了，就单纯的写一下我觉得好用的吧~

一、PC端优化

主要从页面结构分类，分成HTML、CSS、JS 和 AJAX网络请求。

1. HTML

• 减少HTTP资源请求次数。合并静态资源（img、css、js）。避免重复请求。
• 减少HTTP请求大小。对文件进行压缩优化（img、js）。
• 把CSS和JS文件放到外部文件中，不要直接用< style >和< script >写在html里面。
• 避免页面里面写空的href和src，在渲染时仍然会请求和加载。
• 消除阻塞渲染的CSS和JS。
• 把CSS资源引用放到HTML文件顶部。
• 把JS资源引用放到HTML文件底部。
• 尽量预先设定图片大小，不然图片加载过程中会更新排版。
• 不在HTML里面直接缩放图片。
• 减少DOM元素数量和深度。
• 尽量避免使用< table >、< iframe >
  table是将内部的DOM渲染树全部生成之后一次性绘制到页面上的，长表格渲染很消耗性能，可以使用< ul >代替。
  尽量使用异步方式动态添加 iframe，iframe 内部资源的下载进程会阻塞父页面静态资源下载和CSS、HTML DOM的解析。

2. CSS

• 避免使用CSS import 引用加载CSS。
• 避免在选择器末尾添加通配符，这样会至少增加一倍多的计算量。
• 尽量减少关系型样式表的写法，直接用唯一类名可以提升渲染效率。
• CSS动画尽量用 translate、scale 替代 top、height，避免页面重排产生的计算量。
• 避免使用CSS表达式或者CSS滤镜。

3. JavaScript

• 尽量使用异步 JavaScript 资源。
• 减少使用JS动画，直接操作DOM容易引起页面重排。
• 避免运行耗时的 JavaScript，会阻塞构建DOM树、渲染页面。

4. AJAX 和网络请求

• 使用可缓存的ajax。
• 尽量使用GET来完成ajax请求。POST请求会发起两次TCP数据包传输。

5. 其他

有一些是我没用过的，有一些是我也不太理解只是听说过的，先一起放在这里吧。

• 使用 gzip 压缩传输内容
• 为HTML指定 Cache-Control 或 expires。可将HTML内容存储起来，在页面中缓存的 cache-control 和 expires 有效时，不再向服务器发送请求。
• 合理设置 Etag 和 last-Modified。使用浏览器缓存。
  未修改的文件会返回304，在缓存中读取，可减少web资源下载避免带宽消耗。
• 减少页面重定位。会延长页面内容返回的等待时间。
• 使用静态资源分域存放来增加下载并行数。
• 使用静态资源CDN来存储文件。
• 使用 CDN Combo 下载传输内容。
• 减少 cookie 的大小并进行 cookie 隔离。
• 缩小 favicon.ico 并缓存。

二、移动端优化

移动端和PC端的侧重点不同，比如PC端可以做的非常华丽，请求的网络资源多一些也没什么，但是在移动端，我们希望能用更快的速度和更少的网络消耗。

1. 更快的速度

• 首屏数据提前请求，避免JS文件加载之后才请求数据。
• 首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化。
• 首屏必备的CSS和JavaScript可以在行内加载。
• 模块化资源并行下载。
• 资源预加载。

2. 更小的流量

• 合理利用浏览器缓存，减少网络请求，如 localStrong。
• 静态资源离线方案，在本地读取。

3. 图片处理

• 图片压缩处理，使用更高压缩比格式的图片。
• 使用PS切图的图片可以用 “导出为web所用格式”。
• 导出的图片使用网站在线压缩可以获得更小的图片。
• 使用较小的图片，合理使用 base64 内嵌图片。
• 图片懒加载，在页面滚动时动态载入图片。
• 使用 media 或 srcset 根据不同屏幕加载不同大小的图片。
• 使用 iconfont 代替图标。
• 定义图片大小限制。

4. 其他

仍然写我没用过或者不太懂得东西233

• meta dns prefetch 设置 DNS 欲解析，提前解析静态资源的主机IP。
• 合理利用MTU策略。
• 尝试使用AMP HTML。
• 尝试使用PWA模式。