从Web前端优化网站性能
2017-08-05 12:31
435 查看
1. 减少HTTP请求数
一个完整的请求都需要经过DNS存址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。资源上由于每个请求都要携带数据,因此每个请求都需要占用带宽。另外,由于浏览器进行并发请求的请求数是有上限的,因此请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是浏览器的进度条会一直存在。减少HTTP请求数的主要途径包括:
(1)从设计实现层面简化页面
如果你的页面想百度首页那样简单,那么接下来的规则基本上都用不着了。
(2)合理设置HTTP缓存
缓存可以大大减少第二次访问时的请求数,但是如果是F5刷新的话,请求数一样。
怎样才算合理设置?能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头;变化不频繁而又可能会变的资源可以使用Last-M
aa0a
odified来做请求验证。尽可能的让资源能够在缓存中待得更久。
(3)资源合并与压缩
如果可以的话,尽可能的将外部的脚本、样本进行合并,多个合为一个。另外,CSS、JavaScript、Image都可以用相应的工具进行压缩,压缩后往往能省下不少空间。
(4)CSS Sprites
合并CSS图片,减少请求数的有一个好办法。
(5)Inline Images
使用data:URL scheme的方式将图片嵌入到页面或者CSS中,如果不考虑资源管理上的问题,不失为一个好办法。如果是嵌入页面的话换来的是增大页面的体积,而无法利用浏览器缓存。使用在CSS中的图片更为理想一些。
(6)Lazy Load Images
使页面刚加载的时候只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。
2. 将css文件放在head头,JS脚本放在页面信息后面
外链脚本会在加载时阻塞其他资源。
3. 异步执行inline脚本(保证脚本在页面内容后面加载)
inline脚本在执行的时候一样会阻塞并发请求。除此之外,由于浏览器在页面处理方面是单线程的,当inline脚本在页面渲染之前执行时,页面的渲染工作则会被推迟。因此,建议将执行时间较长的inline脚本进行异步执行,例如使用setTimeout或者HTML5中的Web Worker。
4. Lazy Load JavaScript
(1)利用min版JS框架(2)YUI,最初只加载核心模块,其他模块可以等到需要使用的时候才加载。
5. 将CSS放在Head中
使页面在开始渲染之前先加载css资源6. 异步请求callback
7. 减少不必要的HTTP挑转
8. 避免重复的资源请求
9. 合并CSS属性值
如border-style: solid;border-width:1px;
border-color:red;
变成border: 1px solid red;
10. 为文件头指定Expires或者Cache-Control
相关文章推荐
- Web前端性能优化教程05:网站样式和脚本
- 前端性能优化 Web前端应该从哪些方面来优化网站?
- web前端性能优化-高性能网站建设指南学习
- 柯南君:教你如何对待大型网站平台的性能优化? 之 五---web 前端性能优化策略(长篇总结)
- 网站的高性能架构---Web前端性能优化
- 教你如何对待大型网站平台的性能优化? 之 五---web 前端性能优化策略(长篇总结)
- Web前端性能优化(五)网站样式和脚本
- Web前端性能优化教程02:使用内容分发网络
- Web前端性能优化经验分享
- Web前端性能优化——使用Array.prototype.join代替字符串连接
- Web前端性能优化的14条规则
- web.config优化网站性能设置
- 来自Yahoo!的网站前端性能优化建议
- web前端性能优化进阶路
- Web前端性能优化——如何提高页面加载速度
- web前端性能优化
- 如何给网站瘦身?图文并茂的前端性能优化指南