标签:
根据web访问流程的各个阶段进行总结:
1. 浏览器缓存 2.查询DNS 3.建立连接 4.发送请求 5.等待响应 6.接收数据 7.处理元素 8.渲染元素
1. 浏览器缓存
查询cache: 读取cache或发送304请求。
应用于不经常变化的组件,包括脚本、样式表、Flash组件、图片
Expires和Cache-Control
2. 查询DNS
1. DNS缓存 浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存(TTL)
当缓存时间长时:减少DNS的重复查找,节省时间
当缓存时间短时:及时检测网站服务器的变化,保证正确性
2. 减少DNS查找
当客户端的DNS缓存为空时,DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。较少的域名来减少DNS查找(2-4个主机)
3.建立连接
3.1 使用内容分发网络CDN
在离用户最近的地方放置一台性能好链接顺畅的副本服务器,让用户能够以最近的距离,最快的速度获取内容。
3.2 用域名划分页面内容
按页面内容划分域名,在合适的资源服务器上存放文件
4.发送请求
4.1 减少HTTP请求
合并文件:图片(CSS Spirite),css文件合并,js文件合并
4.2 避免404错误
4.3 不要使用frameset,少使用过iframe
搜索引擎不友好、即时内容为空,加载也需要时间、会阻止页面加载
禁止使用iframe引入外部资源,不包括allyes广告,不包括about:blank的空页面。
5.等待响应
5.1 避免重定向(多一次请求就多费时间)
重定向:原始请求被重新转向到了其它请求
6.接收数据(针对上线版本)
6.1 压缩组件
HTML文档,脚本和样式表,XML和JSON的文本响应,压缩
6.2 最小化css和js文件
去除不必要的空白符,格式符,注释符
简写方法名,参数名,压缩js脚本
尽可能使用外部Js和Css,因为我们目前大部分Js和Css都做了Gzip和缓存技术,可以充分利用。
使用外部文件优点: 提高复用性和可维护性,减小页面体积,
写在页面内有点:较少页面请求,提升页面渲染速度。
写在页面内情况:只应用于一个页面,页面不经常被访问到,脚本和样式很少。
6.4 尽量缩减页面大小
页面必须小于150k(不含图片)
静态文件是否gzip,图片是否压缩优化过。
7. 处理元素
不要对image和pdf等二进制文件进行gzip压缩
8.渲染元素
8.1 CSS样式表文件放在页面顶部
8.2 js脚本文件放在页面底部
8.3 优化图片
尽量使用png/gif格式的图片,png的图片优先,但是必须注意如要兼容IE6,则png使用一定要注意透明问题。
图片在上次前一定要先用工具压缩优化(png、jpg)
8.4 移出重复脚本
8.5 避免回流:
1.复杂的表现变化,如动画,让它脱离文档流,用绝对定位或 fixed 定位来完成。脱离文档流后不会造成任何回流。
2.避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 CPU。
2. 以下这些属性,只要是改动了他们的值,就会造成回流,建议将他们合并到一起操作,可以减少回流的次数。这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight;scrollTop、scrollLeft、scrollWidth、scrollHeight;clientTop、clientLeft、clientWidth、clientHeight;getComputedStyle() 、currentStyle()。
3. Javascript控制样式的最优解,不要直接修改具体CSS样式,通过编码class来改变样式,
8.4 避免CSS Expressions(表达式) 影响浏览器渲染时间
其它注意:
在页面中某些区域并不是用户重点关注的区域,例如页面的广告,一些统计信息等,此类内容可以等待页面关键区域加载后通过javascript代码动态加载和显示。
iframe有两个缺点:1,iframe会阻塞主页面的Onload事件;2,iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。
如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
标签:
原文地址:http://www.cnblogs.com/Peng2014/p/4725902.html