web 优化技巧

标签：style   使用   sp   on   文件   问题   bs   代码   ef   

对于目录组织：

　　目录组织——

　　可以考虑结合 Bootstrap 与 Yaml/Blueprint 的思想。

　　a .把常用的基础样式压缩合成一个文件。

　　b. 把不必现组件样式抽离成单独 CSS，按需加载。

　　【优化点】

　　减少了单个 global_min 文件的大小。

　　【权衡点】

　　需要考虑由此可能导致的请求数过多问题。

　　hack——

　　根据实际情况，可考虑把针对 IE6 的 hack 文件单独分出来。

　　【优化点】

　　便于对低级浏览器的大型差异化处理，并且减少对于高级浏览器的冗余代码。

　　对于 CSS 规范：

　　CSS 前缀——

　　可考虑尝试 Nec 的方式，约定“单字母_xxx”为公用样式的标识，取消单一的公用前缀，通过以不同字母作为顶级前缀，对公用模块进行划分。

　　【优化点】

　　减免了“公用前缀_组件前缀_组件名”的多级前缀，通过以类名格式作为标识，代替了原来公用前缀的作用。

　　【权衡点】

　　仍需按项目实际情况考虑。

　　类的划分——

　　可考虑约定统一几个功能性的类名（以属性为粒度的类名），例如元素隐藏的类名，供给js调用。

　　【优化点】

　　减免让开发直接写 style 内联 CSS，造成页面的 reflow/repaint。

　　高级 CSS 选择器——

　　在对移动端页面进行重构时可以考虑使用更高级的 CSS 选择器。

　　例： [class^=”icon”]，:first-child，:nth-child(n)….

　　【优化点】

　　相比于传统的方法，节省类名。

　　对于图形：

　　考虑与设计师约定，视觉效果在可接受范围内，部分效果使用 CSS3 实现，对低级浏览器实现优雅降级。

　　【优化点】

　　大量减少图片的使用，节省带宽以及请求数。

web 优化技巧

标签：style   使用   sp   on   文件   问题   bs   代码   ef   

原文地址：http://www.cnblogs.com/cailiqiang/p/4173409.html