【前端优化】

　　　　　　　　　　　　　　如何进行前端优化

（1） 减少http 请求次数：css spirit（多张小图放一个大图上，用定位选择不同小图）,data uri（压缩图片大小），

图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

background: url(图片地址) no-repeat 10px 20px;        
10px 20px代表着横向和纵向坐标。
以容器的左上角为原点，图片向右或向下移动，数值就是正，向左或向上就是负。

（2） JS，CSS 源码压缩
（3） 前端模板JS+数据，减少由于HTML 标签导致的带宽浪费，前端用变量保存AJAX 请求结果，每
次操作本地变量，不用请求，减少请求次数
（4） 用innerHTML 代替DOM 操作，减少DOM 操作次数，优化javascript 性能
（5） 用setTimeout 来避免页面失去响应
（6） 用hash-table 来优化查找
（7） 当需要设置的样式很多时设置className 而不是直接操作style
（8） 少用全局变量
（9） 缓存DOM 节点查找的结果

（10） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（11） 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
（12） 避免在页面的主体布局中使用table，table 要等其中的内容完全下载之后才会显示出来，显
示比div+css 布局慢

（13）图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

（14）网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）

（15）标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

jQuery 中(′.class′)和('div.class') 在IE 8 下哪个效率更高?
这题是关于selector 的性能问题，$(".class")在查找和遍历页面的元素时，会遍历所有带有class 类的元素，不管
是div、p、span 或者是其他元素；而$("div.class")首先会查找出div 元素，然后在所有的div 中查询带有class 类的相
关div，所以在效率方面，当然是div.class 选择器高于.class。
jQuery 选择一个元素最快的方法就是用ID 选择器;
jQuery 中第二快的选择器就是tag 选择器（如$(‘head’)），因为它和直接来自于原生的Javascript 方法
getElementByTagName()。所以最好总是用tag 来修饰class(并且不要忘了就近的ID)

转载于:https://www.cnblogs.com/shenyanran/p/6106466.html