代码改变世界

网站性能优化 --- 雅虎35条军规

2019-05-23 08:02  *奋斗*  阅读(141)  评论(0)    收藏  举报

---【前端】---

1、减少 http 请求数

1）捆绑文件（合并js / css 文件）。webpack做的就挺好；

2）雪碧图(CSS sprites)；

3）Image Maps(将多幅图拼接在一起，利用坐标进行导航)；

4）编码字符串，内嵌到网页中（base64编码）；

2、减少DNS查询次数。最理想的方式，就是所有的资源都放在同一个域下面。这样不太现实，一般建议至少2个域，不多于4个域来提供资源；

3、避免重定向。跳转的时候，用户能做的只有等待。最浪费的重定向经常发生、而且很容易被忽略：URL 末尾应该添加/但未添加。

4、缓存Ajax请求

1）添加Expires 或 Cache-Control报文头，使回复可以被客户端缓存；
2）压缩回复内容；
3）减少 dns 查询；
4）精简 javascript；
5）避免跳转；
6）配置Etags；

5、延迟加载。要执行延迟加载，就需要知道网页最初加载所需要的最小内容集是什么，剩下的内容就可以推到延迟加载的集合中。如果在没有javascript的时候，网页依然可以正常工作，那就可以进行延迟加载。javascript 延迟加载的方式：async、defer、body中后置。

6、预加载。提前加载接下来网页中需要的资源，例如：google 在网页加载完成后，立马去下载一个image sprite。有条件提前加载，例如：雅虎也会根据用户输入，推断要提前加载的内容。

7、减少dom元素数量。

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，document.getElementsByTagName('*').length 可以算出一共有多少个dom元素。

从以下几个角度考虑移除不必要的标记：

是否还在使用表格布局？

塞进去更多的<div>仅为了处理布局问题？也许有更好、更语义化的标记（语义化标记的意义在此啊）。
能通过伪元素实现的功能，就没必要添加额外元素，如清除浮动。

为什么不使用表格布局？

更多的标签，增加文件大小；
不易维护，无法适应响应式设计；
性能考量，默认的表格布局算法会产生大量重绘；

8、划分内容到不同域名。

浏览器对同一个域的下载连接数有所限制，按照域名划分下载内容，可以让浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然dns查询也是个问题。一般网站规划会将静态资源放在类似于static.example.com，动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。后面我们会在cookie的规则中提到。

9、尽量减少iframe的使用。

使用iframe要注意理解iframe的优缺点：

优点---：

可以用来加载速度较慢的内容，例如广告；
安全沙箱保护。浏览器会对iframe中的内容进行安全控制；
脚本可以并行下载；

缺点---：

即使iframe内容为空，也消耗加载时间；
会阻止页面加载；
没有语义；

10、避免404。HTTP请求很昂贵，返回无效的响应（如404未找到）完全没必要，降低用户体验而且毫无益处。 

---【服务器】---

11、使用CDN。利用内容分发网络（cdn）可以显著提高下载速度，CDN通过部署在不同地区的服务器来提高客户的下载速度，我们自己的网站可以先通过免费的CDN供应商来分发网页资源。

12、添加Expires 或 Cache-Control报文头。

1）对于静态内容添加Expires，将静态内容设为永不过期，或者很长时间以后；

2）对于动态内容应用合适的Cache-Control，让浏览器根据条件来发送请求；

13、启用 gzip GZip压缩传输文件。它通常可以减少70%网页内容的大小，包括：脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。Content-Encoding: gzip；

14、配置ETags。Etag简单来说就是是通过一个文件版本标识，使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。但如果跨服务器，就可能存在问题。也有具体的解决方法，url rewrite；

15、尽早 flush 输出。Response.flush() 将现有的缓存中的回复内容，先发给客户端，让客户端有活儿干。Response.flush() 可以执行多次。可以考虑在</head>之后输出一次缓冲，HTML head一般比较容易生成，先发送以便浏览器开始获取<head>里引用的CSS等资源。

16、能用 get ajax 的地方，不用 post ajax。因为 post ajax 时，会先发header，再发送数据。

17、避免空的图片src。如下代码如果存在，尽早处理：

// straight HTML：
<img src="">

// JavaScript：
var img = new Image(); 
img.src = "";

空的href属性也存在类似问题。用户点击空链接时，浏览器也会向服务器发送HTTP请求，可以通过JavaScript阻止空链接的默认的行为。

---【Cookie】---

18、减少 Cookie 大小。

Cookie 被用来做认证或个性化设置，对于它我们要注意以下几点，来提高请求的响应速度：
1）去除没有必要的cookie，如果网页不需要就完全禁掉；
2）将cookie的大小，减到最小；
3）注意cookie设置的domain级别，没有必要的情况下，不要影响sub-domain；
4）设置合适的过期时间，比较长的过期时间可以提高响应速度。

19、静态资源使用无 Cookie 域名。

大多数网站的静态资源都没必要用 cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是，有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。

---【css】---

20、CSS 样式表置顶。

将样式表放在head中，会显示网页加载速度更快。这样对于内容比较多的网页尤其重要。

21、避免 CSS 表达式。CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

22、使用 link 代替 @import。避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

23、避免使用 Filters。IE专有的AlphaImageLoader滤镜问题；

---【javascript】---

24、将 javascript 脚本置底。浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。

1）把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户；
2）现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行；
3）HTML5中新加了async关键字，可以让脚本异步执行；

25、使用外部 javascript 和 css 文件。使用外部Javascript文件和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用（重用是亮点），如果只访问一次，那内联更好。

26、精简 javascript 和 css。就是去掉无关的空格和注释。对于内嵌的CSS和JavaScript，也可以通过htmlmin等工具压缩。

27、去除重复脚本。重复脚本依然浪费时间。

28、减少dom访问。可以这样做：

1）缓存已经访问过的元素；
2）使用DocumentFragment暂存DOM，整理好以后再插入DOM树；
3）操作className，而不是多次读写style；
4）避免使用JavaScript修复布局。

29、减少绑定事件监听的节点，如通过事件委托。尽早处理事件，在DOMContentLoaded即可进行，不用等到load以后。

---【图片】---

30、优化图片。

1）利用 https://imagemagick.org/index.php，检查一下是否有优化空间；

2）尽量 gif 被 png 替代， convert image.gif image.png；

3）png 也有对应的优化工具，https://pmt.sourceforge.io/pngcrush/；

4）jpg 也有对应的优化工具，http://jpegclub.org/jpegtran/；

31、优化 CSS Sprite。

1）Spirite中水平排列图片，垂直排列会增加文件大小；
2）Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
3）不要在Spirite的图像中间留有较大空隙。对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素。

32、不要在html中使用缩放图片。不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。

33、使用小且可缓存的favicon.ico。网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标：存在；文件尽量小，最好小于1k；设置一个长的过期时间。

---【移动端】---

34、移动端尽量保持单个内容小于25kb。

35、打包内容为分段（multipart）文档。

个人统计【2】：2019-05-23、2019-05-24