网页的性能

 一般规则是:

    1.样式表越简单，重排和重绘就越快

    2.重排和重绘的DOM元素层级越高，成本越高

    3.table元素的重排和重绘成本，要高于div元素 

 

提高性能的九个技巧：

    1.DOM的多个读操作（或多个写操作），应该放在一起，不要两个读操作之前，加入一个写的操作

    2.如果某个样式是通过重排得到的，那么最好的缓存结果。避免下一次用到的时候，浏览器又要重排 

    3.不要一条条地改变样式，而要通过改变class或者csstext属性，一次性改变样式。 

    4.尽量使用离线DOM,而不是真实的网面DOM，来改变元素样式

    5.先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

   

    6.position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

    7

.只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

    8.使用虚拟DOM的脚本库，比如React等。

    9.使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染

 

关于google的web优化最佳实践:

　　a.避免坏请求(即浏览器请求一个不存在的资源)

　　b.避免CSS (@import 影响页面加载速度的问题)

　　c.避免使用document.write  

　　d.合并多个外部css文件 

　　e.合并多个外部JavaScript文件 

　　f.通过css sprites来整合图像（整合图像、定位图像） 

　　g.延迟JavaScript的加载(浏览器在执行JavaScript代码时会停止处理页面，当页面中有很多JavaScript文件或代码要加载时，将导致严重的延迟)

　　h.启用压缩/GZIP（可以节省大约50%到70%的大小） 

　　i.启用keep-Alive（使的客户端到服务器的链接持续有效，当出现对服务器的后继请求时，keep-Alive功能避免了简历或者重新建立链接） 

　　j.将小的css和JavaScript代码嵌到HTML中 

　　k.利用浏览器缓存 

　　m.压缩css代码 (minfy css工具) 

　　n.尽量减少重定向(重定向始终用户的原始请求被重定向到其他的请求) 

　　o.优化样式表和脚本的顺序 

　　p.避免JavaScript阻塞渲染 

　　q.缩小原始图像以及制定图像尺寸

 

ps:摘抄其他人的信息，形成简单文档(第一次记录)