网站性能优化简图

网站性能优化大图 点击看清晰大图

网站性能优化详图 点击看清晰大图

Web性能优化与HTTP/2

雅虎军规35条

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脚本
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.0 尽量减少 HTTP 请求个数

1.什么是http请求?
官方术语解释：从客户端到服务端的请求消息,包括消息首行中,对资源的请求方法资源的标识符及使用的协议.
菜鸟解释：当你打开网页的时候,你所看到的文字,图片,多媒体等等,这一切内容都是你从服务器获取的,每一个内容的获取,就是一个http请求.
减少HTTP请求个数方法：多个图片合并成一个,多个css文件合并一个,多个css文件合并成一个文件,具体怎么合并视实际项目情况而定.

2.0 使用 CDN（内容分发网络）

1.什么是CDN?
官方术语解释：CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
菜鸟解释：在离你最近的地方,放置一台性能比较好,链接比较顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容.

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

4.0避免空的 src 和 href

当标签的href属性为空，或script、img、iframe标签的src属性为空时，浏览器在渲染的过程中仍会将href属性或src属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。

5.0使用 gzip 压缩内容

1.什么是gzip 压缩?
gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。
在服务器将文件压缩后,然后再传输,这样可以显著提升文件传输速度,传输完毕后,浏览器会对压缩过的文件解压缩并执行,减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间

6.0把 CSS 放到顶部

1.为什么要把 CSS 放到顶部?
英文全称:Cascading Style Sheets(层叠样式表),是dom渲染页面的必须要素,假如把css放在底部,在IE下,它禁止了网页内容的顺序显示,IE阻止内容的显示,以免重绘页面元素,在低网速下,用户只能看见空白,在火狐浏览器下,不会阻止页面内容显示,但是css加载后,页面部分元素需要重绘,这就会导致闪烁的问题,所以为了提高浏览器的渲染性能,我们应该把css放在顶部.

7.0把 JS 放到底部

1.为什么要把 js 放到底部?
JavaScript资源放到HTML文档底部可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞HTML DOM解析和CSS渲染的过程。

8.0避免使用 CSS 表达式

css表达式是吧css和javascript关联起来,css表达式不仅在页面显示和缩放会重新计算一次,还有在页面滚动和鼠标移动也会计算,频率非常的高,严重的影响了浏览器性能,影响用户的体验.所以我们应该避免使用或者不用css表达式.

9.0将 CSS 和 JS 放到外部文件中

css和js少的时候可以写在页面内,可以减少页面请求,提升页面渲染速度,如果css或js较多的时候,应该放到外部文件中,这样提高了js或css的复用性,减小页面体积,提高了js和css的可维护性,如果大型项目中,js和css文件比较多的时候,我们可以用缓存来优化,实际项目中根据实际情况灵活变通效果更好.

10.0减少 DNS 查找次数

DNS是什么?
DNS（Domain Name System，域名系统），万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。
然后通过这个域名对应的IP地址找到该域名的网站,整个过程称之为DNS查询,查询就需要时间,如果DNS查询过于频繁,就会影响性能.

11.0精简 CSS 和 JS

减小文件体积,下载速度就提高了,方法有:
1.去除不必要的空白符、格式符、注释符
2.简写方法名、参数名压缩js文件
在正式上线项目前，将jS和css都进行压缩，使线上版本都是轻量级的

12.0避免重定向

简单的来说，就是用户的原始请求被重新转向到了其他请求。
重定向状态码有301和302,301表示永久重定向，302表示临时重定向；
为什么避免使用重定向？增加了请求的往返次数，具体就是增加了一次用户获取新地址的请求；
页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要600毫秒的时间开销，为了保证用户尽快看到页面内容，要尽量避免页面重定向。

13.0移除重复的脚本

重复脚本损伤性能,它有两种方式：不必要的http请求和执行js代码所浪费时间。如果js重复的脚本文件有全局变量累加功能,最终结果会由于重复脚本得到不正确的答案.

14.0配置 ETags

