前端性能优化

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压缩。

 

参考：http://www.javashuo.com/article/p-nuiumpen-dm.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