网站优化总结

• 加载优化

加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点

• 减少HTTP请求

a）合并CSS、JavaScript

b）合并小图片，使用雪碧图(CSS SPRITE)

• 缓存

使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）

a） 缓存一切可缓存的资源

b） 使用长Cache（使用时间戳更新Cache，例如更新了CSS文件，要将网页中引入的style.css改为style.css?              version=1.1）

c） 使用外联式引用CSS、JavaScript

e)配置缓存，建立一个.htaccess文件放到网站根目录，内容如下：

RewriteEngine on
ExpiresActive On 
ExpiresDefault A604800
ExpiresByType text/css "access plus 2 month"
ExpiresByType application/x-javascript M1200
ExpiresByType text/html M600
ExpiresByType image/gif "access plus 2 month"
ExpiresByType image/jpeg "access plus 2 month"
ExpiresByType image/png "access plus 2 month"
ExpiresByType image/x-icon "access plus 2 month"
ExpiresByType application/x-shockwave-flash A2592000
AddOutputFilter DEFLATE html xml php js css
FileETag none

• 压缩HTML、CSS、JavaScript

减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设       置GZip。

a） 压缩（例如，多余的空格、换行符和缩进）

b） 启用GZip

• 无阻塞

写在HTML头部的JavaScript（无异步,即<script async>格式），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面       头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载。

• 预加载

大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失。

对用户行为分析，可以在当前页加载下一页资源，提升速度。

a） 可感知Loading(如进入空间游戏的Loading）

b） 不可感知的Loading（如提前加载下一页）

• 压缩图片

图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小）

PS：过度压缩图片大小影响图片显示效果

a） 设置固定宽高

d） 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF）

脚本执行优化

脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意：

CSS写在头部，JavaScript写在尾部或异步。

避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。

尽量避免重设图片大小。

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

• CSS优化

尽量避免写在HTML标签中写Style属性

• 避免CSS表达式

CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。

• 移除空的CSS规则

空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则。

• 正确使用Display的属性

Display属性会影响页面的渲染，因此请合理使用。

a） display:inline后不应该再使用width、height、margin、padding以及float

b） display:inline-block后不应该再使用float

c） display:block后不应该再使用vertical-align

d） display:table-*后不应该再使用margin或者float

• 不滥用Float

Float在渲染时计算量比较大，尽量减少使用。

• 不声明过多的Font-size

过多的Font-size引发CSS树的效率。

• 值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位。

• 网站图片尽量使用GIF格式

  GIF格式图片占用空间小，例如我的博客的插图，JPG格式的图片一般在10-50K之间，而GIF格式图片一般都是10K以下。