网页优化,高性能网页开发守则
日期：2014-05-17 浏览次数：20767 次
网页优化,高性能网页开发规则
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
9、cookie是用于身份认证尤其是个性化等操作，它是在http的请求头中进行交换的，它体积越大，则响应越慢；
每3000字节的cookie在DSL的带宽中会增加80毫秒的响应；
IE6,IE7 每个cookie好像就支持到4096byte，所以就全用上了，影响也就不到0.1秒，代价还是可以接受的。
参考：
http://support.microsoft.com/?scid=kb%3Ben-us%3B306070&x=9&y=17
http://support.microsoft.com/?scid=kb%3Ben-us%3B941495&x=11&y=3
不要滥用table和div，只有当它有确实语义的时候才使用，不要为了换行，格式化，显示效果等原因使用div
应该是不要增加不必要的element，有些显示效果的场合还是要用到div的。
呵呵，谢谢这位大虾了，暂时收下，握手～～
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
1 楼
fogtower
2010-04-16
lison5566 写道
9、cookie是用于身份认证尤其是个性化等操作，它是在http的请求头中进行交换的，它体积越大，则响应越慢；
每3000字节的cookie在DSL的带宽中会增加80毫秒的响应；
IE6,IE7 每个cookie好像就支持到4096byte，所以就全用上了，影响也就不到0.1秒，代价还是可以接受的。
参考：
http://support.microsoft.com/?scid=kb%3Ben-us%3B306070&x=9&y=17
http://support.microsoft.com/?scid=kb%3Ben-us%3B941495&x=11&y=3
lison5566 写道
不要滥用table和div，只有当它有确实语义的时候才使用，不要为了换行，格式化，显示效果等原因使用div
应该是不要增加不必要的element，有些显示效果的场合还是要用到div的。
2 楼
fishswing
2010-04-17
学习了，看了才知道原来自己写的页面一点优化技术都没用到，惭愧！
3 楼
fxyc
2010-04-17
我之前一直注重数据库查询优化，没有想到HTML这里也可以，算是开眼界了。
4 楼
fireflyman
2010-04-17
还不如上传电子书
5 楼
ronartest
2010-04-17
开发成本 够加一台服务器了
6 楼
fuzao
2010-04-17
学习了,感谢
7 楼
andey007518
2010-04-17
fireflyman 写道
还不如上传电子书
呵呵，谢谢这位大虾了，暂时收下，握手～～
8 楼
EldonReturn
2010-04-17
感觉这个是从美工CSS过来的Web前端开发人员的建议。
从服务器端过来的开发人员就不会这么建议了。他们更看重js组织的优雅和算法的高效。
从服务器端过来的开发人员就不会这么建议了。他们更看重js组织的优雅和算法的高效。
9 楼
even713
2010-04-17
嗯，不管怎样，都是不错的建议，作为参考吧。
10 楼
風一樣的男子
2010-04-18
在国内做电子政务的根本不管性能
11 楼
pxyan520
2010-04-18
以前做项目页面这块优化确实没去多想。呵呵。有机会还是会看看。先收下了，谢谢LZ
12 楼
flasheep
2010-04-19
JS这样用要小心内存泄露啊
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
