构建高性能网站,针对前台工程师--总结篇
来源:互联网 发布:领航软件 编辑:程序博客网 时间:2024/06/14 16:03
首先从一次完整的的请求说起:(以此为例get,www,baidu.com)
1,webbrower 发出request,
2,然后解析www.baidu.com为ip,找到ip的服务器,
3,服务器处理请求资源并返回请求的内容,
4,browser接受请求内容过程,(返回内容是按顺序读取的)
4.1遇到外联css,就会并发去读取css内容(),
4.2遇到图片时,回去并发读取图片,目前浏览器的并发数为2,
4.3遇到js时则会阻塞其他请求。
4.4加载完css后,browse开始渲染页面,
4.5直到加载完页面中的文本资源,这时dom的结构已经确定,会出发 document.ready方法
4.6 browse继续加载 图片和js,完成后。页面就全部加载完成,这时会出发 window.onload()方法
来分析一下里面具体的时间开销:
1,从1--4.4 用户才开始看到页面上有内容,在这以前页面就是空白的
2,解析域名也是有一定时间开销的,如果是大机房的可以通过路由配置 dns 缓存,依赖于外部机房环境,可控性比较小。
3,这是服务器处理的时间,优化程序代码可以减少这里的时间
4,
4.1浏览器在接收完css之前,一般是不去渲染dom的,以避免无所谓的刷新和闪烁。所以直到4.4用户才真正在页面上看到内容。
4.2 浏览器的单域名并发访问数 为2,多域名下并发数没限制,可以通过定义域名别名改善
4.3 浏览器加载js时会阻塞其他请求,直到加载完成。改善的话可以把js放到页面下面去加载。
从上面的流程可以分析出以下建议:
1,减少连接数(原因:并发限制,dns开销)
2,将css放到 head中。(1,首先这符合w3c规范,2,应为css加载完后,遇到dom对象时就会直接显示,可以更快的显示页面。)
3,将js放到页面底部,(加载js时会阻塞其他请求,这段时间页面没有反映,如果js中没有write的话应该放到底部,页面渲染完后再加载js)
4,减少下载内容(网络是有速度限制的,内容越少当然加载越快)
针对上面4条建议给出具体做法:
1,使用 css sprite将小图片合并,合并css、js。使用浏览器缓存: cache-control、expires。不使用etag
2、3不用说了,上面已经解释清楚了。
4,采用gzip压缩,可以使用 jsmin 将js精简,使用工具将css,html精简,尽可能缩减图片。
按照 性能黄金法则 说明: 文本内容只占所有时间的10%-20%, 这样做以后 至少能将时间缩小40%-50%。能明显改善用户体验。
这只是一些建议参考,具体的需要你针对自己的网站进行分析,分析工具可以使用firedebug,yslow,(这两个可以集成)
yslow会直接给出你建议。
--------------------------------
1、原则一如果能使页面HTML显示跟后台处理同时进行,这是一个比较好的方式;
比如说将页面上容易显示的部分优先反馈给浏览器,然后再接着继续处理下面的步骤这样比较;
象PHP中在HTML的<head>后可以使用flush()方法,提前将部分信息返回给客户端,通常有CSS、JS等信息;然后可以将JS、CSS打包 压缩 尽量减少HTTP的请求次数。
2、POST请求将执行两步,首先发送信息头,然后才识传送数据;而GET方式只是用一个TCP数据包传递,速度要快一些,如果仅仅是为获得数据而非发送数据给服务器时,使用GET更好。IE中URL的最大长度为2K。
3、后加载组件,确定哪些数据是页面显示时就必须的,确定之后那些不必须就的可以通过JS控制onload来实现延迟加载;如拖动页面元素、或页面排序等的JS可以采取延迟加载;YUI库提供图片延迟加载功能;
4、第一次访问站点比较慢的原因是没有缓存过,之后访问就会直接取缓存的数据。
5、不要滥用table和div,只有当它有确实语义的时候才使用,不要为了换行,格式化,显示效果等原因使用div;
DOM的数据可以在firebug的console中输入document.getElementsByTagName('*').length获得;
页面HTML标签数量理想状态下应控制在700以下。
6、最占响应时间的是客户端组件的请求响应速度,建议将组件从不同域名下载,可达到并发的目的;
HTTP1.1协议建议允许并发下载,IE8支持6个并发请求;但是DNS有查询损耗,域名不要超过2-4个;
7、iframe要尽量少用;
优点:有延迟加载功能,能并发的请求响应;
缺点:即便是个空的html文件在iframe里面,消耗也是相当高的,不利于提高响应速度;而且它会阻止整个页面的onload的响应。
8、应当尽量阻止404没有资源响应的错误,因为它会阻止其他组件的并发,浏览器会一直尽力的去解析404请求的内容。
9、cookie是用于身份认证尤其是个性化等操作,它是在http的请求头中进行交换的,它体积越大,则响应越慢;
每3000字节的cookie在DSL的带宽中会增加80毫秒的响应;
所以除去不必要的cookie,已经使用短小的文件名和尽可能小的减少cookie的大小都有利于改善响应时间;
10、避免使用JS大面积的操作DOM,修改页面布局,这样速度很慢;
11、采用JS时,尽量使用事件委托,就象jquery通过类绑定一样,避免每个按钮都去绑定一个JS,应通过循环来实现绑定;
12、使用<link>标签而不使用IE的@import有利于提高用户体念;
13、优化图片;
14、压缩JS软件 JSMIN
压缩CSS软件 CSSTIDY
- 主题:构建高性能网站,针对前台工程师--总结篇
- 构建高性能网站,针对前台工程师--总结篇
- 构建高性能网站,针对前台工程师--总结篇
- 构建高性能网站
- 高性能网站构建实战
- 【总结】网站性能分析-前台优化
- 如何构建高性能网站(一):简介
- 如何构建高性能的网站
- 《高性能网站构建实战》 目录--转
- 构建高性能网站:前端技术
- 从12306说起,如何构建高并发高性能网站
- 构建高可用高性能网站的建议
- 如何进行网站优化构建高性能网站
- 高性能网站建设指南---前端工程师技能精髓
- 《高性能网站建设指南》总结
- 高性能网站建设指南总结
- 高性能网站建设指南总结
- 构建高性能网站的14条法则:综述
- zoj 2277 The Gate to Freedom
- 常用位操作,写8位 12864串口模式 I2C 1302 18B20
- python-swiftclient api 实例
- Android 学习笔记——利用JNI技术在Android中调用、调试C++代码
- PHP 操作 MongoDB SQL对照表
- 构建高性能网站,针对前台工程师--总结篇
- 【转】eclipse快捷键大全
- 中断解析
- Linux shell脚本的字符串截取
- 快速判断素数
- 企业邮箱引用的js
- php数组不会报错的处理和编码转换的解决
- JavaScript的一些基础语法
- jstl