- 1. 前端开发核心思想
- 2. 定律
- 3. 基本准则
- 4. HTML
- 5. CSS
- 6. 文件规范
- 7. 通用规范
- 8. 文件、资源和目录命名约定（适用于所有前端维护的内容和相关目录，(html, css, js, png, gif, jpg, ico)等）
- 9. css规范
- 10. JavaScript规范
- 11. 注释规范
- 12. javascript
1. 前端开发核心思想
- 内容、表现和行为分离；
- 标记应该结构良好、语义正确以及普遍合法；
- Javascript应该起到渐进式增强用户体验的作用；
2. 定律
永远遵循同一套代码规范
3. 基本准则
-
结构，样式，行为分离。 - 缩进：
统一使用两个空格缩进，不能用tab和空格混搭的样式。 - 文件编码：使用不带BOM(Byte order mark)的UTF-8编码。
- 在文件中指定编码方式：
<meta charset="utf-8">
- 在文件中指定编码方式：
- 一律使用小写字母，不能大小写混合。
- html示范
- 正确示范：
<img src="a.jpg" alt="dog" title="dog"> - 错误示范：
<IMG src="a.jpg" ALT="dog" title="dog">
- 正确示范：
- css示范
- 正确示范：
color: #e5e5e5;
- 正确示范：
- 错误示范：
color: #E5E5E5;
- html示范
- 省略外链资源URL协议部分。
- 省略外链资源（图片和其他媒体资源）URL中的http/https协议，使URL成为相对地址
- 避免mixed content问题，减少文件字节数
- 其他协议（ftp等）的URL不省略协议部分
- html正确示范：
<img src="//dog/js/index.js"> - html错误示范：
<img src="http://dog/js/index.js"> - css正确示范：
.dog{ background: url(//www.google.com/images/dog.png); } - css错误示范：
.dog{ background: url(http://www.google.com/images/dog.png); }
- html正确示范：
- 文件命名规范
- 文件命名统一采用小写字母
- 不要包含空格和特殊符号
- 注释规范（注释要统一）
- 可以通过设置编辑器来设置出一致的注释模式。
- HTML注释
- 模块注释
<!-- 订单详情模块 --> - 区块注释
<!-- @name: 订单详情 @description: 主要是订单详情页面 @author: fjw(fjw@gmail.com) -->
- 模块注释
- CSS注释
- 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
/* ========================================================================== 组件块 ============================================================================ */ /* 子组件块 ============================================================================ */ .selector { padding: 15px; margin-bottom: 15px; } /* 子组件块 ============================================================================ */ .selector-secondary { display: block; /* 注释*/ } .selector-three { display: span; }
- 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
-
JavaScript注释- 单行注释：åå
- // 独占一行，后跟一个空格，缩进与下一行被注释说明的代码一致。
- 多行注释：
- 避免使用 /.../ 这样的多行注释。有多行注释内容时，使用多个单行注释。
- 函数/方法注释：
- 必须包含函数的说明；
- 有参数和返回值时，必须有注释标志；
- 参数和返回值必须包含类型信息和说明；
- 当函数是内部函数，外部不可以访问时，可以使用@inner来标识；
- 示范：
/** * 函数描述 * * @param {string} p1 参数1的说明 * @param {string} p2 参数2的说明 * @param {number=} p3 参数3的说明（可选） * @return {Object} 返回值描述 */ function foo(p1, p2, p3) { var p3 = p3 || 10; return { p1: p1, p2: p2, p3: p3 }; }
- 单行注释：åå
- 文件注释
- 文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。
- 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息
- 示范：
/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author user@meizu.com (Firstname Lastname) * Copyright 2015 Meizu Inc. All Rights Reserved. */
4. HTML
-
标签
尽量遵循HTML标准和语义，但不要以失去实用性为代价- 自闭合标签，无需闭合（
img, input, br, hr）； - 可选闭合标签，需要闭合（
</li>, </body>）； - 尽量减少标签的数量；
- 自闭合标签，无需闭合（
-
class与id的使用
- class应以功能或者内容命名，不以表现形式命名；
- class与id单词
字母小写，多个单词组合时，采用中划线-分割； - 使用唯一的id作为JavaScript hook；
- 避免创建无样式信息的class；
<!-- 错误示范 -->
<div class="j-hook left contentWraaper"></div>
<!-- 正确示范 -->
<div id="j-hook" class="content-wrapper"></div>
-
属性的顺序
属性应当按照一定的顺序出现，来保证易读性。顺序如下：- id
- class
- name
- data-xxx
- src, for, type, ref
- title, alt
- aria-xxx, role
-
单双引号
属性的定义，统一使用双引号。示范如下<!-- 正确示范 --> <div id="detail" class="red content-wrapper"></div> -
嵌套规则
语义嵌套：浏览器会做容错处理，生成的文档树可能互相不太一样；
严格嵌套约束：在所有的浏览器都都不被允许；
1. 语义嵌套约束
+<li>用于<ul>或者<ol>下
+<dt><dd>用于<dl>下
+<thead><tbody><tbody><tr><td>放在<table>下
2. 严格嵌套约束
+ 行内元素下只能包含文本和行内元素
+<a>标签里不可以嵌套交互元素，如<a>,<button>,<select>等 -
布尔值属性
在HTML中，disabled, selected, checked等属性不用设置值<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select> -
语义化
- 通常情况下，每个标签都是有语义的，所谓语义就是有各自的功能和含义；
- 语义化的HTML结构，有助于机器（搜索引擎）理解；
- 多人协作时，能够快速理解别的开发者的用途；
-
脚本引用写在 body 结束标签之前；
-
尽量保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，JS脚本之中。
-
尽量不使用行内样式；
```
<style>.no-good {}</style>;
```
-
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
-
任何时候都要尽量使用最少的标签并保持最小的复杂度，尽量避免多余的父元素。
-
尽量避免通过 JavaScript 生成的标签，它让内容变得不易查找、编辑，并且降低性能。
-
重要图片一定要加上alt属性; 给重要的元素和截断的元素加上title;
-
标签和含义
标签 含义 <p>段落 <h1>--<h6>标题 <ul>无序列表 <ol>有序列表 <blockquote>大段引用 <cite>一般小引用 <b>为样式加粗 <strong>为了强调而加粗 <i>为样式倾斜 <em>为强调内容而倾斜 <code>代码标识 <abbr>缩写 -
文档类型
HTML的第一行要加一个标准模式的声明，这样确保了浏览器有一致的表现形式<!DOCTYPE html> -
语言
<!-- 中文 --> <html lang="zh-Hans"> <!-- 简体中文 --> <html lang="zh-cmn-Hans"> <!-- 繁体中文 --> <html lang="zh-cmn-Hant"> <!-- English --> <html lang="en"> -
字符编码
- 应以无BOM的utf-8编码作为文件格式
-
<meta charset="utf-8">必须作为<head>的第一个直接子元素
-
IE模式兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
SEO优化
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- SEO --> <title>Style Guide</title> <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta name="author" content="author,email address"> </head> -
viewport
- viewport：指浏览器窗口内容区的大小，不包括工具条，选项卡等；
- width：浏览器宽度，输出设备中可见区域宽度；
- device-width：设备分辨率宽度，输出设备的屏幕可见宽度；
- initial-scale：初始缩放比例；
- maximum-scale：最大缩放比例；
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：
- 在 Web Server 根目录放置 favicon.ico 文件；
- 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico"> -
综上，head部分应当这样写：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 图标 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
5. CSS
-
代码组织
- 以组件为单位组织代码段；
- 制定一致的注释规范；
- 组件块和子组件块以及声明块之间使用一个空行分割，子组件块之间使用三个空行分割；
- 如果有多个CSS文件，应当按照组件形式而不是按照页面形式来拆分。因为页面可能会被重组，而组件只会被移动；
-
注释
在写代码之前，要规划好组件的工作方式，局限性和构造他们的方法。具体见基本规则。 -
class和id
- 使用语义化、通用的方式命名；
- 使用
连字符命名class和id，不要使用驼峰命名和下划线； - 避免嵌套层级太多，最好
不要超过3层； - 避免选择器和class，id叠加使用；
出于性能考量，在没有必要的情况下避免元素选择器叠加Class、ID 使用。
元素选择器和ID、Class混合使用也违反关注分离原则。如果 HTML 标签修改了，就要再去修改 CSS 代码，不利于后期维护。/* 错误示范 */ .red {} .box_green {} .page .header .login #username input {} ul#example {} /* 正确示范 */ #nav {} .box-video {} #username input {} #example {} -
声明块的格式- 选择分组时，保持独立的选择器占用一行；
- 声明块的左括号
{前面加一个空格； - 声明块的右括号
}应当单独成一行； - 声明句的冒号
:后面应当加一个空格； - 声明句以分号
;结尾； - 以逗号
,分隔的属性值，每个逗号后应添加一个空格； - rgb()、rgba()、hsl()、hsla()或 rect()括号内的值，逗号分隔，但逗号后不添加一个空格；
- 对于属性值或颜色参数，省略小于1的小数前面的0（例如，.5 代替 0.5；-.5px 代替 -0.5px）；
- 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
- 避免为 0 值指定单位，例如，用
margin: 0;代替margin: 0px;；
/* 错误示范 */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF } /* 正确示范 独立的选择器 */ .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; } -
属性的声明顺序- Positioning
- Box Model
- Typographic
- Visual
制定此顺序的原因：
定位（positioning）可以从正常的文档流中移除元素，还能够覆盖正常的盒模型（box model）的相关样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
```
/* 正确示范 /
.declaration-order {
/ Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;/* Box model */ display: block; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 3px; margin: 10px; float: right; overflow: hidden; /* Typographic */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center; /* Visual */ background-color: #f5f5f5; color: #fff; opacity: .8; /* Other */ cursor: pointer;}
-
引号的使用
url()，属性选择符，属性值使用双引号。/* 错误示范 */ @import url(//www.google.com/css/maia.css); html { font-family: 'open sans', arial, sans-serif; } /* 正确示范 */ @import url("//www.google.com/css/maia.css"); html { font-family: "open sans", arial, sans-serif; } .selector[type="text"] { } -
媒体查询（media Query）的位置
- 将媒体查询放在尽可能相关规则的附近，
- 不要将他们打包放在单独的文件或者文件的底部
.element { ... } .element-avatar { ... } .element-selected { ... } @media (max-width: 768px) { .element { ...} .element-avatar { ... } .element-selected { ... } } -
关于
@import和link不用@import，因为他很慢，不但增加了额外的请求数，还会导致不可预料的问题
解决方法：
- 使用多个 元素；
- 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
- 其他 CSS 文件合并工具；
-
链接样式的顺序a:link -> a:visited -> a:hover -> a:active -
组件
从 Components 的角度思考，将网站的模块都作为一个独立的 Components。
-
组件命名
组件至少使用两个单词命名- 点赞（.like-button）
- 搜索框（.search-form）
6. 文件规范
- html,css,js,images归类到约定的目录中
- html文件命名：
英文命名，后缀为.html；将统一页面文件放在同一个目录中，以便后端添加功能时快速的找到对应的页面。 - css文件命名：
英文命名，后缀为.css；共用文件为base.css；首页是index.css；其他页面依据需求命名。 - js文件命名：
英文命名，后缀为.js，共用common.js；其他模块按照需求名命名。
7. 通用规范
- 所有页面按照统一的格式来写；
- 对所有后台请求的返回结果做判断空处理（保证在后台请求失败的情况下，浏览器控制台不会报错）；
- 所有功能模块写注释，详见下面注释规范；
- 处理逻辑一定要尽量简化，抽取公共框架，减少后期维护成本；
- tab键用两个空格代替或用两个空格缩进（务必）；
- 代码行之间尽量不要有空行，重大逻辑转折、语法意义转折，方法分割除外，适当空行增强可读性；
- 可使用 W3C HTML/CSS Validator 来验证你的 HTML/CSS 代码有效性;
8. 文件、资源和目录命名约定（适用于所有前端维护的内容和相关目录，(html, css, js, png, gif, jpg, ico)等）
- 字母一律小写，必须是英文单词或者汉语拼音，以英语单词优先，多个单词以连字符 - 连接。 只能出现小写引文字母，数字和连字符；
- 浏览器广告拦截插件会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等，页面中尽量避免采用以上词汇来命名；
- 文件命名总是以字母开头而不是数字，以特殊字符开头命名的文件，一般都有特殊的含义与用处，慎用。
- 需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 asdasd.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
9. css规范
为了便于阅读，css属性书写要遵循本规范。
-
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行；
-
当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
} -
属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。 -
每个规则之间始终有一个空行分隔。
-
属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。 -
为了代码的易读性，在每个声明块的左花括号前添加一个空格；右花括号要单独成行。
-
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
-
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
-
与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。所以要尽量使用<link>标签引入样式；
10. JavaScript规范
- 文件命名可读性强。文件夹、文件的命名与命名空间应能代表代码功能，增强可读性。
- 函数命名按照驼峰命名法。
function funName() {}
- 常量要全部大写,变量驼峰命名：
var VARIABLENAME //常量
var variableName //变量
-
排版缩进采用统一的缩进方式排版代码。缩进为2个空格。
If(condition1 || condition2) {
action1;
} else if (condition3 && condition4) {
action2;
} else if (condition5
&& condition6
&& condition7
&& condition8) {
action2;
} else {
default action;
} -
关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符‘,’后面使用空格;
var name[空格]=[空格]value;
if空格 {
} -
左大括号"{"可以居行尾,右大括号"}"单独占一行，居行首
if (a && b) {
}
句末必须使用分好结尾；
var fn = function () {
};//这里没有分号的话，脚本解析器会报错！！！
(function () {
alert(1);
})();
- if、while、for、do语句的执行体总是用"{"和"}"括起来
总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）；
变量声明可以只用一个 var 关键字声明，多个变量用逗号隔开；赋值尽量写在变量声明当中。
使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的错误（比较的双方必须是同一类型才会有效）；
在用if作判断的时候。下列表达式统统返回 false：false, 0, undefined, null, NaN, ''（空字符串）.
统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常容易辨别；
11. 注释规范
代码注释，永远也不嫌多，特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。避免发生过一段时间回头看自己的代码不能立即明白作用；
1.文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录；
2.函数或者类等都要添加头描述；
3.注释的时候不止写代码都干了些什么，还要加上代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
4.代码注释中英文都可以。
/**
* 简述
* 功能详细描述
*
* @param <String> arg1 参数1
* @param <Number> arg2 参数2，默认为0
* @return <Boolean> 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
单行注释,写在代码上面;多行注释应有描述；
/*
* 注释操作说明
*/
for( var i = 0; i < 100; i++) {
}
4.为了便于CSS 阅读， css 大模块时间使用区块分割标记；
/****** 注释描述 ********/
12. javascript
12.1. 注释
- 原则
- as short as possible（如无必要，勿增注释）：尽量保持代码本身的清晰性可读性
- as long as necessary（如有必要，尽量详细）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。
- 单行注释
- 多行注释
- 函数/方法注释
12.2. JavaScript命名方式
- 变量使用驼峰命名方式(Camel)
- var userName = {};
- 私有属性、变量和方法都以_下划线命名
- var _privateMethod = {};
- 常量全部使用大写字母，单词间下划线分割的方式命名
- var PI_PI = 3.14;
- 函数名使用驼峰命名
- 函数参数使用驼峰命名
function formateString(oldString) { } - 类使用帕斯卡命名法(Pascal)
- 类的属性和方法，使用驼峰命名法
function OldPerson(oldName, newName){ this.oldName = oldName; this.newName = newName; } - 枚举变量使用帕斯卡命名法
- 枚举的属性，全部使用大写字母，单词间下划线分割的命名法
var TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 } - 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
function XMLParser() {} function insertHTML(element, html) {} var httpRequest = new HTTPRequest();
12.3. 命名的词法
- 类名，使用名词
- var name = "";
- 函数名，使用动宾结构
- function getName(){}
- boolean类型的变量，使用is或者has开头。
var isReady = false; var hasApple = true; - Promise对象用动宾短语的进行时表达
var loadingData = ajax.get('url'); loadingData.then(callback);
12.4. 接口命名规范
- 可读性强
- 尽量不与 jQuery 社区已有的习惯冲突
- 尽量写全。不用缩写，除非是下面列表中约定的；（变量以表达清楚为目标，uglify 会完成压缩体积工作）
12.4.1. true和false布尔表达式
- 类型检测优先使用 typeof
- 对象类型检测使用 instanceof
- null 和 undefined的检测使用 == null
| 运算式 | 返回值 |
|---|---|
| null | false |
| undefined | false |
| ''(空字符串) | false |
| 数字0 | false |
| "0" | true |
| [] | true |
| {} | true |
| undefined == null | true |
| [] == [] | false |
遗留问题：
- 检验一个数组是否为空数组
- arr.length == 0
- 检验一个对象是否为空对象
12.4.2. 不要在Array上使用for-in循环
for-in 循环只用于object/map/hash循环，
因为for-in循环不是从0到length-1进行遍历的，它遍历的是所有出现在对象和原型链上的key
12.4.3. 二元和三元操作符
- 操作符始终写在前一行，避免分号隐式插入产生问题
- 三元操作符用于代替if操作
12.4.4. &&和||
二元操作符是可短路的，只有在必要的时候才会计算到最后一项。
12.5. jQuery规范
- 存放 jQuery 对象的变量以 $ 开头；
- 将 jQuery 选择器返回的对象缓存到本地变量中复用；
- 使用驼峰命名变量；
var $myDiv = $("#myDiv");
$myDiv.click(function(){...});
12.5.1. 选择元素
- 尽可能的使用 ID 选择器，因为它会调用浏览器原生方法 document.getElementById 查找元素。当然直接使用原生 document.getElementById 方法性能会更好；
- 在父元素中选择子元素使用 .find()方法性能会更好, 因为 ID 选择器没有使用到 Sizzle 选择器引擎来查找元素；
// 错误示范
var $productIds = $("#products .class");
// 正确示范
var $productIds = $("#products").find(".class");
12.5.2. DOM操作
- 当要操作 DOM 元素的时候，尽量将其分离节点，操作结束后，再插入节点；
- 使用字符串连接或 array.join 要比 .append()性能更好；
12.5.3. 事件
- 如果需要，对事件使用自定义的 namespace，这样容易解绑特定的事件，而不会影响到此 DOM 元素的其他事件监听；
- 对 Ajax 加载的 DOM 元素绑定事件时尽量使用事件委托。事件委托允许在父元素绑定事件，子代元素可以响应事件，也包括 Ajax 加载后添加的子代元素；
12.5.4. 链式写法
- 尽量使用链式写法而不是用变量缓存或者多次调用选择器方法；
- 当链式写法超过三次或者因为事件绑定变得复杂后，使用换行和缩进保持代码可读性；
- 多个参数使用对象字面量存储；
- 不要将 CSS 写在 jQuery 里面；
- 正则表达式仅准用 .test() 和 .exec()。不准用 "string".match()；
12.6. 性能优化
12.6.1. 避免使用jQuery实现动画
- 禁止使用slideUp(),slideDown(),fadeIn(),fadeOut()方法；
- 尽量不使用animate()方法；
12.6.2. 避免不必要的DOM操作
最简单优化DOM树查询的方案是：当一个元素出现多次时，将它保存在一个变量中，可以避免多次查询DOM树。
12.6.3. 缓存数组长度
通过存储数组的长度，可以有效避免每次循环重新计算。（新浏览器会自动优化这一过程，旧的浏览器不会）
12.6.4. 异步加载第三方内容
当你无法保证第三方内容（一个视频）可以正常使用时，用异步加载这些代码，避免阻塞整个页面加载。
参考：全部内容来自网络。
网友评论