选择器注意
- 尽量不使用ID选择器
- 减少子选择器的层级（less和Sass的滥用）
- 使用组合CSS类选择器
兼容IE浏览器
- 兼容旧浏览器的代码，被称为hack代码
- 熟悉IE浏览器中常见的兼容样式
- 分离样式兼容代码
em，px，%
- px：相对尺寸，但由于同环境，又是绝对尺寸 em：应用元素上字体大小的两倍，%：相对于父元素的百分比
- 尽量设置相对尺寸
- 只有在可预知元素尺寸的情况下才使用绝对尺寸
- 使用em设置字体的大小
使用高效的CSS选择器
- 匹配原理：从右到左
- 避免使用通配符
- 避免使用标签和单个属性选择器作为关键选择器
- 不要再ID选择器前使用标签名
- CSScomb排序,CSS selectors Test 选择器性能测试网站
其他高性能实践
- 避免使用@imoport
- 避免使用IE浏览器独有的样式：图片滤镜和CSS表达式
浏览器的支持情况
- 在线工具：CSS3 Click Chart（提供兼容代码的实例），CSS content and browser compatibility
- 添加前缀：Prefix，AutoPrefix（sublime插件），借助SASS和LESS
- 不要过度添加前缀
- 添加CSS3标准属性定义,看html5please
高性能JS
- 避免定义全局变量和函数
- 把变量和方法封装在一个变量对象里，把全局变量包含在一个局部作用域里面
- 使用return语句，返回需要公开接口
var mycurrent = (function(){
var length = 0;
function init(){..}
return {
init:init;
}})
- 避免使用with语句，难以阅读，易造成BUG
- 避免使用eval
- 不要编写检测浏览器的代码
- 事件处理和业务逻辑代码分隔开
- 配置数据和代码逻辑分离，用配置数据代替写死的数据（JSON)
- 逻辑与结构样式分离
- JS分离HTML结构
- 从服务器端动态获取HTML代码（AJAX)
- 通过客户端动态生成页面结构（template标签）
- JS模板：Mustache，Underscore，Handlebars，jade，ejs（Template-engine-chooser模板引擎）
- 尽量不要在模板中滥用逻辑块
- 不要构建太复杂的模板
- 使用预编译模板
- 使用MVC格式：
- Backbone,Angularjs,Ember,Knockout
- JS规范：
- Commonjs：以同步的方式加载模块，使用在nodejs服务器端的环境中居多（使用require加载）
- AMD：以异步方式加载模块，更多使用在有网络延迟存在的浏览器环境中（使用回调函数），在requirejs和curl中居多
合理使用AJAX
- 明确使用AJAX
- 前端会根据用户需求动态取得后端数据，然后更新网页界面
- 期望通过不刷新页面获取任何资源或页面
- 动态进行用户输入的验证
- 其他任何期望通过异步方式取得资源的情况
- 缺陷：使用AJAX都是动态的，没有添加额外的处理，AJAX会破坏后退的按钮
- 使用JSON做为AJAX传输的数据格式
时间： 2024-12-28 14:28:23