前端主要指html、css、java三种技术，这三种技术，都有一些优化手段。
html和css部分有很多优化手段，比如用div代替table、慎用iframe、css精灵图等，就不多说了，咱们主要说说java部分的优化手段。
java部分
十万元拥有高颜值双联屏还带6气囊
广告
十万元拥有高颜值双联屏还带6气囊
案例一：
代码1：
var arr = [“a”, “b”, “c”];
for( var i=0; i<arr.length; i++ ){
console.log( arr[i] );
}
上面的代码确实没有问题，能够对数组进行循环，但是，i<arr.length 这个写法将导致性能下降，因为每一次判断时，都需要获取arr的length属性，解决的办法是，提前用变量保存length属性，判断时仅判断变量即可。
代码2：
var arr = [“a”, “b”, “c”];
var len = arr.length;
for( var i=0; i<len; i++ ){
console.log( arr[i] );
}
上面的代码就比第一次的代码性能好很多了，但是它还有优化的空间，那就是var声明变量部分，上面的代码用了3个var，这3个var如果合并成1个，那么性能会更好。
代码3：
var arr = [“a”, “b”, “c”], i=0, len=arr.length;
for( ; i<len; i++ ){
console.log( arr[i] );
}
总结：
1， 对于反复需要获取某一个属性时，我们提前用一个变量接收，比如len=arr.length；
2， 能够合并的代码，可以做合并操作，比如 var声明多个变量；
取平衡点
代码4：
var arr = ["a", "b", "c"], i=-1, len=arr.length-1;
for( ; i++<len; ){
console.log( arr[i] );
}
代码4从性能的角度讲，会比代码3更优；但从语义的角度讲，代码3比代码4优。
选择哪种，需要看具体需求，如果仅仅是这种3次的循环，那就无所谓了，性能都差不多。
案例二：
代码1：
var a=1, b=2, fn=function(){
alert( a+b );
};
上面的代码中，执行fn函数时，会输出a+b的值，如果没有其他程序需要用到a和b，那么变量a和b就不应该写在全局下，而应该写在函数内，写在全局下，页面关闭才会销毁，而写在函数内，函数执行完毕，就会销毁，所以从内存使用的角度，我们可以为此做优化。
代码2：
var fn = function(){
var a=1, b=2;
alert( a+b );
}
如果fn函数仅需要执行1次，之后就再也没有使用场景了，我们可以使用下面的自调用函数。
代码3：
(function(){
var a=1, b=2;
alert(a+b);
})()
总结：尽量减少全局变量，变量用完记得要销毁。
上图为我推荐给大家的一本说，里面写的内容比较详细。
java中可以优化的地方特别多，时间关系，就先讲到这里。
用于来定义一类可以在同一个页面内重复利用的样式。 如比较常用的.clearfix（一般是用于清除浮动），或者自己定义的用于新闻列表的样式，详细的写好链接、列表、边框以及背景等属性，有些人还会习惯把一些常用的属性作为一个类。
querySelectorAll()的作用是：按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合。相关延伸： 在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。 事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。用法：document.querySelectorAll("#test")[0];document.querySelectorAll("div.test>p:first-child")[0];document.querySelectorAll( '.test span' ); 浏览器兼容性： 虽然有些问题，但瑕不掩瑜，这么好用的两个方法咋没火呢？浏览器兼容性。。。其实比起一些HTML5和CSS3的特性来说这两个方法还没那么让人绝望，因为IE8都已经支持了，其它各个主力主流浏览器自然是实现了。IE8+FirefoxChromeSafariOperaAndroid所以如果你是针对Mobile web优化，不要引用jQuery了，直接使用这两个方法就可以。
1.第一从符号上来区分后代选择器：是用空格来分隔开来 例如<h1>一个<span>人</span>的战争</h1> 就是h1 span{}子代选择器：用特殊符号> 例如 h1>span{}
2.第二从用法上区分后代选择器html部分：<ul class="study"> <li>物理 <ul> <li>力学</li> <li>声学</li> <li>电磁学</li> </ul> </li> <li>数学 <ul> <li>微积分</li> <li>概率论</li> <li>博弈论</li> </ul> </li> </ul> css部分//使用子代选择器的效果.study >li{ border:1px solid red;/*只给物理和数学加一个红色方框*/}//使用后代选择器的效果.study li{ border:1px solid red;/*给物理 力学 声学 电磁学 和数学 微积分 概率论博弈论都加一个红色方框*/}这说明子代是他是单传只给物理和数学就断子绝孙，后代是一代传一代。
子代选择器时效果图：
后代选择器时效果图：