文档介绍：Web性能优化-代码目标掌握前端代码性能优化优化选项减少Http请求代码位置优化避免CSSexpressions使用外部样式/脚本代码/页面压缩CSS代码优化JavaScript代码优化减少Http请求图片,css,字体,JavaScript,flash,等等网络文件,都会增加http请求数,减少这些信息的数量能提高Web页面响应时间。图片使用CSSSprites技术Base64图片潜入网页data:URLCSS/JavaScript使用代码压缩技术,减小文件体积。字体选择轻量级字体图标库。Flash推荐使用CSS3动画处理(考虑兼容问题)资源懒加载代用户真正浏览到相关资源时,再加载。代码位置优化CSS样式放在顶部在样式表加载之前页面内容是以没有样式的形式显示出来的,待加载完样式后,页面重绘,内容一闪即改变了样式表现。JavaScript代码放尾部脚本以下的内容被阻止逐渐加载了,因为只有当下载完脚本以后才会下载下面的内容,第二个脚本引起的问题是阻止平行下载。“http/”建议浏览器对一个域名,同一时间下载数不超过2个(按:实际监测发现一般有超过2个),我曾经让ie并行下载100个图片。当脚本正在下载的时候,浏览器不会开始下载任何东西避免CSSexpressions在IE中支持的cssexpressions问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。CSSExpressions的兼容性很差,所以CSSExpressions能不用就不用。使用外部样式/脚本用外部调用文件的方式更快,因为他们是可以被缓存的,如果是内嵌在页面中他们就无法被缓存了!想想如果用户要在你的网站看很多很多的页面,如果都是使用同一个外部脚本和样式,那么他们一旦被缓存,就再也不需要下载了,这样会给你带来很大的潜在好处。浏览器的缓存功能代码/页面压缩JavaScript代码压缩有两个比较流行的工具是用来减小脚本的体积的–pressor。CSS代码压缩Less/pressor程序Gzip支持文件压缩减少网络传输数据量,提高响应速度。 我们以上方法,读者应该适当的选择或配合使用,我们在选择方法的原则是应该以最低的代价来完成客户端的功能CSS代码优化***@import指令***@import就相当于是把<link>标签放在页面的底部,所以从优化性能的角度看,应该尽量避免使用***@import命令避免使用CSSExpressions避免使用FilterIE特有的AlphaImageLoaderfilter是为了解决IE6及以前版本不支持半透明的PNG图片而存在的。但是浏览器在下载filter里面的图片时会“冻结”浏览器,停止渲染页面。同时filter也会增大内存消耗。最不能忍受的是filter样式在每个页面元素(使用到该filter样式)渲染时都会被浏览器分析一次,而不是像一般的背景图片渲染模式:使用过该背景图片的所有元素都是被浏览器一次性渲染的。Background-color:expression((newDate()).getHours()%2?"#B8D4FF":"#F08A00")CSS代码优化CSS缩写CSS缩写可以让你用极少的代码定义一系列样式属性,这种做法可以极大程度的缩减代码量以达到提高性能的目的。例如:c、多重选择器样式CSS选择器(CSSSelectors)浏览器是“从右往左”来分析class的,它的匹配规则是从右向左来进行匹配的。这里,浏览器首先会查找页面上所有的“li”节点,然后再去做进一步的判断:如果它的父节点的id为“toc”,则匹配成功。#tocli{font-weight:bold}