前端性能优化相关知识

性能优化一直以来都很被重视，也是面试时候常被问到问题，本篇文章主要涉及到前端性能优化的几个点。在这之前，应该先了解一下雅虎军规。

雅虎军规是什么？ （详情查阅）

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.用 代替 @import

29.避免使用滤镜

30.优化图像

31.优化 CSS Spirite

32.不要在 HTML 中缩放图像——须权衡

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

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

35.打包组件成复合文本

1. 压缩 合并

对于 前端性能优化 重要的当然是 首屏 打开速度，而页面首次加载，会发生大量的网络请求来加载数据，应该怎样减少网络请求的时间呢？

1. 减少网络请求次数
2. 减小文件体积
3. 使用 CDN 加速

所以压缩合并就是一个好方法了，而我们能用到的工具也是很多的，如gulp，webpack等。

css  js 压缩 、合并

可以使用工具将css，js代码进行压缩合并，再把压缩 、合并的 JS、CSS 放入 CDN。

图片压缩、合并

图片的合并可以采用 CSS Spirite（精灵图），方法就是页面中一些小图片或者小图标通过photoshop合并成一张图，用 css的background-position属性来定位显示每张图片的位置。（原理主要是减少了图片请求次数）

图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2. 缓存

利用浏览数缓存机制，将一些不需要更新的资源缓存起来，比如页面、图片、文件，当下一个请求来到的时候:如果是相同的 URL，缓存直接使 用本地的副本响应访问请求，而不是向源服务器再次发送请求。这样做只要从两个方面来提高了性能。

1. 减少相应延迟，提升响应时间
2. 减少网络带宽消耗，节省流量