网页的性能优化的小知识

      网页的性能优化的小知识

     1. 首先，从浏览器的渲染的角度上来看，应该减少reflow（回流）和repaint（重绘）。

回流：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要重新倒回去重新渲染。

重绘：如果只是改变了某个元素的背景颜色，文字颜色的话，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重绘某一部分。

所以我们可以知道，其实回流要比重绘花费更多的时间，也就更影响性能。所以我们代码的时候，要尽量避免过多的回流。

例如，为动画的HTML元件使用fixed或absolute的position，那么修改他们的CSS是不会reflow的。

给图片设置height和width，可以加快页面的显示，而且可以避免回流。

     2.然后是编写CSS的时候，CSS选择符应该从右往左进行匹配的，所以，我们在编写CSS的时候需要注意的话：

           1）dom深度尽量浅

           2）避免后代选择符，尽量选择使用子代选择符，因为子元素匹配的概率要大于后代元素的匹配符。

           3）避免使用通配符‘*’，因为通配符是遍历整个文档树的，所以性能的耗费很多。

      3. 我们再可以通过合理利用javascript对性能的影响：

           1）一个常见的做法就是将所有的script标签放置在页面的底部，也就是body闭合标签之前，优化加载顺序，这样可以保证脚本执行前页面已经完成了DOM树的渲染。

           2）尽可能地合并脚本，页面中的script的标签越少，加载也就越快，响应也就越快。

           3）还有一个不得不提的是，将css与javascript文件利用工具进行压缩，删除不必要空格和换行符，而且把内联的脚本放在外部独立的文件中。

       4.减少域名查询，所以我们要减少对外部的javascript，css,图片等资源的引用，使用现代的css来减少标签和图像，使用CSS+文字去替代一些只有文字的图片，而且尽可能重复利用缓存的数据。