首页 > 代码库 > web 优化技巧

web 优化技巧

对于目录组织:

  目录组织——

  可以考虑结合 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 优化技巧