前端性能优化

Posted 2021-11-27 still1

1) 性能优化指标

2) 性能优化工具

3) 性能优化法制

4) HTTP协议头缓存

5) 资源按需加载

6) 不同网络类型的优化

7) 优化实战案例

---

如今的前端开发已经从严重依赖后端演变成了node做中间层，MVVM框架进行服务端渲染做view层。性能优化也变得异常重要，

主要对以下几个方面做了几个总结：

1.performance面板

如何查看前端页面的性能？

1) 在chrome浏览器打开开发者工具，查看performance面板，然后点击" Start profiling and reload page"就可以重载页面，然后显示页面性能了。

2) 如果是react，可以安装"react-devtools"查看各个组件的渲染情况；还可以安装"redux-devtools-extension"查看redux的数据流动情况。

 

2.雅虎军规

雅虎军规是业界最知名的性能优化指南，虽然有些已经不适用了，但是有很多条直到现在仍然很有参考价值的，非常适合一条条对着优化。

1) 尽量减少 HTTP 请求个数

2) 使用 CDN（内容分发网络）

3) 为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。

4) 避免空的 src 和 href

5) 使用 gzip 压缩内容

6) 把 CSS 放到顶部

7) 把 JS 放到底部

8) 避免使用 CSS 表达式

9) 将 CSS 和 JS 放到外部文件中

10) 减少 DNS 查找次数

11) 精简 CSS 和 JS

12) 避免跳转

13) 剔除重复的 JS 和 CSS

14) 配置 ETags

15) 使 AJAX 可缓存

16) 尽早刷新输出缓冲

17) 使用 GET 来完成 AJAX 请求

18) 延迟加载

19) 预加载

20) 减少 DOM 元素个数

21) 根据域名划分页面内容

22) 尽量减少 iframe 的个数

23) 避免 404

24) 减少 Cookie 的大小

25) 使用无 cookie 的域

26) 减少 DOM 访问

27) 开发智能事件处理程序

28) 用 <link> 代替 @import

29) 避免使用滤镜

30) 优化图像

31) 优化 CSS Spirite

32) 不要在 html 中缩放图像——须权衡

33) favicon.ico要小而且可缓存

34) 保持单个内容小于25K

35) 打包组件成复合文本

3.首屏性能优化

1）把首屏用到的background-image里面的图片放到display: none的img里面进行预加载。

2）必要的时候，把首屏css和js内嵌到html里面去。

3）首屏的一些必要的数据js请求提前。

4.html，css 和 js的性能优化

1） 在html里面对常用到的http请求host进行dns prefetch，设置dns预解析。

2）css里面用transform代替left或者top做动画。

3）使用css3动画时开启GPU加速。

4）不要用settimeout或者setinterval做动画，用requestAnimatinFrame。

5）同步js请求编程异步js请求。

6）对js使用混淆。

7）必要时利用service worker。

5. PC，移动端和服务端的性能优化

1) 使用canvas做动画。

2）图片进行懒加载或者延迟加载。

3）尽量使用事件代理，避免使用事件绑定。

4） 对于多次http请求的数据，用localStorage或者sessionStorage进行缓存。

5） 移动端使用touchstart代替click。

6） 在服务端对图片，视频使用cdn加速，对css和js使用缓存，在前端给对应资源打上hash码或者md5码。

6. react 和 vue框架的性能优化

1)  react的叶子节点使用纯函数组件，中间节点使用pure组件，必要的时候才使用类组件。

2) 使用reselect对action进行缓存。

3) 不要用{{}}方式直接定义object，而是用一个变量进行缓存。

7. 前端工业化的性能优化

1) 使用服务端渲染。

2) 对ui框架使用按需加载。

3) 把打包后大的js文件分成多个，不同的页面进行按需加载。

4) 使用gzip压缩。

 

参考：https://www.cnblogs.com/yangzhou33/p/9944106.html

---

你有用过哪些前端性能优化的方法？

1) 减少HTTP请求次数

2) CSS Sprites， JS、CSS源码压缩、图片大小控制合适。

3) 网页Gzip，CDN托管， data缓存，图片服务器。

4) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费。

5) 前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

6) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

7) 当需要设置的样式很多时设置className而不是直接操作style

8) 少用全局变量、缓存DOM节点查找的结果

9) 减少IO读取操作

10) 避免使用CSS Expression (css表达式) 又称Dynamic properties(动态属性）

11) 图片预加载，将样式表放在顶部

12) 将脚本放在底部，加上时间戳

13) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

 

---

 

web前端优化

1) 减少HTTP请求

2）使用内容发布网络 (CDN)

什么是CDN，是分布在不同位置的服务器，主要存放静态资源（图片，css，js等)，以便用户更加快速的访问内容。

3) 添加本地缓存

加入本地缓存，在第一次访问时，把静态资源缓存到浏览器，第二次访问不会再次发送请求。浏览本身的缓存机制并不是十分靠谱，个人推荐

用html5的manifest，只需要一个配置文件就ok。还有一个存放到localStorage的（本人没有尝试过）

4) 压缩资源文件

5) 将CSS样式表放在顶部，把javascript放在底部（浏览器的运行机制决定）

6) 避免使用CSS表达式

7) 配置ETag

Etag在请求资源是会对比服务器上次返回的Etag是否一致，如果一致，则请求为304（协商缓存）。还是推荐manifest的方式缓存。

8) 减少DNS查询

9) 使用外部javascript 和 CSS

10) 精简javascript

11) 避免重定向

12) 删除重复脚本

13) 使Ajax可缓存

14) 图片lazyLoad