您当前位置：首页 > 技术文章 > 浅谈css优化十则 跳过导航链接
    技术文章
    浅谈css优化十则
    发布日期：2011-08-04 09:54:00　浏览数：2818　来源：运友网
    在写css代码时 做一些简单的优化，这样css的渲染速率会有一定的提高的。

    服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树；在构建DOM树的同时，如果有JS，同时调用JS引擎解析。

    浏览器解析css的顺序：从上到下，从右到左。

    所以我总结css优化方面的有以下几点

    一：css 命名 、书写规范；（好的代码看上去就很整齐 很有条理性这样方便日后的维护和管理）

    二：css优先级； 选择器权重：内联样式：1000，id选择器：1000， class选择器：10，标签选择器：1 注意权重的问题。

    三：少用滤镜，少用hack。

    四：多用继承属性。

    五：使用简写样式：例如margin: 10px 浏览器会解释为上下左右各有10px的外补丁。margin： 0 10px 浏览器解析为 左右有10px的外补丁。

    六：少用position：absolute；

    七：css的路径不要太深。例如 .box .box-con .box-list li { line-height: 24px } 这么长。。。增加代码量减小开发效率。刚也说了，css渲染是从上到下，从右到左的
    所以直接这样写就可以了.box-list li { line-height: 24px }

    八：平铺背景图片不要过小，影响渲染速率。

    九：float使用要谨慎。

    十：合理化布局（模块化布局）；可以把样式划分为 基类 和扩展类 模块化布局 ：模块基本相同的样式写在 基类里，不同的在重新用class来定义称为扩展类 。




    本文地址：http://www.56856.cn/news/13714.htm
    推荐栏目：
    24小时点击量排行
    实用工具

版权所有:徐州运友网络通信股份有限公司 增值电信业务经营许可证:苏B2-20150077 苏ICP备05046738号
邮箱：xzyy56@163.com 电话：0516-87730925、0516-83702772