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等,尽管高版本浏览器是向后兼容的