前言

本文档为网酷前端规范系列，主要介绍前端性能优化点

一、HTTP优化

1. 减少HTTP请求

• 合并文件，例如css代码和js代码分别合并到一个css文件和js文件中;
• 使用css sprite，详细请参考css优化中的css sprite部分。
• 使用base64技术

2. 重定向优化

• 消除没必要的跳转
• 利用服务器重写用户键入的链接
• 使用HTTP而不是js或者meta来重定向

3. 避免死链/空链/404/410错误

• 避免出现404 Not Found错误
• 避免出现图片请求空链接（img.src=””）

4. 尽早flush buffer

尽早的使用flush buffer可以让一部分内容先加载出来，提高用户体验。

5. http中的character设置

指定content-type和正确的character编码

二、缓存优化

1. 浏览器缓存

• 添加 Expires 或 Cache-Control 头

1. 对于静态资源：通过设置一个很远的过期时间来实现“从不过期”
2. 对于动态资源：用一个适当的 Cache-Control 头来帮助浏览器控制请求浏览器利用缓存来减少http请求的数目和大小，让页面加载的更快。web服务器利用http响应中的Expires头来告诉客户端一个资源能够被缓存多久。需要注意的是，如果你利用了一个“不过期”的Expires头，你必须在资源改变的同时改变资源的名字。这一技术提高页面性能是基于用户已经访问过你的网站的基础之上的。
3. 设置Last-Modified日期为最近资源需要改变的时间。

• 对动态可用缓存使用“身份识别”

通过链接到资源的唯一url（每次改变资源时同时改变其文件名）来改变缓存

• 为IE设置Vary的header

• 避免firefox中URL造成的缓存冲突

firefox通过hash表存储url的缓存，但hash值仅仅有8个字符，可能会造成hash冲突，所以你需要确保你的资源urldiff多于8字符边界。

2. 代理服务器(静态资源服务器)缓存

利用Cache-control：public的头可以让资源缓存在一个web代理服务器上面来让其他用户使用。

• 不要在静态资源的url上面添加查询字符串
• 不用在代理服务器上缓存设置了cookie的资源
• 要有使用代理缓存js和css文件的意识

三、DNS

1. 减小DNS解析

• 固定URL提供资源
• 尽可能的使用URL路径来代替主机域名，例如developer.example.com可以被www.example.com/developer代替。除非有技术上的原因需要不同的主机域名。
• 将从同一主机域名下的需要先加载的js文件作为主要文件送达
• 考虑使用DNS预解析

2. 增加静态资源域名

实现多个资源的并行下载

四、服务器负载优化

1. 使用CND

CDN可以帮助用户更快的获取到所需要的资源。

2. Cookie优化

• 使用服务器端的存储为大多数的cookie来做有效载荷：在cookie里存key，在服务器端存value。
• 移除没有用的或者重复的cookie
• 静态资源请求中不要带上cookie
• 不要将需要提前加载的js放到没有cookie的域中加载

3. 使用Gzip

Gzip是当前最流行，最有效的压缩方式

• 在http/1.1中，web客户端明确支持在http请求中 Accept-Encoding 头 的 Accept-Encoding: gzip, deflate 压缩方式
• Gzip一般能减少服务器响应文件70%的大小，90%的浏览器都支持gzip
• 服务器基于文件类型来选择gzip压缩，很多网站gzip他们的html文件，同样也可以gzip脚本和样式表
• 事实上，任何的响应文本，包括xml和json都有压缩的价值，图片和pdf文件不应该被gizp，因为他们已经被压缩过了

4. 压缩文件

压缩包括：Javascript、CSS、HTML

让你写的页面能够更有效的压缩：

• 按照字母排序指定css键对值
• 按照字母排序指定html属性
• 对html属性使用一致的引号
• 使用一致的字母（小写字母）
• 移除没有用到的css

五、CSS相关优化

1. 样式表合并放头部

• 将样式表移到文件的Head可以让页面加载的更快，这是因为将样式表放在头部有利于页面渲染。
• 将样式表放在底部的问题是它阻止了许多浏览器的渲染进度。这些浏览器会锁定渲染进程来保证页面上的元素在他们的样式改变时重绘。

2. css编码要点

具体参看性能相关编码规范中的css编码规范

3. 使用css Sprite

• 将图片水平放置在sprite中可以让文件大小更小。
• 对一起加载的图片使用sprite
• GIF和PNG图片优先使用sprite
• 小图片优先sprite
• 可缓存的图片使用sprite
• 使用sprite工具
• 尽量减少sprite图片中的空白空间
• 将色彩范围相近的图片进行sprite

4. 外联css

利用浏览器缓存，将一些公共的css进行外链，使用缓存，加快用户第一次以后访问页面的速度

六、Javascript相关优化

1. js文件放底部

这一问题的原因是脚本是并行阻塞下载的。HTTP/1.1协议中建议浏览器不在同一域名下并行下载多于两个的资源。假如你的图片是在多个域名下的，你可以并行下载超过两张的图片。可是一个脚本在下载的时候，浏览器不能再开始其他的下载，即使在不同的域名下。

一个可供采纳的建议是利用延迟加载脚本技术（defer）。这是一种可以让浏览器继续渲染的方案。不幸的是，fireforx不支持defer属性。

2. js代码去重

• 将重复的js代码去掉
• 将没有使用过的变量去掉
• 将没有调用到的函数去掉

3. 无阻塞下载脚本

几种下载外部脚本且不被阻塞的技术

• XHR Eval：通过XMLHttpRequest从服务器端获取脚本，响应完成时通过eval执行内容。缺陷：不能跨域。
• XHR 注入：通过XMLHttpRequest从服务器端获取脚本，响应完成时通过创建script元素注入其中执行内容。缺陷：不能跨域。
• Script in Iframe：通过iframe的src属性加载脚本。
• Script DOM Element：通过创建script标签元素来加载脚本。
• Script Defer：IE特有
• document.write Script Tag：通过把script标签代码用write方法放到页面中加载脚本。

4. 外联js和行内js

• 将外联脚本放在外联样式表之后
• 将行内脚本放在其他资源之后

5. js编码要点

详细请参看前端性能优化相关编码规范：js编码规范

七、图片相关优化

• 图片压缩：在条件允许的情况下尽量使用PNG8格式
• 图片合并：详见CSS sprite
• 图片缩放：服务器端进行图片缩放

八、其他优化

• 减少页面DOM元素
• 延迟加载和预加载资源
• 将Get作为Ajax请求的方法
• 尽量不要使用iframe

九、相关文档

• 网酷前端JS规范文档
• 前端性能优化点
• 前端性能优化相关编码规范

声明：本文禁止转载、传播，供网酷参考使用