高效抒写CSS&Js优化

css优化

css渲染机制（右往左）

浏览器如何读取你的CSS选择器？我们需要明白的最重要的一点是从右向左。比如这个选择器ul > li a[title=”home”]，浏览器首先读取的是a[title=”home”]。这个首先被读取的部分我们叫它key selector，它是浏览器最終要选择的元素。

ID最快，Universal最慢

有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal

#main-navigation {   }      /* ID（最快） */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal（慢） */
#content [title='home']     /* Universal */

不高效

content [title=’home’] /* Universal */
main-nav > li { } /* 比它看起来的要慢 */

永远不要这样做
ul#main-navigation { }

css抒写样式顺序

1.定位属性：position display float left top right bottom overflow clear z-index

2.自身属性：width height padding border margin background

3.文字样式：font-family font-size font-style font-weight font-varient color

4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

5.css3中新增属性：content box-shadow border-radius transform……

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

慎重选择高消耗的样式
什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。

box-shadows
border-radius
transparency
transforms
CSS filters（性能杀手）

正确使用 Display 的属性

Display 属性会影响页面的渲染，请合理使用。

display: inline后不应该再使用 width、height、margin、padding 以及 float；

display: inline-block 后不应该再使用 float；

display: block 后不应该再使用 vertical-align；

display: table-* 后不应该再使用 margin 或者 float；

动画性能优化

一般浏览器的渲染刷新频率是 60 fps，所以在网页当中，帧率如果达到 50-60 fps 的动画将会相当流畅，让人感到舒适。

如果使用基于 javaScript 的动画，尽量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.

避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。

使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。

多利用硬件能力，开启 GPU 加速

css中以下属性（CSS3 transtions、CSS3 3D transforms、opacity、canvas、webGL、video）来触发GPU渲染，请合理使用，ps:过度使用会引发手机耗电增加

js优化

加载优化

1、script标签放在底部,不要放在head标签;

2、尽量减少js文件数量

3、给script标签添加一个defer属性,defer属性指明所含的脚本不会修改DOM,因此代码能安全地延迟执行。

<script src="file.js" defer></script>

4、把loadScript()函数直接嵌入页面,从而 避免多产生一次HTTP请求;一旦页面初始化所需要的代码完成下载,你可以继续自由地使用loadScript();去加载页面其他的功能所需要的脚本;

5、YUI3的方式、LazyLoad类库(自己百度一下这个脚本)
直达链接： http://www.jq22.com/jquery-info390

6、LABjs:(这个也是一个脚本文件,可以自己搜索一下哈)
直达高铁：https://segmentfault.com/a/1190000003771526

数据存取优化

1、函数中读写局部变量总是最快的,读写全局变量通常是最慢的。请记住,全局变量总是存在于执行环境作用域链的最尾端,因此他也是最远的。对所有浏览器而言,总分趋势是,一个标识符所在的位置越深,它的读写速度也就越慢。

最好的方式是把使用一次以上的全局变量用局部变量代替。例如:

Var doc =document;

对象成员–原型

js中的对象是基于原型的。原型是其他对象的急促,它定义并实现了一个新创建的对象所必须包含的成员列表。

因此对象可以有两种类型:实例成员和原型成员。实例成员直接存在于对象实例中,原型成员则从对象原型继承而来

对象成员–原型链

使用构造函数Book来创建一个新的Book实例。实例boo1的原型(proto)是Book.prototype,而Book.prototype的原型是object。

4、避免使用with语句,因为他会改变执行环境作用域链。同样,try-cath语句中catch子句也有同样的影响,因此也要小心使用;

5、通常来说,可以通过吧常用的对象成员、数组元素、跨域变量保存在局部变量中来改善js性能,因为局部变量访问速度更快。

优化DOM编程

1、var element= document.querySelectorAll(“#menu a “);

最新的浏览器提供了一个名为querySelectorAll()的原声dom方法;

2、获取页面中有些class为‘waring’和‘notice’的元素

Var errs = document.querySelectorAll(‘div.waring,div.notice’);

3、为了防止页面多次重排,可以将样式的修改合并在一起然后一次处理,这样只会修改一次DOM

Var el = document.getElementById(‘mydiv’);

el.style.cssText =”border:1px solid red;border-right:2px;padding:5px;”

这样会覆盖已存在的样式信息,如果保留现有样式,可以:

el.style.cssText +=‘;border-left:1px;’;

另外一种就是修改class的名称;

4、一个减少重排的方式是通过改变display睡醒,临时从文档中移除元素,然后再恢复他

5、另外一种减少重排的方法是在文档之外创建并更新一个文档片段,然后把它附加到原始列表中。

Var fragement = document.getElementById(“mylist”);

appendDataToElement(fragement,data);

Document.getElementById(‘mylist’).appendChild(fragement);

6、还有一种解决方案是为需要修改的节点创建一个备份,然后对副本进行操作,一旦操作完成,就用新的节点替代旧的节点

Var old = document.getElementById(“mylist”);

Var clone = old.cloneNode(true);

appendDataToElement(clone,data);

Old.parentNode.replaceChild(clone,old);

推荐使用文档片段的方案,因为所产生的DOM遍历和重拍次数最少。