Web前端性能优化思路

Posted 2022-03-03 Thoughtworks洞见

const memoizedValue = useMemo(() =>
computeExpensiveValue(a, b);
, [a, b]);

return <AComponent value=memoizedValue/>;

但useMemo自身也有性能消耗，需要视情况使用，某些场景可以利用React的渲染机制避免性能问题。

3.2 Web Worker

总体原则：多线程思想。

常用方法：

Dedicated Workers，处理与UI无关的密集型数学计算：大数据集合排序、数据压缩、音视频处理；

Service Worker，服务端推送，或者PWA中配合CacheStorage在前端控制缓存资源；

Shared Worker，Tab间通信。

JS语言在设计之初就是单线程异步模型，好处是可以高效处理I/O操作，但坏处是无法利用多核CPU。

Web Worker会启动系统级别的线程，可进行多线程编程，发挥多核的性能。

3.3 Web Assembly

总体原则：将复杂的计算逻辑编译为Web Assembly，避免JS类型推断过程中的性能开销，可用于性能的极限优化。

适用范围有限：

曾在网上看到，有人使用自顶向下非优化的斐波那契数列算法来举例，说Web Assembly比原生JS快一倍，实测之后似乎也没有。

在同一台机器测试，其中求第48个值的耗时如下：

C（Ubuntu+GCC）：18s

JS（V8）：32s

Web Assembly（V8+EMCC）：39s

一种可能的猜想是，斐波那契计算中没有大量的类型推断，而且V8内部有一些优化机制，使得此处JS执行速度快于Web Assembly。

简而言之，并非所有场景都适用于Web Assembly。

另一种运用场景是，把不同语言编写的代码（C/C++/Java等）编译为Web Assembly，能以接近原生的速度在Web中运行，并且与JS共存。

总结

导致前端性能问题的因素是多方面的。

如果是前端资源加载慢，导致页面慢，则应该考虑如何缩短请求耗时。而如果是前端页面逻辑笨重，UI数据量太大，则可以试着从减少重排重绘的角度去优化。对于耗时长的复杂计算，缓存计算结果往往是见效较快的优化方式。

最后需要注意的是，在实际应用开发过程中，因为受限于开发成本，所以需要平衡优化所花的代价与其对应产生的成效。可以有针对性地对性能瓶颈进行分析和处理，同时也需要避免引入不必要的优化措施，以确保最终优化效果。

---

- 相关阅读 -

WEB前端安全自查和加固

前端不止：Web性能优化 - 关键渲染路径以及优化策略

点击【阅读原文】可至洞见网站查看原文&加粗字体部分的相关链接。

本文版权属Thoughtworks公司所有，如需转载请在后台留言联系。

前端进阶Web前端性能优化

前端进阶（1）Web前端性能优化

Web前端性能优化, 不仅能够改善站点的用户体验，并且能够节省相当的资源利用。下面将从1）服务器、2）html内容、3）css、 4）javascript、 5）图片等几方面介绍具体的优化操作。

1. 服务器优化

1.1. 使用内容分发网络（CDN）

把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。

1.2. 服务器使用http2.0协议

Http2.0的优点

1. 二进制分帧
2. 首部压缩
3. 流量控制
4. 多路复用
5. 请求优先级
6. 服务器推送

e.g 使用nginx, 要求 1)v1.9.5以上, 2)使用https；

1.3. GZIP压缩

1.4. 使用浏览器缓存

CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。

通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，减少网络请求次数。

1.5. 设置ETag

ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。

2. HTML内容优化

2.1. 减少HTTP请求数

这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。 常见方法：

1. 合并多个CSS文件和js文件, 并进行最小化处理。
2. 利用CSS Sprites整合图像，
3. 行内图片Base64编码，使用 data：URL scheme在实际的页面嵌入图像数据
4. 合理设置HTTP缓存

2.2. 减少DNS查找

为了减少DNS的询次数，最好的解决方法就是在页面中减少不同的域名请求的机会。

2.3. 避免重定向 301/30x

如果重定向的话，就需要在访问过程中重复发起一连串的动作，会消耗很多时间，因此避免出现多次重定向地址或资源的访问。

2.4. 避免在html标签中写style属性

js,css 写到单独的文件中，便于浏览器缓存。

2.5. 异步加载组件,预加载组件 (ansyc, defer)

ansyc, defer不会阻塞浏览器的文档解析。

1. ansyc用于异步加载

2. defer用于预加载

   2.6. 延迟、分页加载图片

   对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

2.7. 减少DOM元素数量

页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。

2.8. 最小化iframe的数量

iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

2.9. 避免404

HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

2.10. 对Ajax请求使用GET方法

2.11. 避免空的图像src

3. CSS优化

3.1. 将CSS代码放在HTML页面的顶部

3.2. 合并、压缩CSS

3.3. CSS选择符优化

1. 浏览器对选择符的解析是从右往左进行的
2. 按照ID查询效率最高

3.4. 避免使用CSS表达式

3.5. 使用<link>来代替@import

3.6. 避免使用Filters

4. javascript优化

4.1. 将JavaScript脚本放在页面的底部

4.2. 将JavaScript和CSS作为外部文件来引用

在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

4.3. 合并、压缩JavaScript

4.4. 删除无用、重复的脚本

4.5. 最小化DOM的访问

使用JavaScript访问DOM元素比较慢

4.6. 开发智能的事件处理程序

4.7. javascript代码注意

1. 减少作用域链查找（多用局部变量，少访问全局变量）
2. 减少闭包的使用，避免内存泄漏
3. 谨慎使用with
4. 避免使用eval Function函数
5. 字符串拼接， Javascript中使用”+” 号来拼接字符串效率是比较低，建议使用数组的 join方法

5. 图像优化

5.1. 优化图片大小

5.2. 通过CSS Sprites优化图片

5.3. 不要在HTML中使用缩放图片

5.4. favicon.ico要小而且可缓存

6. 其他

6.1. 减小Cookie大小，尽量不使用cookie

cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输

6.2. 负载均衡

负载均衡load balancer，降低每个站点的请求书，提高单个请求的响应时间。