网页的性能优化的小知识
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+文字去替代一些只有文字的图片,而且尽可能重复利用缓存的数据。