前端代码优化

html代码优化

　　（1）标签是用户搜索引擎最看重的，它能帮助用户和搜索引擎判断当前页面的主旨和中心思想。一个是关键字（keywords），一个是描述（description）。

　　（2）h1-h6，h标签也是搜索引擎在排名时终点考虑的因素，分别代表不同的级别。

　　（3）语义化标签，特殊含义的标签更容易被搜索。

　　（4）清理垃圾代码。清理那些冗余代码和空格空格代码，代码对齐更利于定位错误。

　　（5）使用简单的标签，例如：两者都是加粗，但是却多处5个字符，这样累积也会产生不少冗余代码。

　　（6）表格，列表等容器尽量少嵌套。这些容器嵌套会导致页面打开速度很慢，降低了用户体验。

　　（7）合理使用友情链接，是网站推广的重要手段。带来网站的流量，提高网站知名度，提高各大搜索引擎对本站的权重。

　　（8）使用DIV+CSS布局，兼容性好，代码量少，加载速度快，且有利于维护。

　　（9）尽量少用无用的图片和flash。

 

css代码优化

　　（1）使用外部样式表。CSS的使用方式很多，行内样式和内部样式都是把CSS写在HTML中，这样导致HTML文档变大，降低网页加载速度。

　　（2）复用css代码。像js一样css也有很多代码可以复用，这样也比较好维护。

　　（3）样式表不建议使用通配符，像*{margin：0；padding：0；}。一方面解析缓慢，效率低。另一方面导致一些不必要的元素重置了外边距和内边距。

　　（4）使用多重选择器，但是也不建议太多层。如h1 p div{background：red}，这样更容易找到，使渲染速度变块。但是太多层也增大了查找时间。

　　（5）适当的注释可以让别人更容易读懂你的代码，可使得结构更加清晰，删掉冗余注释。

　　（6）压缩代码去掉多余的空格和换行。

 

js代码优化

　　（1）减少操作DOM--为什么说js操作DOM很慢

　　（2）代理事件能避免每个元素都进行绑定，可以避免出现内存泄漏的现象及需要动态添加元素的事件绑定问题。

　　不推荐

$('.btn').on('click', function(e){
    console.log(this);
});

　　推荐

$('body').on('click', '.btn', function(e){
    console.log(this);
});

　　（3）click事件有300ms的延时、touchStart，touchEnd或tap响应速度快，提高用户体验。

　　（4）避免touchMove或scroll这类连续事件的处理，设置事件节流。

　　不推荐

$('.scroller').on('touchmove', '.btn', function(e){
    console.log(this);
});

　　推荐

$('.scroller').on('touchmove', '.btn', function(e){
    let self = this;
    setTimeout(function(){
        console.log(self);
    }, 16);
});

　　（5）简化循环终止操作。由于每次循环过程都会计算终止条件，所以浪费了一些性能的。

　　不推荐

varlist=document.getElementsByTagName('p');
for(var i=0;i<list.length;i++){

}

　　推荐

var list=document.getElementsByTagName('p');
for(var i=0,l=list.length;i<l;i++){  

}　

　　（6）避免使用eval和width。

　　（7）使用三目运算符替换条件分支，可以提高效率。

　　（8）使用ES6字符串模板代替+字符串连接符。

　　（9）使用requestAnimationFrame代替setTImeOut和setInterval