前端性能优化方法总结

Posted 2022-11-29 hursing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端性能优化方法总结相关的知识，希望对你有一定的参考价值。

0.前言

现今“前端”这个词涵盖的技术已经远不只html/CSS/JS了。我们先来看看数据的最长链路：

起点是浏览器地址栏输入框
浏览器缓存
浏览器网络请求
各级路由器和CDN
nginx或F5
网关缓存
Node.js
Node层缓存
静态文件读取/数据库读取/服务器渲染
返回响应通过各级路由器
浏览器发起预连接、预加载、子资源请求等
浏览器渲染
JS执行引起更多网络请求和渲染

所以，每一个节点都是有优化空间的。

本文不会解释各个技术名词，请自行百度，同时也略过服务器硬件的优化。

1.地址栏的优化

开启HSTS：如果全站都是HTTPS，使用HSTS不仅更安全，也减少一次HTTP 301跳转。
URL尽可能地短，包括域名。如果要做到SEO的keyword in url，那就只放重要的keyword即可。

2.网络层优化

非安全性敏感页面和资源，使用HTTP协议即可，减少加解密过程的消耗。
对静态资源设置HTTP缓存并使Max-Age尽可能长，减少浏览器发起的请求数。子资源如CSS、JS等可在文件名或query中加入版本号/时间戳/hash值，然后把缓存期限设到最大。
开启Etag
使用ServiceWorker的Cache API提前缓存资源
使用dns-prefetch、preconnect、prefetch提示浏览器做预处理
开启压缩，并覆盖尽可能多的mime type。Brotli优于Gzip。
启用CDN。条件许可的话可自行预热或保持热度，减少CDN的回源。
使用开源代码的免费CDN时，选择高速的。如果要做SEO，那选百度的为佳。
启用HTTP2，在中高速网络下，单个连接完成数据传输的效率更高。
减少内网的中间节点
公网出口的Http Server用最高速的实现。软件是Nginx，硬件是F5等。
使用服务质量高的DNS服务商，降低DNS过程的延时和错误率。
DNS设置较长的TTL
各级服务器内存缓存设置足够大

3.Nginx配置优化

足够多的进程
足够大的内存缓存设置
负载均衡
API请求，不同域名时，服务器直接支持跨域优于Nginx反向代理。
关闭冗余的header信息

4.HTML/CSS/JS优化

减少DOM数量和层级。确保语义清晰的前提下使用尽可能少的标签。
资源懒加载、延时加载
去掉log，debugger
去掉埋点或使用beacon等高级方法来做埋点
1KB以下的图片使用base64做内联
图片预压缩，然后nginx关闭对图片做压缩。不关闭可能会更慢。
图片做好不同分辨率的副本（包括缩略图），按需要选择显示。
缓存后端数据。MPA可使用cookie、local/session storage等方式，SPA可利用框架缓存在内存。
内联CSS、JS小文件
JS、CSS最小化
合并CSS、JS文件，减少网络请求。
CSS Sprite。合并多个小图到一张大图里，通过定位显示指定图片，减少网络请求
在<head></head>标签内的外部JS加上async属性
在靠近</body>的地方加载外部JS。这些JS不应该引起渲染更新
所有文件的命名里禁止使用广告拦截插件的黑名单关键字，例如ad、adv、advertise等
JS使用高效的API，例如字典的遍历操作使用for...of最快。
少使用第三方库，能用原生实现就用原生，或只用必须依赖的库的API
自己精简第三方库，去掉用不着的部分
使用CSS3动画代替JS Timer类动画
无限的瀑布流，回收利用DOM节点，或只置空远离屏幕外的img src。
信息流做分页加载
canvas：离屏渲染、缓存。
合理设计DOM层次，会被JS频繁操作的地方不要引起大范围的重排版。
跨整站使用的代码，抽出来单独加载。
单页面应用SPA，开启分包
减少资源的链式依赖
webp的使用
合理选择浏览器的兼容范围。这会影响到js的polyfill和css的verdor prefix。

5.Node.js优化

开启足够多的进程。
根据UA做好浏览器判断，可在渲染结果中减少一些为了兼容性而存在的代码。记得在响应header中加上vary。
Java或php后端做的优化，用Node.js实现时也可以做。比如SQL优化，Redis、MQ的使用等。
模板缓存
减少、合并cookie数据
静态文件直接用nginx托管

以上是关于前端性能优化方法总结的主要内容，如果未能解决你的问题，请参考以下文章