您所在位置：主题：快点让你的电脑跑起来吧
mrgalaxy
[专家分：0] 发布于 2009-05-11 09:05:00
网络优化的个人见解
相关资料[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]http://www.now.cn/[/url]
[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]
看了一篇文章：用CSS/JS优化HTML页面加载速度后，我觉得可以将我所知道的一些优化技巧与原则告诉大家，一起分享。
这样，也许你也能够创造出属于你自己的一些优化心得与技巧。
本文是针对网页设计的，不涉及程序以及系统。
一、基于减少HTTP连接数的优化
像刚才这篇文章，就是基于减少并发HTTP连接数的优化。由于IE每次在一个域上并发连接数默认为8个，这意味着超过8个文件的时候，需要等待前8个文件之一传输结束。
我们可以：
1、将图片，尤其是大图片放到另外一个域名中。大站可以用另一个服务器来专门用于图片的传输。对于虚拟主机可以绑定另外一个域名。
这在大网站中很常见。
2、合并CSS和JS文件。以及在可能的时候合并图片。
3、预加载技术。最近很常见的，就是先用js显示缩略图，然后setTimeout延时加载大图片。
二、基于减少体积的优化
减少体积意味着减少带宽，能够很直接地减少硬件与带宽的开支。由于网站每日接待成千上万的访客，就是一个字节的优化也可以带来显著的效果。
1、减小CSS、JS和HTML的体积。
用简写的方法来写CSS。推荐用dreamweaver cs4来写CSS，因为代码提示默认就是简写的。#ffffff可以简写成#fff，margin:上 右 下 左，等等…
删除注释。除了保留版权声明，其他注释可以删除。删除不必要的空格和换行，就像google做的一样。用JS压缩工具来压缩JS。体积上的变化很明显。有的JS压缩工具会导致JS发生错误。推荐用JQuery也使用的压缩工具。很稳定，效果也很好。
推荐DIV+CSS布局，这是老生常谈。然而对于开发速度上效率的降低，可以用研究栅格系统、研究重用方案来解决。
不要滥用div、H1～H6等标签。除了速度，更是SEO上的考虑。
一手良好的div+css不是一夕一朝就能练成的。
2、减小图片的体积
在PS里“储存于WEB和设备所用格式”可以减少不少体积。对于图片质量要求不高的图片，可以储存为gif格式。此外在gif格式下，只要增加一点点损耗就可以带来明显的体积变化。如果用“储存”菜单来保存用于WEB的图片，最好选择索引模式，可以至少减少三分之一的体积。
三、基于运算速度的优化
运算速度更多的是WEB后端的事情，但是并不意味着脱得了前端的干系。
JS运算速度的优化。典型就是循环操作DOM，不要直接操作DOM，而是先createElement到一个变量，在这个变量中增加DOM，然后再附加到文档树上。此外，不要以为内存泄漏只是C++们的事情。JS也会导致内存泄漏。这个话题比较复杂，推荐大伙儿们阅读'ajax in action'。制作一个成熟的ajax应用需要注意的事项全部都有，与后台语言无关。阅读算法的书。可能让一个前端开发师阅读算法的书有些搞笑，但是，有些极端场合还是会出现因为JS执行耗时过多，浏览器要终止JS的运行。
四、其他优化。
可以是基于浏览器的特性、基于用户的体验进行优化。大家可以天马行空地发挥！
IE在加载CSS之前会出现瞬时的无CSS状态的页面。可以通过加入一个空的<script type="text/javascript"></script>来解决。
不要在文档里加入空的js，IE的BUG会导致这样比较慢。
标明图像的高度和宽度，有利于网页在加载过程中结构保持一致。
当一个链接是一个目录的时候，比如svnhost.cn/article，要这样：svnhost.cn/article/，因为没有/，服务器会回应一个301到有/的地址。
实在没有办法优化了？那么还可以基于用户体验进行优化，或者咨询 虽然实质上是增加服务器压力、减慢反应的。但是，用户心理的优化，才是真正的优化！加个loading会让用户感觉等待的时间减少，比优化几个KB实在多了。
[/url]
相关资料[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]http://www.now.cn/[/url]
[img]http://game.ali213.net/images/common/sigline.gif[/img]
[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]http://www.now.cn/[/url]
相关资料[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]http://www.now.cn/[/url]
[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]
看了一篇文章：用CSS/JS优化HTML页面加载速度后，我觉得可以将我所知道的一些优化技巧与原则告诉大家，一起分享。
这样，也许你也能够创造出属于你自己的一些优化心得与技巧。
本文是针对网页设计的，不涉及程序以及系统。
一、基于减少HTTP连接数的优化
像刚才这篇文章，就是基于减少并发HTTP连接数的优化。由于IE每次在一个域上并发连接数默认为8个，这意味着超过8个文件的时候，需要等待前8个文件之一传输结束。
我们可以：
1、将图片，尤其是大图片放到另外一个域名中。大站可以用另一个服务器来专门用于图片的传输。对于虚拟主机可以绑定另外一个域名。
这在大网站中很常见。
2、合并CSS和JS文件。以及在可能的时候合并图片。
3、预加载技术。最近很常见的，就是先用js显示缩略图，然后setTimeout延时加载大图片。
二、基于减少体积的优化
减少体积意味着减少带宽，能够很直接地减少硬件与带宽的开支。由于网站每日接待成千上万的访客，就是一个字节的优化也可以带来显著的效果。
1、减小CSS、JS和HTML的体积。
用简写的方法来写CSS。推荐用dreamweaver cs4来写CSS，因为代码提示默认就是简写的。#ffffff可以简写成#fff，margin:上 右 下 左，等等…
删除注释。除了保留版权声明，其他注释可以删除。删除不必要的空格和换行，就像google做的一样。用JS压缩工具来压缩JS。体积上的变化很明显。有的JS压缩工具会导致JS发生错误。推荐用JQuery也使用的压缩工具。很稳定，效果也很好。
推荐DIV+CSS布局，这是老生常谈。然而对于开发速度上效率的降低，可以用研究栅格系统、研究重用方案来解决。
不要滥用div、H1～H6等标签。除了速度，更是SEO上的考虑。
一手良好的div+css不是一夕一朝就能练成的。
2、减小图片的体积
在PS里“储存于WEB和设备所用格式”可以减少不少体积。对于图片质量要求不高的图片，可以储存为gif格式。此外在gif格式下，只要增加一点点损耗就可以带来明显的体积变化。如果用“储存”菜单来保存用于WEB的图片，最好选择索引模式，可以至少减少三分之一的体积。
三、基于运算速度的优化
运算速度更多的是WEB后端的事情，但是并不意味着脱得了前端的干系。
JS运算速度的优化。典型就是循环操作DOM，不要直接操作DOM，而是先createElement到一个变量，在这个变量中增加DOM，然后再附加到文档树上。此外，不要以为内存泄漏只是C++们的事情。JS也会导致内存泄漏。这个话题比较复杂，推荐大伙儿们阅读'ajax in action'。制作一个成熟的ajax应用需要注意的事项全部都有，与后台语言无关。阅读算法的书。可能让一个前端开发师阅读算法的书有些搞笑，但是，有些极端场合还是会出现因为JS执行耗时过多，浏览器要终止JS的运行。
四、其他优化。
可以是基于浏览器的特性、基于用户的体验进行优化。大家可以天马行空地发挥！
IE在加载CSS之前会出现瞬时的无CSS状态的页面。可以通过加入一个空的<script type="text/javascript"></script>来解决。
不要在文档里加入空的js，IE的BUG会导致这样比较慢。
标明图像的高度和宽度，有利于网页在加载过程中结构保持一致。
当一个链接是一个目录的时候，比如svnhost.cn/article，要这样：svnhost.cn/article/，因为没有/，服务器会回应一个301到有/的地址。
实在没有办法优化了？那么还可以基于用户体验进行优化，或者咨询 虽然实质上是增加服务器压力、减慢反应的。但是，用户心理的优化，才是真正的优化！加个loading会让用户感觉等待的时间减少，比优化几个KB实在多了。
[/url]
相关资料[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]http://www.now.cn/[/url]
[img]http://game.ali213.net/images/common/sigline.gif[/img]
[url=http://www.now.cn/indexr.php?r=!bbsmrgalaxy]http://www.now.cn/[/url]