网页渲染优化和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和爬虫
