网页渲染优化和JS性能提高

自学前端有一段时间了，在网上学习总结了点网页的渲染性能和JS性能提高的方法，有利于写出更加优秀的代码

1. 不要使用GIF图片实现loading效果，这样会下降CPU消耗；

2. 禁止使用iframe，会阻塞父文档onload事件；搜索引擎的检索程序没法解读这种页面，不利于SEO；

3. 使用CSS3代码替代JS动画，尽量避免重绘重排以及回流；

4. 对于一些小图标，可使用base64位编码，以减小网络请求；

5. 网页Gzip，CDN托管，data缓存 ，图片服务器；

6. 前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数

7. 用innerHTML代替DOM操做，减小DOM操做次数，优化JS性能；

8. 少用全局变量，多缓存DOM节点查找结果，减小IO读取操做；

9. 避免使用CSS Expression；

10. 图片要懒加载，讲样式表放在顶部，脚本放在底部；

11. 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。对普通的网站有一个统一的思路，就是尽可能向前端优化、减小数据库操做、减小磁盘IO。向前端优化指的是，在不影响功能和体验的状况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减小数据库操做指减小更新次数、缓存结果减小查询次数、将数据库执行的操做尽量的让你的程序完成（例如join查询），减小磁盘IO指尽可能不使用文件系统做为缓存、减小读写文件次数等。程序优化永远要优化慢的部分，换语言是没法“优化”的。

12. 计算机学科中有一个经典问题是经过改变数据存储的位置来得到最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 – 能使用{}建立对象就不要使用new Object，能使用[]建立数组就不要使用new Array。JS中字面量的访问速度要高于对象。 – 变量在做用域链中的位置越深，访问所需实践越长。对于这种变量，能够经过缓存使用局部变量保存起来，减小对做用域链访问次数 – 使用点表示法（object.name）和操做符（object[name]）操做并无太多区别，只有Safari会有区别，点始终更快

 

13.  在JS中常见的循环有下面几种：

for(var i = 0; i < 10; i++) { // do something}  

for(var prop in object) { // for loop object}    

[1,2].forEach(function(value, index, array) { // 基于函数的循环})

毋庸质疑，第一种方式是原生的，性能消耗最低的，速度也最快。第二种方式for-in每次迭代都回产生更多的开销（局部变量），它的速度只有第一种 的1/7 第三种方式明显提供了更便利的循环方式，可是他的速度只有普通循环的1/8。因此能够根据本身项目状况，选择合适的循环方式。

 

14.   事件委托：试想一下页面上每个A标签添加一个事件，咱们会不会给每个标签都添加一个onClick呢。 当页面中存在大量元素都须要绑定同一个事件处理的时候，这种状况可能会影响性能。每绑定一个事件都加剧了页面或者是运行期间的负担。对于一个富前端的应 用，交互重的页面上，过多的绑定会占用过多内存。 一个简单优雅的方式就是事件委托。它是基于事件的工做流：逐层捕获，到达目标，逐层冒泡。既然事件存在冒泡机制，那么咱们能够经过给外层绑定事件，来处理 全部的子元素出发的事件。

document.getElementById('content').onclick = function(e) {

    e = e || window.event;    

    var target = e.target || e.srcElement;    //若是不是 A标签，我就退出   

    if(target.nodeNmae !=== 'A') { return }   //打印A的连接地址    

    console.log(target.href) }

 

15.  重绘和重排：浏览器下载完HTMl，CSS，JS后会生成两棵树：DOM树和渲染树。 当Dom的几何属性发生变化时，好比Dom的宽高，或者颜色，position，浏览器须要从新计算元素的几何属性，而且从新构建渲染树，这个过程称之为重绘重排。

bodystyle = document.body.style;

bodystyle.color = red;

bodystyle.height = 1000px;

bodystyke.width = 100%;

上述方式修改三个属性，浏览器会进行三次重排重绘，在某些状况下，减小这种重排能够提升浏览器渲染性能。 推荐方式以下，只进行一次操做，完成三个步骤：

bodystyle = document.body.style;

bodystyle.cssText 'color:red;height:1000px;width:100%';

 

16. 网站通常LOGO，使用H1标签包住，而且设置其中文本内容为网站名或关键字，利于SEO和爬虫