减少HTTP请求
图片地图:图片上的不同位置对应于不用的Url,<map>,可以使用字体icon啊,只有一个请求,哈哈
CSS Sprites: 这个就不说了
内联图片:base64,完全没有请求,哈哈
合并脚本和样式表:大小和请求之间需要平衡使用内容发布网络(Content Delivery Network),也就是cdn
添加Expires头(也是为了减少http请求),脚本,样式表都可以
Expires: 有效期(有效期之前都是有效的,这样就可以不用再次发送请求了)
Cache-Control: max-age=1231434 (缓存多久)压缩组件(脚本和样式表)
请求中:Accept-Encoding: gzip,deflate
响应中: Content-Encoding: gzip将样式表放在顶部
将样式表放在页面底部会阻碍页面逐步呈现
解决方案:使用link将样式表放在head中将脚本放在底部
原因:脚本阻塞了并行下载,因为脚本中可能会改变页面的内容,为了确保页面能够恰当的布局,所以浏览器会等待,另一个原因是,脚本之间可能会有依赖,阻塞并行下载为了保证脚本能够按照正确的顺序执行
解决方案:将脚本放在页面越靠下的地方,意味着越多的内容能够逐步呈现,所以将脚本放在底部避免css表达式
问题:CSS属性中可使用js表达式,属性值为计算后的结果,其问题在于对其进行的求值的频率比人们期望的要高,随便简单的操作,表达式会执行上千次,很有可能造成终止进程,IE下就很容易卡死使用外部JS和CSS
虽然使用内联的js和css可以减少http请求,但是外部文件是有机会被浏览器缓存的,同时可以被别的页面使用,所以增加的一点请求也是可以接受的
主页解决方案:加载后下载写一个页面可缓存的资源(document.onload)减少DNS查找
解决方案:通过使用keep-alive和较少的域名来减少DNS查找精简JS
上线的时候,删除注释,空白,空行等jsMin,混淆会将变量字符串缩小,但是有可能会产生问题,所以推荐使用精简,不使用混淆避免重定向
304并不是真的重定向,避免下载已经缓存的资源,主要是301,302,301的时候,浏览器会跳到location中给出的URL
URL结尾跟上/移除重复脚本
配置或移除ETag
和 if-Modified-Since类似(每个响应都会有last-Modified),判断修改的日期是否匹配,匹配的话304
ETag相当于当前版本的id,也会去比较是否匹配使ajax可缓存 ,应具有长久的Expires头
性能优化
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 规则01:尽量减少HTTP请求 前端优化的黄金准则指导着前端页面的优化策略:只有10%-20%的最终用户响应时间花...