什么是ETag?
ETag，全称为：Entity Tag，意思是实体标签，从名字上看，是对于某种实体的一个标识。它属于HTTP协议的一部分，也就是所有的Web服务器都应该（也确实能）支持这个特性。它的作用是用一个特殊的字符串来标识某个资源的“版本”，客户端（浏览器）来请求的时候，可以比较，如果ETag一致，则表示该资源并没有修改过，客户端（浏览器）可以使用自己缓存的版本。
ETag的作用是什么?
主要能提供对资源的版本标识，以避免无谓的重复下载。这从一定意义上，肯定是有利的，它可以提高性能

15.0使用AJAX 可缓存

什么是AJAX?
Ajax表示异步的JavaScript和XML（Asynchronous JavaScript and XML),ajax的post请求,每次都执行,不被缓存,get请求同一地址不重复执行,可以被缓存.
ajax的get和post的区别?

了解了ajax的get和post的区别后,我们就知道什么时候用get,什么时候用post

16.0尽早刷新输出缓冲(BUFFER)

用户请求页面时，后端服务器通常用200到500ms的时间进行HTML页面组合，在等待数据到达的期间，浏览器是空闲的。
因为涉及php,传送门点击这里

17.0使用 GET 来完成 AJAX 请求

使用XMLHttpRequest时，浏览器中的POST方法发送请求首先发送文件头，然后发送HTTP正文数据。而使用GET时只发送头部，所以在拉取服务端数据时使用GET请求效率更高

18.0 延迟加载

延迟加载(lazy load)是(也称为懒加载)，延迟加载机制是为了避免一些无谓的性能开销而提出来的，所谓延迟加载就是当在真正需要数据的时候，才真正执行数据加载操作。可以简单理解为，只有在使用的时候，才会发出sql语句进行查询。

19.0 预加载

顾名思义，WEB中的预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

Web标准提供了一种DNS预解析技术，因为服务器是知道页面即将会发生哪些请求的，那我们可以在页面顶部，插入 ，让浏览器先解析一下这个域名。那么，后续扫到同域的请求，就可以直接从DNS缓存获取了。

此外，Web标准也提供prefetch，prerender的预加载技术。prefectch会在浏览器空闲的时候，向所提供的链接发起请求，而prerender不仅会请求，还会帮你在后台渲染页面。如果在一个页面中，你知道用户有很大概率去点某个链接，可以尝试把这个链接加到prefetch或prerender，那么用户就会秒开这个页面了。

20.0 减少 DOM 元素个数

一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢,比如我们需要查找某个元素,js代码会遍历页面所有标签,你dom越多,自然遍历时间就长了

21.0 根据域名划分页面内容

把页面内容划分成若干部分来最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间.例如，你可以把用到的HTML内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上.

浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以利用多个域名的主机来存放不同的静态资源，增大页面加载时资源的并行下载数，缩短页面资源加载的时间。通常根据多个域名来分别存储JavaScript、CSS和图片文件。

22.0 尽量减少 iframe 的个数

ifrmae元素可以在父文档中插入一个新的HTML文档。

window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况

尽量使用异步的方式动态添加iframe，因为iframe内资源的下载进程会阻塞父页面静态资源的下载与CSS及HTML DOM的解析。

23.0 避免 404

什么情况下会发生404错误？
404 意味着Not Found，意思是说未找到资源。既然如此，那么至少会有两种原因导致404错误：

1. 该资源按理说是要有，但我们没有提供。用户按照正常的方式来请求，所以资源找不到。
2. 该资源本来就不存在，用户按照不正常的方式来请求，当然还是找不到。
404错误会有什么影响？
一、看不到的影响：有时候，404错误发生了，用户可能根本没有感觉到。

1.如请求favicon.ico文件，或者请求了某个不存在的脚本文件、样式表、图片文件，页面还是会按照正常的方式进行呈现。

2.丢失的脚本文件、样式表、图片文件，会导致页面的某些行为、界面效果出现异常（也可能不是很明显）
最大的问题可能是性能方面的影响。尤其是如果请求一个不存在的脚本文件，因为浏览器在请求脚本文件的时候，即便是返回404，它也会尝试去按照Javascript的方式解析响应中的内容。这无疑会增加很多处理的时间，而因为该文件不存在，所以这些都是无用功。

二、看得到的影响：如果用户请求的某个页面不存在，那么他将收到明确的回应

1.默认情况下，他将收到一个标准的错误页面