前端性能优化
2015-08-25 21:13
204 查看
规则1-减少HTTP请求
a.图片地图-一个图片关联多个URLb.CSS Sprites
c.内联图片
d.合并脚本和样式表
规则2-使用CDN
CDN用于发布静态内容,如图片,脚本,样式表和flash等。规则3-添加Expires头
Expires是添加一个未来的时间点,而max-age则表示要持续的时间段,设置它的首部Cache-Control:max-age=3600000。两者若同时出现max-age将重写Expires。另外,Apache的mod_expires模块可以将Expires设置为加上一个时间段后的时间。更新:更改文件名
规则4-压缩组件
图片和pdf已经是被压缩过的,最好不要再压缩服务器中添加Vary:Accept-Encoding头,以驱使代理执行正确的操作,即向支持压缩的浏览器发送经过压缩的内容,向不支持压缩的浏览器发送未压缩的内容。
规则5-将样式表放在顶部
在web中html页面就是进度显示器规则6-将脚本放在底部
-脚本会阻塞对其后面内容的呈现(脚本下载时,页面会停止渲染)-脚本会阻塞对其后面组件的下载(脚本下载时会阻止其他下载,并行下载被禁用,即使使用了不同的主机名)
规则7-避免CSS表达式
替代:使用一次性CSS表达式或使用事件监听规则8-使用外部JS和CSS
页面查看次数少的网站使用内联会更快些针对访问次数多的使用外部JS和CSS可以缓存并且可以组件重用
动态内联:借助cookie,若不存在cookie则说明很可能是第一次访问,此时使用内联(当页面下载完后,服务器添加js在页面动态下载外部文件并设置cookie);若存在cookie则尝试使用缓存
规则9-减少DNS查找
DNS缓存:浏览器缓存,用户计算机缓存,局域网缓存,ISP缓存等TTL:Time-to-live,由服务器设置(RFC建议设置为一天,顶级网站可能要短一些,因为要考虑的快速故障转移,方便更新)
操作系统缓存会考虑ttl,但是浏览器通常会忽略,并设置自己的时间。此外,keep-live特性会覆盖ttl和浏览器设置的时间。浏览器对缓存的DNS有数目限制。
规则10-精简JS
混淆:缩短变量名,去掉注释和空白符精简:去掉注释和空白符
规则11-避免重定向
301-永久转移302-暂时转移
304-Not Modified使用缓存
规则12-移除重复脚本
重复脚本损失性能的原因:不必要的http请求和执行js浪费的时间规则13-配置或移除ETag
ETag:实体标签,是web服务器和浏览器用于确认缓存组件有效性的一种机制。它是唯一标示一个组件的一个特定版本的字符串。其唯一约束是字符串必须用引号包着。
规则14-使Ajax可缓存
关于HTTP一些首部的补充
概念 | 浏览器 | 服务器 | 备注 |
---|---|---|---|
压缩 | Accept-Encoding | Content-Encoding | |
条件请求GET | If-Modified-Since | Last-Modified | 仍需发送请求去验证 |
Expires | Expires | 通常在第一次请求时由服务器端返回。只要没过期,浏览器就会使用缓存而不会发送请求 | |
Keep-Live | Connection | Connection | 一般浏览器都是默认开启的,要关闭需要任何一端显式Connection:close。HTTP 1.1中定义的管道可以在一个单独的socket上发送多个请求而无需等待响应。性能优于keep-live |
相关文章推荐
- bootstrap-js(六)弹出框
- html5 触摸事件
- 剑指offer 算法 (时间空间效率的平衡)
- JavaScript设计模式学习笔记
- bootstrap-datepicker.js日期控件的改变,就一点,不要吐槽
- jQuery UI 学习笔记
- [Angular 2] 8. Better ES5 Code
- fedora22安装多媒体插件
- web前端html+css常用布局04
- web前端html+css常用布局03
- web前端html+css常用布局02
- jsp中获取url里中文参数,显示乱码的解决方案
- web前端html+css常用布局01
- 转-JQuery选择器及radio,checkbox,select取值和反选
- bootstrap-js(5)工具提示tooltip
- js字符串转成数字的三种方法
- Js操作Select
- Javascript字符串加密
- html中鼠标点击展开关闭层效果
- HTML5实现扫描识别二维码/生成二维码