[转载]高性能WEB开发

最新推荐文章于 2024-08-09 07:53:13 发布

iteye_14067

最新推荐文章于 2024-08-09 07:53:13 发布

阅读量206

点赞数

分类专栏： Web 文章标签： Web CSS JavaScript Ajax Chrome ViewUI

本文链接：https://blog.csdn.net/iteye_14067/article/details/81859742

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

总结:

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

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

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

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

概念解释：

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