HTML部分
1.属性顺序
永远排前三的属性1.class 2.id 3.name
2.class和id命名
class：全小写，中划线分割，如.btn-danger
id：全小写，下划线分割，如#btn_focus
CSS部分
1.保持选择器的低权重
为了以后的维护，尽量让样式设置的选择器越低越好，尤其是避免使用!important
2.将CSS放在页面头部引入
CSS 是阻塞的资源（阻塞html的DOM树渲染）。浏览器在构建 CSSOM 的过程中，不会渲染任何已处理的内容。即便 DOM 已经解析完毕了，只要 CSSOM 不 OK，那么渲染这个事情就不 OK。（试想一下，如果css加载的时候不阻塞DOM树渲染，那么等html展示给用户的时候，然后css加载完成添加样式，这时候html就会被重新渲染（也叫做重绘或者回流）。这样肯定是影响性能的。）
所以我们通常会将 CSS 放在 head 标签里 和尽快启用 CDN 实现静态资源加载速度的优化。另外，JS 引擎是独立于渲染引擎存在的。我们的 JS 代码在文档的何处插入，就在何处执行。当 HTML 解析器遇到一个 script 标签时，它会暂停渲染过程，将控制权交给 JS 引擎。JS 引擎对内联的 JS 代码会直接执行，对外部 JS 文件还要先获取到脚本、再进行执行。等 JS 引擎运行完毕，浏览器又会把控制权还给渲染引擎，继续 CSSOM 和 DOM 的构建。
基于上述原理。在构建页面的时候，通常都将CSS在页面头部进行引入，将JS引入放置在底部，从而减少页面渲染时间，提升渲染效率。
3.注意选择器的运用
我们在写css时要注意优化选择器，减少最右边查找的失败几率，提高效率。比如 #myList li {}实际开销相当高。另外，减少嵌套。后代选择器的开销是最高的，因此我们应该尽量将选择器的深度降到最低（最高不要超过三层），尽可能使用类来关联每一个标签元素。
4.减少重复作用的样式使用
比如给一个元素设置了absolute或fixed的时候，浏览器会默认将元素转化为block，这时候再给这个元素添加display: block;无疑让代码变得冗余。
5.将装饰性图片作为背景
将图片作为背景，可以通过background-size, background-position和其它的属性，使得保持或改变图片原始尺寸和宽高比会更方便，但是背景图片没有任何语义，对于需要通过alt来提升SEO优化和需要用户进行下载或者别的一些JS操作的图片，还是要通过img引入。
JS部分
1.不加分号
每一句js代码的结尾加不加分号，每个人都有自己的选择，我的个人习惯是不加分号，但是要记住：以（[` （小括号，中括号，模板字符串）三者开头的语句前面要加分号，以防解析错误。
2.使用四个空格的缩进
3.每次只声明一个变量
不管是全局还是局部，都应该一次只声明一个变量
4.优先使用单引号
和加不加分号的抉择一样，这里我更喜欢对普通的字符串使用单引号。
5.变量命名
标准变量：采用驼峰标识，如thisIsMyName
常量：确定某个变量不应该被更改的话，用全大写和下划线分割来提高其特殊性。
构造函数：大写字母开头
网友评论