1) HTML部分
- 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发;
- 减少DOM节点:加速页面渲染;
- 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放;
- 防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载;
- 正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div\></div\>的过程;
- 链接为目录或首页的地址后面加”/”,如http://www.5icool.org/;
- 用LINK而不用@import方式导入样式;
- 样式放在页头,JS放在页尾;
- 缩小favicon.ico并缓存;
2) CSS部分
- 避免使用CSS Expressions(CSS表达式):如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
- 避免使用CSS Filter(CSS滤镜);
- 精简压缩CSS代码,减少文件大小;
- CSS Sprites 图片尽量采取聚合技术减少图片请求;
- 减少查询层级:如.header .logo要好过.header .top .logo;
- 减少查询范围:如.header>li要好过.header li;
- 避免TAG标签与CLASS或ID并存:如a.top、button#submit;
3) Javscript部分
- 尽量少用全局变量;
- 使用事件代理绑定事件,如将事件绑定在body上进行代理;
- 避免频繁操作DOM节点;
- 不使用EVAL;
- 减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;
- 类型转换:把数字转换成字符串使用”” + 1,浮点数转换成整型使用Math.floor()或者Math.round();
- 对字符串进行循环操作,譬如替换、查找,应使用正则表达式;
- 精简压缩JS代码,减少文件大小;
- 资源文件按模块进行放置,有利于团队开发
- 类库、媒体使用CDN加速,减轻服务器压力
综合:
(1)减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4)当需要设置的样式很多时设置className而不是直接操作style。
(5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6)避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7)图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8)避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
4)浏览器兼容性
避免使用ES6语法中的箭头函数(=>)IE11不支持此语法,
所有的html 标签的属性都要用单引号或者双引号括起,即我们应该写 <a href=”url”> 而不 是 <a href=url>.