[转载]高性能web开发

  1. 高性能WEB开发 - HTTP服务器篇
  2. 高性能WEB开发 - 图片篇
  3. 高性能web开发 - 如何加载JS,JS应该放在什么位置?

  4. 高性能WEB开发 - 为什么要减少请求数,如何减少请求数!
  5. 高性能WEB开发(5) - 减少请求,响应的数据量
  6. 高性能WEB开发(6) - web性能测试工具推荐
  7. 高性能WEB开发(7) - JS、CSS的合并、压缩、缓存管理
  8. 高性能WEB开发(8) - 页面呈现、重绘、回流。

总结:

  1. 把所有静态资源(JS,CSS,image,swf)提到单独的服务器,用更加快速的HTTP服务器(Apache,nginx)。
  2. 静态图片采用PNG格式,并使用fireworks处理图片,使用Smush.it压缩图片,合理合并和拆分图片。(使用CSS Sprites合并图片),透明图片处理,多域名下载图片,预加载图片
  3. 嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。如果在加载CSS后定义嵌入JS,会导致CSS阻塞后面内容的加载。
    嵌入JS应该放在什么位置
       1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
       2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
       3、使用defer
       4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用
    P.S.不是绝对的,有些网站把嵌入JS放到CSS前,有的放到CSS后。
  4. 可以通过合并JS和合并CSS文件,合并图片(CSS Sprites),把JS、CSS合并到1个文件,使用Image maps把多个图片合并成1个图片,data嵌入图片把图片进行编码直接嵌入到html中(会增加HTML页面的大小,且图片不能缓存,google视频搜索,ms第一次data,然后懒加载)
  5. 启用gzip压缩的文件( javascript,CSS,HTML,xml,plain text),别乱用cookie(如果路径是/,请求图片的请求也会带上cookie)。如果用AJAX发送一个不需要返回的请求,服务器返回204更好。
  6. Firebug,HttpWatch,DynaTrace's Ajax Edition,Speed Tracer(Chrome),Page Speed,yslow,webpagetest.
  7. 开发环境使用分散的js,css文件,生产环境使用合并的文件,给合并后的文件加上版本号,防止用户IE缓存旧版本的js文件。

  8.  

    我们对DOM树的操作会导致页面回流或者重绘,回流的代价比较高,所以要减少重复的回流或者重绘。
    1.不要1个1个改变元素的样式属性,最好直接改变className,但className是预先定义好的样式,不是动态的,如果你要动态改变一些样式,则使用cssText来改变。

    2.让要操作的元素进行"离线处理"(display:none,新建DIV,documentFragment),处理完后一起更新。

    3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,就先读取到变量中进行缓存,以后用的时候直接读取变量就可以了。(不要频繁读取offsetLeft,style等)

    4.考虑你的操作会影响到render tree中的多少节点以及影响的方式,影响越多,花费肯定就越多

概念解释:

  1. 反向代理【介绍
  2. CSS Sprites【教程】【百度百科
  3. JavaScript defer【Javascript的Defer属性】【JS属性defer的好处】【老帖子的讨论
  4. yuiCompressor合并JS,CSS文件工具。
  5. plain text纯文本
  6. 页面回流重绘:
    1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流,就是在页面第一次加载的时候。
    2. 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。注:从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流。
  7. cssText【JavaEye1】【JavaEye2
  8. 绝对位置的元素要移动需要改动left和top,相对的元素要改变位置要改变marginleft和marginright。
  9. 不唐突的JavaScript的七条准则
posted @ 2010-06-23 10:46  拖拉机大叔  阅读(494)  评论(0编辑  收藏  举报