[转载]高性能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的七条准则