css之提高渲染性能的写法

css之提高渲染性能的写法

最近今天在看web标准，看到了一条css样式表要用外联的形式，这样可以提高渲染速度。对于渲染速度，（css3渲染速度快，页面显示的快）上网看了很多帖子与论坛，总结了一些，如有不足，欢迎大家补充。

1.不要使用*{} 类似的通配符

        这种方法虽然写起来简单，但是渲染起来，浏览器引擎要遍历所有的标签，很影响效率。为了对浏览器友好，可以把自己经常用的标签进行重置操作。

2.css选择器的嵌套不要太多

        绝对没有比用后代选择器更改糟糕的做法了，因为浏览器读取css选择器有一个很重要的原则，那就是从右到左读取。所以尽量避免使用后代选择器，要去除不必要的祖先元素，可以考虑使用类选择器来替换后代选择器

3.不要在样式表中书写不存在的class

4.尽量少用绝对定位

         虽然绝对定位可以很简洁的实现很棒的效果，但是由于浏览器的渲染机制，网页中如果用过多的绝对定位，会让网页加载速度变得很慢。

5.让属性尽可能多的去继承，而不是覆盖。

6.尽量不去用滤镜

          滤镜的使用不仅存在浏览器兼容的问题，还很耗费资源。如果一定要达到滤镜的效果，可以考虑用图片去实现

7.避免使用css表达式

        css表达式尽在ie浏览器下才起作用，ie8后不推荐使用，因为他会严重影响页面性能。任何时候，不管任何一个事件被触发，例如窗口的resize事件，鼠标的移动等等，css表达式都会重新计算一遍。

8.把css文件放在页面顶部

       把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载其他页面内容。另外内联样式表有可能会引起页面重新渲染或显示隐藏页面中的某些元素，所以建议使用外联样式表，不要使用内联样式表

9.页面头部表名文档编码

        html文档是以包含文档编码信息的数据流方式在网络间传输。页面的编码信息一般会在http对应的头部信息或在文档内的html标记中指明。客户浏览器只有在确定的页面编码后才能正确的渲染页面，所以在绘制页面前，大部分浏览器会缓冲一定字节的数据来从中寻找编码信息。不同的浏览器预缓冲的字节数是不一样的，如果浏览器接收到了设定的预缓冲数据量信息后还没有找到页面的编码信息，便会根据各自制定的默认编码渲染页面。如果此时再获取到页面编码信息，和现在所用的不一致，那么整个页面就得重新渲染，使渲染速度大大降低。所以要习惯指定编码信息，而且给页面指定的编码要符合页面实际编码；如果在http头部和html标记中同时指定了编码，需要保证编码信息一致

        （PS:看css渲染的时候，看到了页面渲染，下面，就再写一点关于页面渲染的）

        页面渲染就是浏览器将自己通过http等协议向服务器请求返回的页面资源基于一定的规则（css语句，JS语句，浏览器自身的一些规则等）完成页面布局及绘制的过程。就是浏览器将HTML编程人眼看到图像的全过程。在某论坛看到一条回复，说的很形象，你要吃菜，你找到厨师说，我要尖椒肉丝。厨师就去翻菜谱，说，炒给你吃。在这里，你是浏览者，菜是你将看到的页面，厨师是浏览器，菜谱是页面代码，炒菜的过程就是页面渲染。页面渲染中包含了css渲染，同时还有html渲染，js渲染