关于web前端性能优化总结

1、从DOM结构和标签上来优化


·使用语义化的标签,代码清晰简洁;

·减少Dom节点,增加渲染速度;

·使用W3C标准书写闭合小写的标签;

·给图片和table指定宽高,避免缩放;

·防止src和href值为空,当为空时,浏览器会把当前页面当做属性值重新加载;

·css在头部位置,js在body底部位置;

 

2、从CSS样式上来优化


·使用link加载样式而不是@import(是css2提供的一种方式,不兼容,只能加载css,而且页面所有组件被加载完后才会被加载,完成前会导致‘闪烁’,link属于XHTML标签,没有兼容问题);

·避免使用css表达式;

·避免使用css filter滤镜;

·使用css 缩写 如#fff,减少代码量;

·删除重复的css,css简化;

·使用CSS Sprite把同类图片合成一张,减少图片http请求;

·减少css查询层级,如.header .log 要好于.header .top .log;

·减少css查询范围,如header>div获取直系子元素要好于heade div;

·避免TAG标签与CLASS或ID并存:如a.top、button#submit;


3、从js上来优化


·js尽量少用全局变量;

·多个js变量声明合并;

·不使用eval函数,不安全,性能消耗严重

·使用事件代理绑定事件,如将事件绑定到body上进行代理(利用冒泡原理将事件加到父级上,能够给动态增加的元素进行数据绑定);

·避免频繁的操作DOM节点,使用innerHTML代替

·减少对象查找,如a.data.box1.name的查找方式非常耗性能,尽可能的将它定义在变量里;

·类型转换,把数字转字符串使用var str=‘’+1;浮点数转成整形使用Math.floor()或者Math.round();

·js对字符串进行循环操作,譬如替换、查找应该使用正则表达式;

·删除重复的js

·使用setTimeout来避免页面失去响应

·使用hash-table来优化查找


4、其他方面进行优化

·尽量合并js和css,对js和css进行压缩,可以缩短文件传输时间;

·使用CDN加速

· 减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少 Cookie 的反复传输对主域名的影响;

·为文件头指定Expirs,使内容具有缓存性;

·减少DNS查询,权衡;

·避免在html标签中写style属性


猜你喜欢

转载自blog.csdn.net/zhouzuoluo/article/details/80727456