码迷,mamicode.com
首页 > 其他好文 > 详细

前端代码性能优化

时间:2015-07-13 13:33:26      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

 1.display:none;优于visibility:hidden;前者隐藏不占用物理空间,后者会占用。
2.合并margin,padding,border的-top,-left,-right,-bottom的设置,简短简洁。
3.选择器在满足效果的基础上,尽量简单,减少嵌套,查询的消耗。
4.如若值为0,则去掉单位,如border-right:0px;可以写为border-right:0;
5.没有边框,用border:none;优于border;0;
6.在保持代码解耦的前提下,尽量合并重复的代码。
7.background,font的多个属性尽可能缩写。
   如背景颜色,背景图片,背景图片的重复次数及背景图片处于左右上下的位置,背景图片的大小,都可以合在一起写。background:#333 url(images/a.jpg) no-repeat center 50% 50%;
8.用href="javascript:vold(null)"代替原来的href="#",避免空链接点击后重置到页面首端。
9.所有内页指向首页的链接写成<a href="/">不必写全。
10.在 body中,尽量少用图片repeat,且若用,图片宽和高不少于8px,否则加载背景图片时候需要重复的次数会影响性能。
11.图片若小,尽可能使用sprite技术,减少http请求次数。《=200KB图片所需的加载时间基本是差不多的。客户端每显示一张 图片都会向服务器请求一次。所以图片越多,请求次数越多,造成的延迟的可能性就越大。

前端代码性能优化

标签:

原文地址:http://www.cnblogs.com/BaishangBloom/p/4642457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!