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 实现,对低级浏览器实现优雅降级。
【优化点】
大量减少图片的使用,节省带宽以及请求数。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。