WEB前台的优化规则
来源:互联网 发布:淘宝插件哪个好用 编辑:程序博客网 时间:2024/06/05 15:26
一、尽量减少 HTTP 请求
有几种常见的方法能切实减少 HTTP 请求:
1、 合并脚本跟样式文件,如可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个。
2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。
二、使用浏览器缓存
在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。
根据服务器端的响应header,一个文件对浏览器而言,有几级不同的缓存状态。
1、服务器端告诉浏览器不要缓存此文件,每次都到服务器上更新文件。
2、服务器端没有给浏览器任何指示。
3、在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据。
4、服务器强制要求浏览器缓存文件,并设置了过期时间。在缓存未到期之前,浏览器将直接使用本地缓存文件,不会与服务器端产生任何通信。
我们要做的是尽量强制浏览器到第四种状态,特别是对于JS、CSS、图片等变动较少的文件。
三、使用压缩组件
IE和Firefox浏览器都支持客户端GZIP,传输之前,先使用GZIP压缩再传输给客户端,客户端接收之后由浏览器解压,这样虽然稍微占用了一些服务器和客户端的CPU,但是换来的是更高的带宽利用率。对于纯文本来讲,压缩率是相当可观的。如果每个用户节约50%的带宽,那么租用来的那点带宽就可以服务多一倍的客户,并且缩短了数据的传输时间。
四、图片、JS的预载入
预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象,然后将需要载入的图像的 URL 作为参数传入。
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
可以在登录页面预载入JS和图片
五、将脚本放在底部
脚本放在顶部带来的问题,
1、 使用脚本时,对于位于脚本以下的内容,逐步呈现将被阻塞
2、 在下载脚本时会阻塞并行下载
放在底部可能会出现JS错误问题,当脚本没加载进来,用户就触发脚本事件。
要综合考虑情况。
六、将样式文件放在页面顶部
如果样式表任在加载,构建呈现树就是一种浪费,样式文件放在页面底部可能会出现两种情况:
1、 白屏
2、 无样式内容的闪烁
七、使用外部的JS和CSS
将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。
八、切分组件到多个域
主要的目的是提高页面组件并行下载能力。但不要跨太多域名,建议采用2个子域名。
九、精简JS
可以做到两个级别
1、精简:从代码中移除不必要的字符以减少其大小,
2、混淆:在精简的同时,还会改写代码,函数、变量名被转换成更短的字符串
可以使用ShrinkSafe来精简JS http://shrinksafe.dojotoolkit.org/
十、精简CSS
从代码中移除不必要的字符以减少其大小,
可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /
十一、 精简图片、Flash
对大图片、Flash,要在效果和大小之间做出平衡。
- WEB前台的优化规则
- WEB前端的优化规则
- WEB前端的优化规则
- Web性能优化规则
- web前台的学习
- WEB前端性能优化规则
- Web前端优化常用规则
- Web前端性能优化的14条规则
- Web前端性能优化的14条规则
- 基本的优化规则
- 前端优化的规则
- web前台
- yahoo 总结的网页优化规则--Best Practices for Speeding Up Your Web Site
- Web services(web API) 性能优化基本规则
- DB2 优化的几个规则
- Oracle SQL的优化规则
- Oracle SQL的优化规则
- Oracle SQL的优化规则
- Intellij Idea gradle Android depends Setting
- java 使用相对路径读取文件File(类构造方法)
- 6-0. 混合类型数据格式化输入
- vim插件使用记录
- .htaccess HTTP访问跳转至HTTPS
- WEB前台的优化规则
- 在UIWebView中自定义显示选中文字的编辑菜单项
- 6-1. 简单计算器
- ios按钮点击后翻转效果
- 源码网站收藏
- 谷歌浏览器网页翻译失败解决方法
- ruby on rails错误undefined method `title' for nil:NilClass
- 6-2. 字符串字母大小写转换
- JAX-WS注解