首页 > 代码库 > 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 优化技巧
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。