移动端性能陷阱和硬件加速
1.尽可能减少http请求
80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。
减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法。
合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的,当然,也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话,合并文件就是一项比较麻烦的工作了,但把这个作为站点发布过程的一部分确实可以提高响应时间。
CSS Sprites 是减少图片请求数量的首选方式。把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。
图像映射可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用,比如导航条。给image map设置坐标的过程既无聊又容易出错,用image map来做导航也不容易,所以不推荐用这种方式。
行内图片(Base64编码)用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小,把行内图片放在(缓存的)样式表中是个好办法,而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。
减少页面的HTTP请求数是个起点,这是提升站点首次访问速度的重要指导原则。
使用CDN(内容分发网络)(其实就是靠钱)
3.添加Expire/Cache-Control头
Http头介绍:Expires,Cache-Control,Last-Modified,ETag
4.启用Gzip压缩
5.将css放在页面最上面
6.将script放在页面最下面
避免在CSS中使用Expressions
把JavaScript和CSS都放到外部文件中
减少DNS查询
压缩 JavaScript 和 CSS
避免重定向
移除重复的脚本
配置实体标签(ETag)
使 AJAX 缓存
工具:
YSlow插件
百度统计
参考文献:
未经允许不得转载:前端资源网 - w3h5 » web前端优化,减少http请求,提高页面加载速度