HTML 结构层:
- 搭建页面结构、写入网页展示内容
CSS 表示层:
- 对网页结构进行样式美化修饰
JavaScript 行为层:
- 实现网页的动态效果及与客户端、服务端交互的功能和业务
优化方案:
HTML 方面:
- 要使用语义化代码结构,有利于搜索引擎和便于团队人员阅读理解
- 尽量减少DOM元素,使页面渲染更快
- 给 img 标签元素设置宽高值,可减少页面重绘,同时防止图片缩放
CSS 方面:
- css 样式放在 head 页头标签
- 使用 link 引入 css ,而不是 @import
- 避免使用 css 表达式
- 避免将 css 写在 DOM 的 style 属性里,不利于 SEO 搜索
- 尽量减少查询层级,例如:.list .name 比 .list .item .name 好
- 尽量减少查询范围,例如:.list > .item 比 .list .item 好
- 尽量使用缩写方式,例如:padding: 0 10px 20px
- 制作精灵图,减少图片请求
JavaScript 方面:
- JavaScript 代码放在页尾
- 移除或提取重复脚本
- 尽量减少全局变量的使用
- 避免频繁的操作 DOM
- 字符串的循环操作如替换、查找,应使用正则表达式