css,html性能优化

css性能优化

CSS是负责布局和渲染的重要角色，漂亮的页面当然能够吸引用户。本文是自己在开发过程中总结的关于CSS与性能的关系，可能有不对之处，希望能够指出。

?

1、所有的样式尽量放在css文件中，HTML标签中不要写style属性，因为浏览器在所有的样式加载完成之后，才会开始渲染整个页面，写在标签属性必会加长浏览器的渲染时间

2、删除默认样式代码

因为会影响浏览器的执行时间。如：align="left"，默认就是左对齐

3、减少使用相对定位

因为这会影响浏览器的repain和reflow。如：position：absolute

4、CSS 缩写

CSS 缩写可以让你用极少的代码定义一系列样式属性，这种做法可以极大程度的缩减代码量以达到提高性能的目的。如：#ff00ff替换成#f0f

5、对CSS属性进行合并

属性合并减少代码量和浏览器的渲染时间以达到提高性能的目的。如：font-size: 36px; font-family: Arial; line-height: 48px; font-weight: bold;替换成font:bold 36px/48px Arial;

6、CSS选择器

浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的，因此最右边的选择符就是关键选择符。比如：#parent > a {}与#parent a {}，前者浏览器首先会查找页面上所有的“a”节点，然后再去做进一步的判断：如果它的父节点的 id 为“parent”，则匹配成功。后者浏览器先便利所有的“a”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“parent”，则匹配成功，否则继续查找下一个“a”节点。

尽量减少规则数量，规则越多，匹配越慢

减少属性选择器

7、避免使用 CSS表达式

CSS表达式只有ie浏览器可以执行，但是计算次数比较频繁，不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。

8、利用继承机制，减少CSS

如果很多子节点都需要设定该 CSS 属性值，可以统一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额外设定，加速了 CSS 的分析效率。

9、样式放在HTML页面头部加载

浏览器在所有的样式加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。

10、避免使用滤镜

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况，最好的解决办法就是使用 PNG8。

11、利用data:image/png;base64来代替url加载图片

"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。

12、减少重复的样式，多人开发时会出现多个人定义同一个样式，可以借助浏览器检测

13、合并、压缩你的css文件，减少http请求，可以借助工具或者自动化构建。

14、使用CSS sprite来处理你的图片

HTML性能优化

　　页面优化是对网页中的HTML代码进行必要的调整，可以有效地精简页面中的冗余代码，加快网页显示速度，减少网页占用搜索引擎服务器的存储空间，提高用户体验和搜索引擎友好性，当然也可以更好的突出页面的主题，提高页面的相关性。下面是我总结出来的编写html代码时需要注意的，仅供参考。

1、HTML标签有始终。 减少浏览器的判断时间

2、把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。

3、减少iframe的使用，因为iframe会增加一条http请求，阻止页面加载，即使内容为空，加载也需要时间

4、id和class，在能看明白的基础上，简化命名，在含有关键字的连接词中连接符号用'-'，不要用'_'

5、保持统一大小写，统一大小写有利于浏览器缓存，虽然浏览器不区分大小写，但是w3c标准为小写

6、清除空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符，这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格，sublime text中ctrl+a，然后长按shift+tab全部左对齐，清除行开头的空格

7、减少不必要的嵌套，尽量扁平化，因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，所以当嵌套很多时打开页面就会特别慢。

8、减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜索引擎的搜索

9、使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制

10、代码要结构化、语义化

11、css和javascript尽量全部分离到单独的文件中

12、除去无用的标签和空标签

13、尽量少使用废弃的标签，如b、i等，尽管高版本浏览器是向后兼容的