entry

entry 是描述一个 bundle 的入口文件是什么。在具体在业务中使用的方式有如下三种：

• 直接在 package.json 中描述 entry 内容；
• 动态创建 entry 内容，使用 glob 等工具使用若干通配符，运行时获得 entry 的条目，这种方式比较适合入口文件不集中且较多的场景；
• 根据 entry 内容挂钩一些 html 模板 loader，例如 html-webpack-plugin，ejs-html-loader 等，这种方式主要用以解决 html 随模板生成，但同时根据 entry 的一些内容自动替换模板中一些关键字。
  output

output 的作用在于告知 webpack 该如何把构建编译后的文件放入到磁盘。
在具体业务中使用的方式有如下种：

• output.filename: 修改构建后文件的命名，业务中会存在 4 种情况。

  • 直接设置一个 bundle 的 name，例如 index.bundle.js 这类场景发生在只有一个 entry 的情况；
  • [name]，使用 Chunk 的名称
  • [hash]，使用 Compilation 的 hash 值，在这种方式下生成的资源文件会都有相同的 hash 值
  • [chunkhash]，使用 Chunk 的 hash 值，在这种方式下会根据每个 Chunk 的来生成 hash 值，使用这种方式的情况发生在想要 cache，cache 会衍生出很多的内容这个在之后再做展开。

• output.path: 修建构建后文件输出到磁盘的目录，业务中会存在 1 种情况。

• 传入一个相对于当前 cwd 的路径，这种自定义情况非常普遍

• output.publicPath: 申明构建后的资源文件的引入地址，业务中会存在 1 种情况

  • 设置为 https://xxxx.xx.com/assets/ 这种方式，这种方式的出现在于 webpack 默认在引用资源时都是从根目录开始，然后现实中 assets 资源 和 html 会随不同的发布平台发布。

• output.chunkFilename：声明非 entry chunks 的资源文件的命名，一般它发生的场景在 code split 即按需加载的业务场景，例如 require.ensure，在这种场景下，会对 require.ensure 的模块进行独立的打包，文件命名也会有四种情况。

  • [id]，id 值 从 0 开始
  • [name]，该 chunk 的 name，require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
  • [hash]，使用 Compilation 的 hash 值，在这种方式下生成的资源文件会都有相同的 hash 值
  • [chunkhash]，使用 Chunk 的 hash 值，在这种方式下会根据每个 Chunk 的来生成 hash 值，使用这种方式的情况发生在想要 cache，cache 会衍生出很多的内容这个在之后再做展开。

• output.library：一旦设置后该 bundle 将被处理为 library。

• output.libraryTarget：export 的 library 的规范，有支持 var, this, commonjs,commonjs2,amd,umd。
  resolve

• resolve.alias：为模块设置别名。这种方案通常使用在两种情况下：

  • 一种是单纯为模块设置别名，一来方便自己不再需要根据目录书写 ../ 等这种路径操作，另外也可以提升 webpack 在 resolve 模块时的速度；
  • 另外一种则和优化上扯上一些关系，比如 resolve.alias.a = isTest ? ‘moduleTestA’ : ‘moduleA’，如上这种方式使用最大的好处在于能根据当前所属代码所需情况构建产物中只会有 moduleTestA 或者 moduleA。以上这种方式可以在所有资源文件应用。当然也可以使用 babel-plugin-module-resolver 和 less-plugin-rewrite-import 予以解决。

• resolve.root：添加个人目录到 webpack 查找模块的路径里，这种需求比如发生在当前某个项目所依赖某个文件并不在该项目中。

• resolve.modulesDirectories：模块解析方式，在项目中我看到一般会有两种使用的场景，
  _ 一种主要针对开发者，需要新增一种模块的解析方式。比如设置为 [“node_modules”, “bower_components”] 那么在项目中 foo/bar 的文件下依赖一个模块 a, 那么 webpack 会通过如下的顺序去寻找依赖
  foo/bar/node_modules/a
  foo/bar/bower_components/a
  foo/node_modules/a
  foo/bower_components/a
  node_modules/a
  bower_components/a
  _ 另外一种则是想要申明模块 resolve 的优先级，比如在一个项目中有依赖 A，B，依赖的 A,B 同时依赖了 C，如果在构建过程中，你想明确表示我只想要某个 C 的话，则就可以通过这种方式。

• resolve.extensions：设置解析模块的拓展名。默认为 [“”, “.webpack.js”, “.web.js”, “.js”]。比如新增一种文件扩展名，[“”, “.webpack.js”, “.web.js”, “.web.ts”, “.web.tsx”, “.js”]

• resolve.packageMains：设置 main 的入口文件。这种方式目前会在 webpack@2 中使用 resolve.mainFields 来解决 tree-shaking，目前支持的有 redux 等。
  resolveLoader

• resolveLoader.modulesDirectories：同 resolve.modulesDirectories 只不过针对 loader，这边需要注意的是在 resolve.modulesDirectories 中关于优先级的，在工具被二次封装时会用到比较多。

• resolveLoader.moduleTemplates： [“-webpack-loader”, “-web-loader”, “-loader”, ““]webpack@1 中内置的模板，但是在 webpack@2 是并不会补齐。
  resolve.root, resolve.fallback, resolve.modulesDirectories 这三个属性在 webpack@2 中被合并到了 resolve.modules
  module

• module.loaders：对应模块的加载器。在 webpack@2 中使用 module.rules 予以取代。以下会罗列目前常用文件类型的模块加载处理方式。

  • babel-loader 处理 .js 和 .jsx 文件，由于历史原因 atool-build 在处理 .jsx 文件时会处理 node_modules 下内容。
    • 目前 atool-build 已经内置的 preset 有 babel-preset-es2015-ie，babel-preset-react，babel-preset-stage-0，plugins 有 babel-plugin-add-module-exports 和 babel-plugin-transform-decorators-legacy。
    • 目前业务中自行使用的有: plugins: babel-plugin-import 构建资源大小提供优化，babel-plugin-transform-runtime 实现按需加载 pollyfill 需要与 babel-runtime 结合使用，babel-plugin-module-resolver 实现诸如 webpack 中 resolve.alias 功能，babel-plugin-dva-hmr 和 babel-plugin-dev-expression 实现 dva hot module replacement 功能，babel-plugin-react-intl 实现 react 多语言方案， babel-plugin-es6-promise 覆盖原有 promise; preset: babel-preset-env 实现根据浏览器支持情况自动打包 pollyfill 等功能，babel-preset-es2016 等。在实际过程中，都可能需要对 preset 传入参数的需求。一般设置如下
      • presets: [[require.resolve(‘xxx-preset’), { options: hi }]]
    • cacheDirectory：缓存支持，一般默认就开启
    • babelrc：一般需要禁用掉，防止用户端的 babel 配置影响内置配置
  • tsx-loader: 处理 ts 文件，内置参数 target: ‘es6’, jsx: ‘preserve’,moduleResolution: ‘node’, declaration: false, sourceMap: true，需要注意的是在使用 ts 项目时必须要人为引入一个 ts config.json 的文件，如果没有内容，内部设置为一个空对象即可。
  • style-loader: 通过 js 方式 inject style 节点来注入样式，一般用于开发环境
  • css-loader: 处理 css 文件，一般现有项目中都会使用 ExtractTextPlugin 把样式文件抽取出来，但是在本地开发环境下一般不会 extract 出来，因为一旦 extract 出来会导致 hmr 对样式失效。所以一般在开环环境下会 style-loader!css-loader!postcss-loader 而在 production 下采用 ExtractTextPlugin，另外在每个 loader 都有对应的参数，postcss 还有专门的插件集。除此之外，常用的 css-loader 参数有 modules autoprefix indentName 等
  • postcss-loader: 目前在 postcss 中内置的 plugin 有 rucksack-css - 可废弃 和 autoprefixer 用以实现 autoprefix。一般针对适配的不同的浏览器，需要对 autoprefixer 配置 browsers 参数。一般在无线业务中为了适配高清方案也会引入 postcss-plugin-pxtorem, 同时也需要设置一些参数。
  • less-loader: 处理 less 文件，一般情况下需要配置 modifyVars 参数，用以覆盖 less 变量值
  • sass-loader: 处理 sass 文件，也有使用 fast-sass-loader 和 @ali/sass-loader
  • file-loader: 处理 html 文件，当前 atool-build 内置的方式，在实际业务中，很多并不希望 html 是拍平的结构，所以他们会自定义 fileloader 的参数，比如 file?name=[path][name].[ext]&context=./src/pages，但是也有不少业务中对 html 处理引入了新的 loader, 有 ejs-html-loader，html-minify-loader，还有直接使用插件 HtmlWebpackPlugin 来处理的情况，经过研究，根本上其实是想要解决 html 的自动化生成，以及内部资源文件的引用可以自动化生成。
  • url-loader: 处理 woff woff2 ttf eot svg png jpg jpeg gif 文件，目前业务中会有变更的点有，需要设置 limit 的大小，以及 svg 的处理可能需要存在多个 loader 处理，因为在使用 antd-mobile 业务中需要新增一个 svg-sprite-loader 来把 svg 文件当成一个 component
  • svg-sprite-loader, 已在 url-loader 中予以说明
  • HtmlWebpackPlugin, 已在 file-loader 中予以说明
  • ejs-html-loader, 已在 file-loader 中予以说明
  • html-minify-loader, 已在 file-loader 中予以说明
  • handlebars-loader, 处理 .handlebars 文件，并未内置，业务中自行引入
  • aptl-loader, 处理 .atpl 文件
  • raw-loader, 处理 tpl 文件，也有使用 html-loader 来处理的
  • scss-loader, 处理 scss 文件
  • vue-loader, 处理 vue 文件
  • json-loader, 处理 json 文件

注：一个正常 loader 的配置可能需要配置 test,exclude,include,loader,loaders 属性

• module.preLoaders：istanbul-instrumenter，此方式在 webpack@2 中被弃用，可以直接在对应的应用规则的文件中启用 enforce: ‘pre’
• module.postLoaders：es3ify-loader，提升 ie 兼容性，此方式在 webpack@2 中被弃用，可以直接在对应的应用规则的文件中启用 enforce: ‘post’
• module.noParse: 指明 webpack 不去解析某些内容，该方式有助于提升 webpack 的构建性能，配置内容可以是
  externals

目前业务中使用都为声明外部依赖，这种方式有益于加速 webpack 构建，但是需要开发者额外引入被 external 库的 cdn 地址，常见的有 React 和 ReactDom。
devtool

文档
node

目前内置如下内容为 empty
[
‘child_process’,
‘cluster’,
‘dgram’,
‘dns’,
‘fs’,
‘module’,
‘net’,
‘readline’,
‘repl’,
‘tls’,
];
plugin - webpack 内置

大部分插件都有需要参数传入

• webpack.optimize.CommonsChunkPlugin，在业务中通常有两种使用方式，一种是直接从所有的代码中抽取 common 的逻辑，此处可以配置 common 抽取最小单元，还有一种 common 的使用方式是 vendor 即用户配置具体的 entry 条目，并把该条目抽取为 vendor。
• webpack.optimize.OccurenceOrderPlugin：优化插件，优化 module id
• webpack.optimize.UglifyJsPlugin：代码丑化
• webpack.optimize.DedupePlugin：打包时删除重复模块代码
• webpack.DefinePlugin：给代码注入全局标识符
• webpack.BannerPlugin：给代码添加 banner 信息
• webpack.ProvidePlugin：调用模块的别名
• webpack.NoErrorsPlugin：报错但不退出 webpack 进程
• webpack.ProgressPlugin：显示构建进度
• DllPlugin：主要业务中应用于提升本地调试速度，配置需要有单独的 Dll 配置文件
• DllReferencePlugin：主要业务中应用于提升本地调试速度，需要配合 DllPlugin 使用
  plugin - webpack 扩展

大部分插件都有需要参数传入

• webpack-visualizer-plugin：查看构建 bundle 的构成

• html-webpack-plugin：生成 html 文件

• copy-webpack-plugin：拷贝文件或者文件夹

• clean-webpack-plugin：清理文件或者文件夹

• i18n-webpack-plugin：国际化支持

• webpack-shell-plugin：给 shell 提供运行时机

• case-sensitive-paths-webpack-plugin： 路径大小写敏感问题

• friendly-errors-webpack-plugin：友好报错信息

• extract-text-webpack-plugin：将文本内容生成抽取成独立文件

• happypack：加速构建，需要对配置做比较大改动

• parallel-webpack： 提供资源文件的并发构建

• map-json-webpack-plugin：使用 hash 时，生成资源映射文件
  需要沉淀的方案

• html 自动化生成，自动更新引用资源

• 更加优质的 common 生成逻辑

• 目前有持久化缓存需求，需要给出一个更加完善的方案，即更加合理化的 hash 方案

• https://github.com/goldhand/sw-precache-webpack-plugin 通过 sw 来完成资源文件离线化

• 单一文件多种 loader 处理，单一文件多种 loader 如何进行区间调整

注意把项目结构留一留。

配置分析：
模块打包器，构建依赖关系图，打包成一个或多个 bundle。

• entry：入口。单入口或多入口、第三方库入口。
• output：输出目录及命名。
• loader：模块解析,在 module 中配置 rules。处理非 js 文件，将所有类型的文件转换为 webpack 能够处理的有效模块。
• mode：development/production。
• plugins：打包、优化、压缩等等等等。
  webpack 内置模块：
• webpack.optimize.OccurenceOrderPlugin：优化插件，优化 module id
• webpack.optimize.DedupePlugin：有些 JS 库有自己的依赖树，并且这些库可能有交叉依赖，DedupePlugin 可以找到他们删除重复依赖
• webpack.optimize.UglifyJsPlugin：代码丑化
• webpack.DefinePlugin：给代码注入全局标识符
• webpack.BannerPlugin：给代码添加 banner 信息
• webpack.ProvidePlugin：调用模块的别名
• webpack.NoErrorsPlugin：报错但不退出 webpack 进程
• webpack.ProgressPlugin：显示构建进度
  其他常见模块：
• ：查看构建 bundle 的构成
• html-webpack-plugin：生成 html 文件
• copy-webpack-plugin：拷贝文件或者文件夹
• clean-webpack-plugin：清理文件或者文件夹(rimraf 模块)
• webpack-shell-plugin：给 shell 提供运行时机
• case-sensitive-paths-webpack-plugin： 路径大小写敏感问题
• friendly-errors-webpack-plugin：友好报错信息
• extract-text-webpack-plugin：将文本内容生成抽取成独立文件
  使用 webpack 的站点中有三种代码类型：
• 自己编写的源码
• 依赖的第三方 libary 或 vender 代码
• webpack 的 runtime 和 manifest：runtime 根据 manifest 中的映射数据来查询和解析模块
  runtime 包含：浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
  manifest：当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。

构建流程：

1. 解析 webpack 配置参数，合并 shell 传入和 webpack.config.js 文件里配置的参数，生成最后的配置结果
2. 注册所有配置的插件，让插件监听 webpac 构建生命周期的事件节点，以便做出对应的反应
3. 从配置的 entry 入口文件开始解析文件构建 AST 语法树，找出每个文件所依赖的文件，递归下去
4. 在解析文件 递归的过程中根据文件类型和 loader 配置找出合适的 laoder 用来对文件进行转换
5. 递归完后得到每个文件的最终结果，根据 entry 配置生成代码块 chunk
6. 输出所有 chunk 到文件系统

缓存要点:
1、合理划分模块。在 entry 入口中，制定 vender、libs 等。

• 代码分割，一般引入第三方库更新频率低，利于缓存

2、提取频繁共用的公共模块。利用 commonsChunkPlugin 将公共的模块抽离出来，生成一个或多个依赖文件。通过 minchucks 指定最少依赖次数(为 infinity 表示不包含任何模块)。(在多页面/多入口很有优势，单入口无法抽离文件中的公共模块)

• 频繁模块的抽离，压缩代码体积
  3、抽离清单。一般 manifest 打包在 vender 文件中,在 commonsChunkPlugin 中的 names 中增加 manifest（放在 libs 之前，可用其他名字代替）可以抽离出 manifest。为了减少请求，也可以使用 inline-manifest-webpack-plugin 配合 html-webpack-plugin 内联至 html 中
• 如果 webpack 打包生成的 hash 变了之后，manifest 会改变，则 vender 也会变化，而 vender 通常比较大。因此需要分离 manifest。
  左图使用修改 booking.vue 前，右图修改 booking.vue 后

使用 inline-manifest-webpack-plugin 写入 html 后

4、稳定的 chunk id（webpack 内部对文件的引用）。默认的 chunk id 是 webpack 根据依赖的收集顺序递增的正整数。
当修改 app 或者增删文件时，chunk id 会变化导致许多模块（文件的 chunckhash 没有变化而 id 变了）的缓存不能使用，manifest（webpack 的 runtime 中包含 chunk id 及其对应的 chunckhash 对象）也改变了，我们需要 chunk id 最好稳定。
1）OccurrenceOrderPlugin：让 webpack 以依赖模块出现的次数决定 id 的值，次数越多 id 越小。缺点：但依赖变动大，chunk id 会大幅变动。
2）NamedModulesPlugin：将 chunk id 替换为相对路径。缺点：文件增大+filename 导致安全问题
3）HashedModuleIdsPlugin：NamedModulesPlugin 进阶，将路径进行 MD5 摘要。
左图使用 HashedModuleIdsPlugin 前，右图使用 HashedModuleIdsPlugin 后，booking.vue page

5、稳定的 hash 值。

• 【hash】：在 webpack 构建中会产生一个 compilation 对象，hash 是对该对象内的所有内容计算而来。当使用了 extract 时，由于其抽取的异步流程，有时即使没有改动，也会存在 hash 异动情况。
• 【chunkhash】：每一个 chunkhash 都根据自身的内容计算而来。

1）webpack-md5-hash：使 chunkhash 与该 chunk 内的代码相关联，让 chunck 与其依赖的 chunk id 无关（子改变与父无关）。缺点：当修改 app 时，app 的 chunk id 改变，因此 vender 中对应的 app 模块的 ID 改变，所以 vender 的 hash 理应改变（这时子与父有关）。但是由于 vender 实际包含模块没变，webpack-md5-hash 根据 chunk 内实际包含的模块生成的 chunckhash，因此 vender 的 hash 不会变，导致引入的 vender 是旧的。
2）webpack-chunk-hash

6、其他资源缓存

• Image/Fonts 的【hash】由 webpack/file-loader 计算。
• 提取 CSS(写在 js 中的 style 里的样式无法被抽离，仍打包在 js 中)的【contenthash】由 webpack/extract-text-webpack-plugin 计算。

其他问题：

1. 无法抽离单入口多路由页面的公共模块组件，可以自己指定写死。
2. 在不同的电脑下 chunkhash change
3. module 的版本问题

一、同步加载与异步加载的形式

1. 同步加载我们平时最常使用的就是这种同步加载形式：

1

<script src="http://yourdomain.com/script.js"></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改
dom、重定向等行为，所以默认同步执行才是安全的。

以前的一般建议是把 script 放在页面末尾 body 之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。

简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。

2. 常见异步加载（Script DOM Element）

1
2
3
4
5
6
7
8

(function () {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.async = true;
  s.src = "http://yourdomain.com/script.js";
  var x = document.getElementsByTagName("script")[0];
  x.parentNode.insertBefore(s, x);
})();

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。 这种方法是在页面中 script 标签内，用 js 创建一个 script 元素并插入到 document 中。

这样就做到了非阻塞的下载 js 代码。

async 属性是 HTML5 中新增的异步支持，见后文解释，加上好（不加也不影响）。
此方法被称为 Script DOM Element 法，不要求 js 同源。

将 js 代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用。

例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(function () {
  var ga = document.createElement("script");
  ga.type = "text/javascript";
  ga.async = true;
  ga.src =
    "https:" == document.location.protocol ? "https://ssl" : "http://www";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(ga, s);
})();
(function () {
  var po = document.createElement("script");
  po.type = "text/javascript";
  po.async = true;
  po.src = "https://apis.google.com/js/plusone.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(po, s);
})();

但是，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。

3. onload 时的异步加载

1
2
3
4
5
6
7
8
9
10
11
12

(function () {
  function async_load() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "http://yourdomain.com/script.js";
    var x = document.getElementsByTagName("script")[0];
    x.parentNode.insertBefore(s, x);
  }
  if (window.attachEvent) window.attachEvent("onload", async_load);
  else window.addEventListener("load", async_load, false);
})();

这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。

补充：DOMContentLoaded 与 OnLoad 事件

DOMContentLoaded : 页面(document)已经解析完成，页面中的 dom 元素已经可用。但是页面中引用的图片、subframe 可能还没有加载完。
OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的 timeline 分成了三个阶段。

4. 异步加载的其它方法
   由于 Javascript 的动态特性，还有很多异步加载方法：

• XHR Eval
• XHR Injection
• Script in Iframe
• Script Defer
• document.write Script Tag
• 还有一种方法是用 setTimeout 延迟 0 秒 与 其它方法组合。
  XHR Eval ：通过 ajax 获取 js 的内容，然后 eval 执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
 function() {
 if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
Script in Iframe：创建并插入一个 iframe 元素，让其异步执行 js 。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

GMail Mobile：页内 js 的内容被注释，所以不会执行，然后在需要的时候，获取 script 元素中 text 内容，去掉注释后 eval 执行。

1
2
3
4
5

<script type="text/javascript">
  /*
   var ...
   */
</script>

详见参考资料中 2010 年的 Velocity 大会 Steve Souders 和淘宝的那两个讲义。

二、async 和 defer 属性

1. defer 属性

1

<script src="file.js" defer></script>

defer 属性声明这个脚本中将不会有 document.write 或 dom 修改。
浏览器将会并行下载 file.js 和其它有 defer 属性的
script，而不会阻塞页面后续处理。 defer 属性在 IE 4.0 中就实现了，超过 13
年了！Firefox 从 3.5 开始支持 defer 属性 。 注：所有的 defer
脚本保证是按顺序依次执行的。

2. async 属性

1

<script src="file.js" async></script>

async 属性是 HTML5 新增的。作用和 defer
类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在 onload
事件之前完成。 Firefox 3.6、Opera 10.5、IE 9 和 最新的 Chrome 和 Safari 都支持
async 属性。可以同时使用 async 和 defer，这样 IE 4 之后的所有 IE
都支持异步加载。

3. 详细解释 script 标签在 HTML 4.01 与 HTML5 的区别：

   • type
     属性在 HTML 4 中是必须的，在 HTML5 中是可选的。
   • async 属性是 HTML5 中新增的。
   • 个别属性（xml:space）在 HTML5 中不支持。

   说明：
   （1） 没有 async 属性，script 将立即获取（下载）并执行，然后才继续后面的处理，这期间阻塞了浏览器的后续处理。

   （2） 如果有 async 属性，那么 script 将被异步下载并执行，同时浏览器继续后续的处理。

   （3） HTML4 中就有了 defer 属性，它提示浏览器这个 script 不会产生任何文档元素（没有 document.write），因此浏览器会继续后续处理和渲染。

   （4） 如果没有 async 属性但是有 defer 属性，那么 script 将在页面 parse 之后执行。

   （5）如果同时设置了二者，那么 defer 属性主要是为了让不支持 async
   属性的老浏览器按照原来的 defer 方式处理，而不是同步方式。 另参见官方说明：script async

   个人补充： 既然 HTML5 中已经支持异步加载，为什么还要使用前面推荐的那种麻烦（动态创建 script 元素）的方式？ 答：为了兼容尚不支持 async 老浏览器。如果将来所有浏览器都支持了，那么直接在 script 中加上 async
   属性是最简单的方式。

三、延迟加载（lazy loading）

前面解决了异步加载（asyncloading）问题，再谈谈什么是延迟加载。

延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的 js，而是在需要的时候或稍后再通过 js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。

特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。

四、script 的两阶段加载 与 延迟执行（lazy execution）

JS 的加载其实是由两阶段组成：下载内容（download bytes）和执行（parse andexecute）。

浏览器在下载完 js 的内容后就会立即对其解析和执行，不管是同步加载还是异步加载。

前面说的异步加载，解决的只是下载阶段的问题，但代码在下载后会立即执行。

而浏览器在解析执行 JS 阶段是阻塞任何操作的，这时的浏览器处于无响应状态。

我们都知道通过网络下载 script 需要明显的时间，但容易忽略了第二阶段，解析和执行也是需要时间的。

script 的解析和执行所花的时间比我们想象的要多，尤其是 script 很多很大的时候。有些是需要立刻执行，而有些则不需要（比如只是在展示某个界面或执行某个操作时才需要）。

这些 script 可以延迟执行，先异步下载缓存起来，但不立即执行，而是在第一次需要的时候执行一次。

利用特殊的技巧可以做到 下载 与 执行的分离 (再次感谢 javascript 的动态特性)。

比如将 JS 的内容作为 Image 或 object 对象加载缓存起来，所以就不会立即执行了，然后在第一次需要的时候再执行。

此部分的更多解释 请查看末尾参考资料中 ControlJS 的相关链接。

小技巧：

1. 模拟较长的下载时间： 写个后端脚本，让其 sleep 一定时间。如在 jsp 中
   Thread.sleep(5000); ，这样 5 秒后才能收到内容。
2. 模拟较长的 js
   代码执行时间（因为这步一般比较快不容易观察到）： var t_start = Number(new
   Date()); while ( t_start + 5000 > Number(new Date()) ) {} 这个代码将使 js 执行 5
   秒才能完成！

五、script 标签使用的历史

1. script 放在 HEAD 中

1
2
3

<head>
  <script src="“…”"></script>
</head>

• 阻止了后续的下载； - 在 IE 6-7 中 script 是顺序下载的，而不是现在的
  “并行下载、顺序执行” 的方式； - 在下载和解析执行阶段阻止渲染（rendering）；

2. script 放在页面底部（2007）

1
2
3

<body>
  <script src="“…”"></script>
</body>

• 不阻止其它下载； _ 在 IE 6-7 中 script 是顺序下载的； _
  在下载和解析执行阶段阻止渲染（rendering）；

3. 异步加载 script（2009）

1
2
3

var se = document.createElement("script");
se.src = "http://anydomain.com/A.js";
document.getElementsByTagName("head")[0].appendChild(se);

这就是本文主要说的方式。

• 不阻止其它下载；
• 在所有浏览器中，script 都是并行下载；
• 只在解析执行阶段阻止渲染（rendering）；

4. 异步下载 + 按需执行 (2010)

1
2
3

var se = new Image();
se.onload = registerScript();
se.src = "http://anydomain.com/A.js";

把下载 js 与解析执行 js 分离出来

• 不阻止其它下载；
• 在所有浏览器中，script 都是并行下载；
• 不阻止渲染（rendering）直到真正需要时；

六、异步加载的问题

在异步加载的时候，无法使用 document.write 输出文档内容。

在同步模式下，document.write 是在当前 script 所在的位置输
出文档的。
而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。

而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。 实际上 document.write 的名声并不好，最好少用。

替代方法：

1. 虽然异步加载不能用 document.write，但还是可以 onload 之后执行操作 dom（创建 dom 或修改 dom）的，这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素，这和它在页面中的位置就没关系了，只要创建出该 dom 元素添加到 document 中即可。

2. 如果需要在固定位置异步生成元素的内容，那么可以在该固定位置设置一个 dom 元素作为目标，这样就知道位置了，异步加载之后就可以对这个元素进行修改。

七、JS 模块化管理

异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。

另外，namespace 如何管理 等相关问题。这部分已超出本文内容，可参考：RequireJS 、CommonJS 以及 王保平(淘宝)的 SeaJS 及其博客 。

七、JS 最佳实践

1. 最小化 js 文件，利用压缩工具将其最小化，同时开启 http gzip 压缩。工具：
2. 尽量不要放在 head 中，尽量放在页面底部，最好是 body 之前的位置
3. 避免使用 document.write 方法
4. 异步加载 js ，使用非阻塞方式，就是此文内容。
5. 尽量不直接在页面元素上使用 Inline Javascript，如 onClick 。有利于统一维护和缓存处理。

AMD 规范文档 https://github.com/amdjs/amdjs-api/wiki/AMD
amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS 官网接口文档 http://www.requirejs.org/docs/api.html

模块系统 https://github.com/seajs/seajs/issues/240
前端模块化开发的价值 https://github.com/seajs/seajs/issues/547
前端模块化开发那点历史 https://github.com/seajs/seajs/issues/588
CMD 模块定义规范 https://github.com/seajs/seajs/issues/242
SeaJS API 快速参考 https://github.com/seajs/seajs/issues/266
从 CommonJS 到 Sea.js https://github.com/seajs/seajs/issues/269

RequireJS 和 AMD 规范 http://javascript.ruanyifeng.com/tool/requirejs.html
CommonJS 规范 http://javascript.ruanyifeng.com/nodejs/commonjs.html
Javascript 模块化编程 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript 模块化编程 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

知乎 AMD 和 CMD 的区别有哪些？ http://www.zhihu.com/question/20351507

JavaScript 模块化开发 - CommonJS 规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-commonjs
JavaScript 模块化开发 - AMD 规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd

模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm

做个记录～

LEGB 法则：
L: local，局部作用域，即函数中定义的变量；
E: enclosing，嵌套的父级函数的局部作用域，即包含此函数的上级函数的局部作用域，但不是全局的；
G: globa，全局变量，就是模块级别定义的变量；
B: built-in，系统固定模块里面的变量，比如 int, bytearray 等;
本地作用域（local）> 当前作用域被嵌入的本地作用域（Enclosing locals）> 全局/模块作用域（Global） > 内置作用域（Built-in）

作用域的产生
在 Python 中，只有模块（module），类（class）以及函数（def、lambda）才会引入新的作用域，其它的代码块（如 if、try、for 等）是不会引入新的作用域的。

变量的修改
一个不在局部作用域里的变量默认是只读的，如果试图为其绑定一个新的值，python 认为是在当前的局部作用域里创建一个新的变量，也就是说在当前局部作用域中，如果直接使用外部作用域的变量，那么这个变量是只读的，不能修改。

global 关键字
当内部作用域想修改外部作用域的变量时，就要用到 global 和 nonlocal 关键字了，当修改的变量是在全局作用域（global 作用域）上的，就要使用 global 先声明一下。

nonlocal 关键字（nonlocal 是 python3 新增的关键字）
global 关键字声明的变量必须在全局作用域上，不能嵌套作用域上，当要修改嵌套作用域（enclosing 作用域，外层非全局作用域）中的变量怎么办呢，这时就需要 nonlocal 关键字了

一个定义于某模块中的函数的全局作用域是该模块的命名空间，而不是该函数的别名被定义或调用的位置

1. 尽量避免使用 DOM。当需要反复使用 DOM 时，先把对 DOM 的引用存到 JavaScript 本地变量里再使用。使用设置 innerHTML 的方法来替换 document.createElement/appendChild()方 法。测试结果显示使用 innerHTML 对比 document.createElement/appendChild()方法，在 IE8 中，效率的提高是非常明显的，但是在 Firefox 和 Chrome 中，差别不大。

2. eval()有问题，new Fuction()构造函数也是，尽量避免使用它们 eval 方式比直接调用方式多了一步解析的过程，所以尽量避免使用它，如果必须用它，则最好是把调用的代码包装到函数中，然后 eval 这个函数，这样减少了解析的时间。eval 函数的效率，我们可以用如下的代码测试：测试发现，eval 的效率明显慢很多，尤其在 Firefox 和 chrome 中。 new Fuction 的执行原理和 eval 类似，所以效率也是不高。

3. 拒绝使用 with 语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间，with 里的代码在编译时期是完全未知的。原因明确，不过使用 with 语句，代码会非常简洁，我个人还是经常使用这个语句的。

4. 使用 for()循环替代 for…in 循 环。因为 for…in 循环在开始循环之前需要 Script 引擎创建一个含有所有可循环属性的 List，需要多检查一次。原因明确，没有补充。

5. 把 try-catch 语句放在循环外面，不要放在循环里面，因为异常是很少发生的，放在外面避免每次都要执行 它们。原因明确，这是我认为使用任何语言都有必要遵守的准则。

6. 甚至圣经里都提到过这个 – 不要全局的。全局变量的生命周期贯穿整个脚本的生命周期，而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时，脚本引擎需要搜索整个全局命名空间。防止内存泄漏和提高查找解析速度，另外，变量定义在最小使用范围内，代码的可读性好。

7. fullName += ‘John’;fullName+=’Holdings’;执行速度快于 fullName+=’John’+’Holdings’;测试结果出乎意料，在 IE8 和 chrome 中，两者的效率差不多，但是在 Firefox 中，第一种写法反而比第二种慢很多.IE6 下测试也是如此，看来这条规则还有待进一步研究。

8. 如果你需要把多个字符串连接起来，最好是把他们做成一个数组，然后调用 join()方法实现这个操作。这种方式在生成 HTML 片段时尤其有效。验证还是用测试代码：可以看出，这条规则在主流的浏览器中，效率的差别不大。IE6 下测试，的确第一种比第二种方式效率差很多，所以这条规则已经过时了。

9. 对于简单的任务，最好使用基本操作方式来实现，而不是使用函数调用实现。例如 val1 < val2 ? val1 : val2;执行速度快于 Math.min(val1, val2);，类似的，myArr.push(newEle);慢于 myArr[myArr.length] = newEle;这条很好理解，原生态的好。

10. 将函数的引用作为参数传递到 setTimeout()和 setInterval()里优于将函数名作为字符串参数传递（硬编码）。例如，setTimeout(”someFunc()”, 1000)执行效率慢于 setTimeout(someFunc, 1000)道理类似如上的 eval 方式。

11. 当进行遍历操作时避免使用 DOM 操作。通过像 getElementsByTagName()这 种方法得到的 DOM 元素队列都是动态的；有可能在你还没有对它遍历完成时，它已经被改变。这有可能导致死循环。没有补充。

12. 当你对对象的成员（属性或方法）进行反复操作时，先存储对它们的引用。例如 var getTags = document.getElementsByTagName; getTags(’div’);这条规则的例子，我认为没有表达规则的意思，所以它举得例子不好。并且我按照它的例子测试，并没有发现两者的差异，所以我重新写测试代码如下：这个结果也很容易理解，毕竟多调用了一次取 DOM 函数!

13. 在任何的代码段里，在局部变量范围外存放一个这个局部变量的引用。例如

    1 2 3 4 5 6 7

    function foo(arr) { var a = "something"; //变量 ‘a’ 对于下面的一段就是范围外变量,这个变量的引用在很多情况下会有用处。 for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) { //do something } }

    没有理解这段的主要意思。

14. 效率。

    1	for (var i = 0; i < someArray.length; i++) {}

    的执行效率慢于

    1	for (var i = 0, loopLen = someArray.length; i < loopLen; i++) {}

    这条也很好理解，第一种方式比第二种方式多了取 Array 长度的步骤。

15. 在 HTTP 头信息里加入缓存控制过期和最大存活时间标记。没有补充

16. 优化 CSS。要使用方式，而不要使用@import 方式。请参考这个优秀的文档http://www.slideshare.net/stubbornella/object-oriented-css没有补充

17. 使用 CSS 技术来优化图片资源.减少图片链接个数，减少网络传输压力。

18. 用 GZip 方式压缩 .js 和 .css 文件。如果你使用的是 Apache，在 .htaccess 里设置压缩方式，你的 HTML, XML 和 JSON 也同时会被压缩。 AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json 减少传输的压力，增加响应速度。对小型站点，js 和 css 文件不是很大，效果不明显。

19. 使用 JavaScript 压缩工具。除了使用 YUI 和 JSMin 外，你还可以试一试 Google Closure http://closure-compiler.appspot.com/home (感谢: James Westgate, 一位读者)和上面类似，现在有好多 JS 压缩和混淆的工具。

20. 优化每个页面上的各种资源，把它们拆分到各个子域上，这么它们就能够并行下载。请参考http://yuiblog.com/blog/2007/04/11/performance-research-part-4/没有补充。

21. 将 CSS 样式表放在页面的最顶端，这样能方便包括 IE 在内的浏览器进行解析。没有补充。

22. 尽量将 DOM 结构保持的越简单越好。DOM 的体积会影响相关的操作效率，像查找， 遍历，DOM 改动都有影响。document.getElementsByTagName(’*‘).length 这 个值越小越好。没有补充。

23. 注意你使用的选择器。例如，如果你想获取一个 ul 下的直接子元素，使用 jQuery(”ul > li”)而不要使用 jQuery(”ul li”)更快的查找速度，遍历的元素少。

24. 当切换元素的可见性时(display),请记住：element.css({display:none})的 速度快于 element.hide() 和 element.addClass(’myHiddenClass’)。 除非在一个循环里，我选择 element.addClass(’myHiddenClass’)， 这样会使代码更简洁 – 不要使用 inline CSS 和 JavaScript。没有补充。

25. 当你使用完对 DOM 的引用变量后，要把它置为 NULL。资源回收。

26. 使用 AJAX 时，GET 的执行效率高于 POST。所以要尽量使用 GET 方式。只是要注意一点，IE 只允许你用 GET 传送 2K 的数据。同样的信息，GET 方式传输，使用更少的数据量，所以用 GET 方式效率高。但是 GET 方式的安全性不高，传输的数据量受限制。

27. 小心使用脚本动画。没有硬件的支持，动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。这是每个使用过脚本动画都深有体会的，不过，我认为 HTML5 中 canvas 会广泛地应用，canvas 能做出令人赏心悦目的动画效果，值得大家关注。

28. 如果你的 background-image 对于这个图片的容器太小的话，请避免使 用 background-repeat。如果你的背景图片需要来回填充很多次才能充满背景，那么将 background-repeat 属性设置成 background-image 和 repeat-x 或 repeat-y 来达到填充背景的效果的做法是不明智的，这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做 background-image 并且使用 background-repeat:no-repeat。好建议，没有补充

29. 布局时不要使用 table 在浏览器完全把它画出来之前需要反复绘制好几次。因为 DOM 中 table 是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说，你可以使用 table-layout:fixed;这是一种更有效的现实算法，根据 CSS2.1 技术说明，这种写法可以让表格一行一行的输出。除了上面的原因外，table 在样式继承，offset 值计算上，在多浏览器中的表现上，都有不少诡异的差异，例如：如果在 t 中有个元素 div，则取 div 的 offsetParent 返回是 td 元素，并不是我们期望的具有 position 属性的父元素。

30. 尽可能的使用原始 JavaScript。限制 JavaScript 框架的使用。这一条的准则，要看实际的情况，如果项目非常小，则如果使用框架，框架中大部分的 code 是没有用的，这样就额外增加了加载时间。如果是大型项目，则使用成熟框架，如 Jquery 等，不仅能减少开发时间和成本，也减少了后续维护的成本。

node.js 存在一个全局作用域

例如 global，代表整个 node.js 中的全局命名空间，任何全局变量、函数和对象都是该对象的一个属性值

全局函数：setTimeout 函数（指定当前时刻过去多少毫秒后执行某个回调函数）和 clearTimeout 函数

setInterval 函数（指定每隔多少毫秒执行某个回调函数）和 clearInterval 函数

使用 require 函数加载模块：require 函数的参数可以为模块名（当使用 node.js 中提供的函数时）或带完整路径的模块名

例如;

定义一个 foo.js 文件，其中代码：

1
2
3

var testVar = "this is a test";

exports.testVar = testVar; //暴露的对象

在另一个 js 文件中引用模块，代码：

1
2
3

var foo = require("./foo.js");

console.log(fo.testVar);

node.js 在用于实现各种事件处理的 event 模块中，定义了一个 EventEmitter 类

EventEmitter 类的各种方法有：

addListener(event，listener)：对指定事件绑定事件处理函数

on(event,listener)：对指定事件绑定事件处理函数（addlistener 方法的别名）

once(event,listener)：对指定事件指定只执行一次的事件处理函数

removeListener(event,listener)：对指定事件移除事件处理函数

removeAllListener([event])：对指定事件解除所有事件处理函数

setmaxListener(n)：指定事件处理函数的最大数量

listeners(event)：获取指定事件的所有事件处理函数

emit(event,[arg1],[arg2],[…])：手工触发指定事件

Buffer 类是一个可以在任何模块中被利用的全局类，不需要为该类的使用而加载任何模块，它拥有三种形式的构造函数

第一种：new Buffer(size) 该对象拥有一个 length 属性，属性值为缓冲区大小

可以使用 fill 方法来初始化缓冲区中的所有内容

第二种：new Buffer(array)

第三种：new Buffer(str,[encoding]) 第一个参数用于初始化缓冲区的字符串，第二个参数用于指定文字编码格式，默认为 utf8

Buffer 类的类方法：

isBuffer 方法用于判断是否为 Buffer 对象

byteLength 方法用于计算一个指定字符串的字节数

concat 方法用于将几个 Buffer 对象结合创建为一个新的 Buffer 对象

isEncoding 方法用于检测一个字符串是否为一个有效的编码格式字符串

node.js 操作文件系统

使用 fs 模块来操作有同步和异步两种方法，一般使用异步方法将操作结果作为回调函数的参数进行返回

例如：

1
2
3
4
5

var fs = require("fs");

fs.readFile("./index.html", "utf8", function (err, data) {
  console.log(data);
});

其它方法;

fs.writeFile(filename,data,[options],callback)

使用文件流来读取文件：

fs.createReadStream(path,[options])

写文件：

fs.createWriteStream(path,[options])

对路径进行操作：

path 模块

path.normalize(p) 将非标准路径字符串转换为标准路径字符串

path.join([path1],[path2],[…]) 将多个参数字符串结合成一个路径字符串

path.resolve(path1,[path2],[…])

path.dirname(p) 获取路径中的目录名

path.basename(p,[ext]) 获取路径中的文件名

http 模块

可以用于创建 HTTP 服务器

例如：在 listen 方法中指定服务器端开始监听时调用的回调函数

1
2
3
4
5
6
7
8
9

var http=require('http');

var server = http.createSever(function(req,res){

}).listen(1337,"127.0.0.1",function(){

 console.log('服务器开始监听')；

})；

HTTP 客户端，使用 request 方法向其他网站请求数据

var req=http.request(options,callback);

其中 options 参数值为一个对象或字符串，用于指定请求的目标 URL 地址，若为字符串则自动使用 url 模块的 parse 方法转换为一个对象

callback 参数来指定当获取目标网站所返回的相应流是所调用的回调函数

例如：使用 request 方法向其他网站请求数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var http = request('http');
var options = {
    hostname:'www.microsoft.com',
    port:80,
    path:'/',
    method:'GET'
};

var req = http.request(options,function(res){
    console.log('状态码：'+res.statusCode);
    console.log('响应头：'+JSON.stringify(res.hearders));
    res.setEncoding('utf8');
    res.on('data',function(chunk){
        console.log('响应内容：'+chunk)；
    })；
})；

req.end();

可以使用 setTimeout 方法设置端口超时时间

如果使用 GET 方式向其他网站请求数据，也可以使用 http 模块的 get 方法，该方法与 request 方法的区别在于：

get 方法只能使用 GET 方式请求数据，使用 get 方法时开发者不需要调用 end 方法，node.js 中将自动调用 end 方法

http.get(options,callback)

使用 node.js 可以轻松实现一个代理服务器

进程与子进程

使用 process 对象代表 node.js 应用程序，该对象是一个全局对象，可以在 REPL 环境中或任何模块中访问该对象。该对象具有一些可被用来获取 node.js 应用程序以及运行该程序的用户、运行环境的各种信息的属性、方法和事件

该对象具有的属性：exexPath、version、platform、argv、env、config、pid、title、arch

进程对象具有的方法：

memoryUsage 用于获取 node.js 应用程序的进程的使用量

exit 用于退出运行 node.js 应用程序的进程

node.js 中的进程对象可能触发的事件：

exit 事件

例如：exit 事件回调函数的使用实例

1
2
3
4
5

process.on("exit", function () {
  console.log("node.js进程被退出。");
});

process.exit();

各种信号事件

node.js 还提供 child_process 模块开启多个子进程，在多个子进程之间可以共享内存空间，可以通过子进程之间的互相通信来实现信息的交换，多个子进程之间也可以通过共享端口的方式将请求分配给多个子进程来执行

使用 spawn 方法开启一个运行某个命令的子进程：

child_process.spawn(command,[args],[options])

command 参数用于指定需要运行的命令

args 参数存放了所有运行该命令时需要使用的参数

options 用于指定开启子进程时使用的选项

使用 fork 方法开启专门运行与 node.js 中的某个模块文件的子进程：

child_process.fork(modulePath,[args],[options])

其中 modulePath 参数值为一字符串，用于指定需要运行该模块文件时需要使用的参数

args 参数值为一个数组，存放运行该模块文件时需要使用的参数

options 为一个对象 用于指定开启子进程时使用的选项，它可指定的属性和属性值有：

cwd：指定子进程的当前工作目录

env：为子进程指定环境变量

silent：bool 决定是否与父进程对象共享标准输入/输出

encoding：指定标准输出及标准错误输出数据的编码格式

使用 fork 方法时，必须使用呢 process.exit()方法将其显示退出

send 方法：

1
2
3
4
5
6
7
8
9
10
11

child.send(message,\[sendHandle\])  //在父进程中向子进程发送消息

process.send(message,\[sendHandle\])  //在父进程中向主进程发送消息

当子进程接收到消息后，触发process对象的message事件，可以通过该事件进行监听并指定事件回调函数的方法来指定子进程对象接受消息所需要执行的处理：

process.on('message',function(m,setHandle){  //m参数值为子进程中接收到的消息

//事件回调函数代码

});

使用 exec 方法开启一个运行于某个命令的子进程，并缓存子进程中的输出结果

child.process.exec(command,[options],[callback])

使用 execFile 方法开启一个专门运行某个可执行文件的子进程

child.process.execFile(file,[args],[options],[callback])

file 参数值为一个字符串，用于指定需要运行的可执行文件路径及文件名

在 javascript 脚本代码中，虽然可以使用 try…….catch 机制来捕捉同步方法中抛出的错误，但是不能使用 try….catch 机制来捕捉异步方法中抛出的错误

此时可以使用 domain 模块，该模块提供一个 Domain 对象，当应用程序在任何时刻抛出错误时可以通知该对象，然后由该对象来处理这些错误

使用方法：

var domain = require(‘domain’);

var d =domain.create(); //使用 domain 模块中的 create 方法创建一个 domain 对象

该对象继承了 EventEmitter 实例，因此当它捕捉到错误时，会触发该对象的 error 事件，通过监听该事件并制定回调函数来实现捕捉到错误的处理：

domain.on(‘error’,function(err){

// 事件回调函数代码

});

制定该对象的监听代码，使用该对象的 run 方法

domain.run(fn);

当使用 domain 对象的 run 方法指定 domain 对象所要监听的函数时，函数中所有继承了 EventEmitter 类的实例对象都隐式的绑定到了 domain 对象上。

可以使用 domain 对象的 bind 方法，将一个回调函数与该 domain 对象进行绑定：

domain.bind(callback); //回调函数中必须使用 throw 关键字抛出该错误

可以使用 domain 对象的 intercept 方法拦截一个回调函数中触发的错误

dmain.intercept(callback); //错误将直接被 domain 对象拦截

使用 zilb 模块进行压缩与解压缩处理，该模块内部使用 zlib 类库实现

各种用于创建对数据进行压缩及解压缩处理的方法：

1
2
3
4
5
6
7

zlib.createGzip(\[options\]) //使用Gzip算法进行压缩

zlib.createDeflate(\[options\]) //使用Deflate算法进行压缩处理

zlib.createGunzip(\[options\]) //对使用Gzip算法进行压缩的数据进行解压缩处理

zlib.createInflate(\[options\]) //对使用Deflate算法进行压缩的随想进行解压缩处理

使用 express 构建 web 应用程序

var express = require(‘express’);

var app = express();

app 变量值为一个呗创建的 Express 应用程序对象

路由是 express 框架中的重要概念，在 express 框架中使用路由来根据客户端请求所提交的不同 URL 地址返回不同服务器相应结果

在路由中，使用“：”+参数名的方式来指定一个参数

对象

1、typeof 一个 JS 变量返回结果：number、boolean、string、function、object（null，数组，对象），undefined。唯一有用的地方即用于检测变量是否被定义（typeof foo !== ‘undefined’）。

instanceof 一个 js 对象返回结果：true、false。判断是否是某个对象实例，用于比较不同 JavaScript 上下文的对象时将会出错。

2、js 分为基本类型和对象类型，而普通类型（比如数字 2）被当做构造函数创建的一个对象使用时，JS 会将其转换成一个对象，以其可以使用对象的特性（如方法），而后抛弃对象性质，并将其变回到原始值。

3、除了 null 与 undefined，其他所有数据类型都有 toString 方法

2.toString(); //出错，SyntaxError。因为 JavaScript 解析器，会试图将点操作符解析为浮点数字面值的一部分。

(2).toString; //‘2’

通过 Object.prototype.toString.call(obj)可以获取对象 obj 的内部属性[[Class]]的值，用于检测一个对象的类型。

4、删除属性的唯一方法是使用 delete。设置属性为 undefined 或者 null 并不能真正的删除属性，仅移除了属性和值的关联。

5、使用 for in 循环遍历对象时，原型链上的所有属性都将被访问。可以通过 hasOwnProperty 函数来过滤

函数

1、命名函数的赋值表达式

匿名函数的内部可见函数声明，外部不可见。

var foo = function bar() {

bar(); // 正常运行

}

bar(); //出错 ReferenceError

foo(); //Uncaught RangeError: Maximum call stack size exceeded

2、变量 arguments 维护所有传递给函数的变量列表，语法上它有数组相关的属性 length，但它实际上是一个对象。

利用 Array.prototype.slice.call(arguments);可以将其转化为数组,slice 去掉了对象.length 属性，并取其他属性组成数组。

3、构造函数。通过 new 关键字方式调用的函数都被认为是构造函数。

数组

1、给数组赋值后，为 length 设置一个更小的值会截断数组，但是增大 length 属性值不会对数组产生影响

2、由于 Array 的构造函数在如何处理参数时模棱两可，因此推荐使用字面语法 []来创建数组。

new Array(3, 4, 5); // 结果: [3, 4, 5]

new Array(3) // 结果: []，此数组长度为 3

new Array(‘3’) // 结果: [‘3’]

类型

1、类型转换

隐式转换规则：

1、如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false 转换为 0，而 true 转换为 1;

2、如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值;

字符串转换为数值：

（1）数字类型的字符串，会被转成对应十进制的数值；

（2）空字符串会转换成 0；

（3）其余的全都会转换为 NaN；（NaN 与任何值都不相等，包括自身）

3、如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf()方法，用得到的基本类型值按照前面的规则进行比较;

隐式转换的特殊规则：

1、null 和 undefined 是相等的。

2、要比较相等性之前，不能将 null 和 undefined 转换成其他任何值。

3、如果有一个操作数是 NaN，则相等操作符返回 false，而不相等操作符返回 true。

4、如果两个操作数都是对象，则比较它们是不是同一个对象。（比较引用类型的地址是否相同）

核心

1、不要使用 eval。

eval 只在被调用并且调用函数就是 eval 本身时才在当前作用域中执行。

eval 存在安全问题，它会执行任意传给它的代码，在代码字符串未知或者来自一个不信任的源时，不要用 eval 函数。

2、undefined 是一个值为 undefined 的类型。

会返回 undefined 的情况：

1、访问未修改的全局变量 undefined。

2、由于没有定义 return 表达式的函数隐式返回。

3、return 表达式没有显式的返回任何内容。

4、访问不存在的属性。

5、函数参数没有被显式的传递值。

6、任何被设置为 undefined 值的变量。

3、自动分号插入

其他

1、setTimeout 和 setInterval

setTimeout 和 setInterval 也接受第一个参数为字符串的情况，但这个特性绝对不要使用，因为它内部使用了 eval。由于 eval 在这种情况下不是被直接调用的，因此传递到 setTimeout 的字符串会自全局作用中执行。

用户在自己的浏览器中输入要访问的网站的域名，浏览器向本地 DNS 请求对改域名的解析，本地的 DNS 将请求发到网站的主 DNS，主 DNS 根据一系列策略确定最适合的 DNS 节点，并将解析的结果发给用户，用户向给定 DNS 节点请求响应网站的内容。

CDN 缓存原理描述

用户输入 URL，浏览器将解析过后的域名发给 DNS 服务器

CDN 返回该域名对应的 CNAME，此时浏览器需要再次对获得的 CNAME 进行解析，才能得到 CDN 缓存服务器的 IP 地址。在此过程中全局负载均衡 DNS 解析服务器会将用户的访问请求定位到离用户最近、负载最轻的 CDN 缓存服务器上。这种技术也被称为“DNS 重定向”，DNS 服务器不是为每个请求返回相同的 IP 地址，比如在悉尼的一个客户请求解析www.cdn.com，DNS服务器根据地理位置，计算出距离这个用户最近的CDN服务器，于是返回一个悉尼CDN节点的IP地址。这种方法也不一定是最优的，因为地理位置上最近的两个点，延迟可能反而很高。还有一种方法是通过估计节点间的样本延迟，具体原理我也不了解。

再次解析后，浏览器得到 CDN 缓存服务器的实际 IP 地址，向缓存服务器发起请求。

缓存服务器根据浏览器提供的域名，通过内部 DNS 解析得到此域名源服务器的真实 IP 地址，再由缓存服务器向该服务器发起访问请求。

缓存服务器拿到数据后，一方面将数据发回浏览器，另一方面进行本地保存，以备后用。之后再次访问，数据将从 CDN 缓存服务器中被返回。CDN 不会永久保存数据，可以设置 CDN 的刷新频率，来达到数据的更新。

浏览器得到由缓存服务器发回的数据，并将其显示出来。至此，完成整个域名访问的过程。

CDN 缓存的缺点

CDN 的分流作用不仅减少了用户的访问延时，也减少的源站的负载。但其缺点也很明显：当网站更新时，如果 CDN 节点上数据没有及时更新，即便用户再浏览器使用 Ctrl +F5 的方式使浏览器端的缓存失效，也会因为 CDN 边缘节点没有同步最新数据而导致用户访问异常。

CDN 缓存策略

CDN 边缘节点缓存策略因服务商不同而不同，但一般都会遵循 http 标准协议，通过 http 响应头中的 Cache-control: max-age 的字段来设置 CDN 边缘节点数据缓存时间。

当客户端向 CDN 节点请求数据时，CDN 节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN 节点就会向源站发出回源请求，从源站拉取最新数据，更新本地缓存，并将最新数据返回给客户端。

CDN 服务商一般会提供基于文件后缀、目录多个维度来指定 CDN 缓存时间，为用户提供更精细化的缓存管理。

CDN 缓存时间会对“回源率”产生直接的影响。若 CDN 缓存时间较短，CDN 边缘节点上的数据会经常失效，导致频繁回源，增加了源站的负载，同时也增大的访问延时；若 CDN 缓存时间太长，会带来数据更新时间慢的问题。开发者需要增对特定的业务，来做特定的数据缓存时间管理。

CDN 缓存刷新

CDN 边缘节点对开发者是透明的，相比于浏览器 Ctrl+F5 的强制刷新来使浏览器本地缓存失效，开发者可以通过 CDN 服务商提供的“刷新缓存”接口来达到清理 CDN 边缘节点缓存的目的。这样开发者在更新数据后，可以使用“刷新缓存”功能来强制 CDN 节点上的数据缓存过期，保证客户端在访问时，拉取到最新的数据。

伟大算饭筛选条件：计算机用户每天用到、能处理具体现实的问题、算法主要和计算机科学理论相关

搜索引擎：

搜索的两个阶段：匹配和排名

索引、短语查询

词位置把戏 word location trick

元词把戏 metawork trick

谷歌搜索算法：PageRank 算法

技术基础：超链接把戏 –一个网页的链入连接数多则有高排名

权重把戏 the authority trick —与来自低权重的链入链接相比，来自高权重的链入链接更能证明网页排名

权重值和超链接 可能导致循环问题 解决办法：随机访问者把戏 the random surfer trick

web spam 网络垃圾

基于链接的排名算法 link-based ranking algorithms

共享密钥

迪菲-赫尔曼密钥交换 diffie-hellman key exchange 颜料混合把戏 paint-mixing trick

需要单向操作 one-way action

混合操作 —>离散指数 discrete exponentiation

分离操作 —>discrete logarithm

钟算 clock arithmetic + 幂指数 power motation

纠错码

计算机三项基本操作：执行计算、存储数据、操作数据

代码字

冗余把戏 –Hamming code

信息理论学 information theory – 香农的《通信的数学理论》The Mathematical Theory of Communication

里德-所罗门代码—基于有限域代数数学分支，结合阶梯校验和二维定点把戏

图形识别

邻分类器 nearest-neighbor classifier 最邻近把戏

决策树 decision tree

人工神经网络 artificial neural network – 每个链接都必须有权重值，每个神经元都必须有个合适的值作为阈值

图灵–1950《计算机器与智能》

数据压缩

无损压缩 —–>更短符号把戏

有损压缩 ——>抛弃把戏

数据库

预写日志记录 write-ahesd logging

两阶段提交 two-phrase commit

关系数据库 relational database

数字签名

1、PC 考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是 android 手机还是 ios 手机，一般浏览器使用的都是 webkit 内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

2、在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是 hover 事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在 PC 端都是遇不到的。

3、在布局上，移动端开发一般是要做到布局自适应的，使用 rem 布局。

4、在动画处理上，PC 端由于要考虑 IE 的兼容性，所以通常使用 JS 做动画的通用性会更好一些，但是 CSS3 做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是 CSS3， 既简单、效率又高。

5、微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon 等图标的配置，这些还是要会的。百度地图的一些 API 接口，也得去实现一下，这些对于移动端来说，LBS 是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，学起来比较容易。

1、变量和简单基础类型

string = ‘lalalla’

无需声明变量，根据赋值决定类型

1、对字符串进行操作：

string.title() 以首字母大写的方式显示

string.upper() 全部以大写的方式显示

string.lower() 全部以小写的方式显示

2、使用制表符或换行符添加空白 \t \n

3、删除空白

string.rstrip() 删除字符串末尾多余的空白，删除是暂时的

string.lstrip() 删除字符串开头多余的空白，删除是暂时的

string.strip() 删除字符串两端多余的空白，删除是暂时的

4、数字 两个乘号**表示乘方，使用括号决定运算次序

5、浮点数 python 将带有小数点的数字都成为浮点数，很大程度上使用浮点数无需考虑到它的行为，注意：结果包含的小数位数可能是不确定的

6、使用 str()避免类型错误 str(23) #’23’

变量的作用域：

几种作用域优先顺序：L> E> G> B

Llocal,局部作用域，即函数中定义的变量

Eenclosing，嵌套的父级函数的局部作用域，即包含此函数的上级函数的局部作用域，但并不是全局的

G global，全局变量，就是模块级别定义的变量

B built-in，系统固定模块里面的变量，比如 int byte array 等。

作用域的产生：

会引入新的作用域：模块（module）、类（class）以及函数（def、lambda）

不会引入新的作用域：其他的代码块（如 if、try、for 等），python 没有块级作用域

变量的修改

一个不在局部作用域里的变量默认是只读的，如果试图为其绑定一个新的值，python 认为是在当前的局部作用域里创建一个新的变量。

可以先使用 global（在全局作用域时）或 nonlocal（在副作用域时）声明，再修改

2、列表 –一系列按特定顺序排列的元素组成，有序集合

list = [‘lalallala’, ‘hahahhaha’]

1、python 支持 负数索引，即用 list[-1]表示访问作用一个元素，用 list[-2]表示访问倒数第二个元素

2、 添加元素

list.append(‘hello’) 将新元素 hello 添加至末尾

list.insert(0， ‘world’)将新元素 world 插入至索引为 0 处

3、 删除元素

del list[0] 知道元素在列表中的位置，可以使用 del

list.pop() 删除列表末尾的元素

list.pop(0) 弹出列表中任何位置处的元素

list.remove(‘lalallalal’) 根据值来删除元素

4、 组织排序

list.sort()对列表进行永久性排序

sorted(list) 对列表进行临时性排序

list.reverse() 反转列表中的值

len(list)确定列表的长度

5、 遍历整个列表 for…in…

6、 创建数值列表 range(1,5) #[1, 2, 3, 4]

计算 min、max、sum

7、使用列表的一部分 - 创建切片 list[1:4] 提取出 list[1]、list[2]、list[3]

8、 复制列表 list[:]

3、元组 –不可变的列表（不可修改元组内的元素，可以修改元组变量），使用方括号标识

1、遍历元组中的值 for….in….

2、设计代码格式

python 用缩进而不是{}标识代码块

4、if 语句

if message == true

1、相等（==）和不相等（!=）

2、检查 多个条件 使用 and 或 or

3、不同的 if 语句

if、if-else、if- elif-else、if-elif-elif-elif-else、省略 else（python 并不要求 if-elif 后面必须要有 else）

5、字典 – 在 python 中，字典是一系列键-值对（键必须是唯一的），用{}来表示。

1、 访问字典中的值 dic[‘key’]

2、删除键值对 del dic[‘key’]

3、 遍历字典-遍历键值对时，键值对的返回顺序与存储顺序不同，python 不关心键值对的存储顺序，只跟踪键和值之间的关联关系

for key,value in dic.items() 遍历键-值对

for name in dic.keys() 遍历所有键

for name in sorted(dic.keys()) 按顺序遍历字典中的所有键

for language in dic.values() 遍历字典中的所有值

for language in set(dic.values()) 遍历字典中的所有值，使用 set()获取所有唯一值（去掉重复值）

4、嵌套

字典列表

在字典中存储列表

在字典中存储字典

6、用户的输入和 while 循环

1、 input() 让程序暂停运行，等待用户输入一些文本；python 将用户的输入解读为字符串

2、 int() 获取数值输入

3、求模运算符 % 将两个数相除并返回它的余数

4、 while 循环

7、函数

def foo(name)

print(name)

foo(‘jiangjing’)

1、形参(name) –函数完成工作所需要的一项信息

2、实参(‘jiangjing’) –调用函数时传递给函数的信息

3、关键字实参 传递给函数的名称-值对

4、 形参指定默认值

5、 传递任意数量的实参 def foo(*names)

6、将 函数存储在模块中

比如在 test.py 文件中构建函数：

def getColor(colors):

for color in colors:

print(colors)

在文件中引用它：

import test

test.getColor([‘green’, ‘’red’])

7、 导入特定的函数

from module_name inport function_1,function_2

8、用 as 给函数指定别名

from module_name inport function_1 as foo

9、用 as 给模块指定别名

import test as myTest

10、导入模块中的所有函数

from test import *

使用模块中的函数 test()

8、类

1、 创建一个类

class Dog()

def _init_(self,name,age):

self.name = name

self.age = age

def sit(self)

print(self.name.title())

使用：

myDog = Dog(‘willie’, 6)

2、使用类和 实例

3、 继承

4、 导入类

5、python 标准库

9、文件

1、 从文件中读取数据

with open(‘test.txt’) as file_object:

contents = file_object.read

print(contents)

2、 逐行读取

with open(test.txt) as file_object:

for line in file_object:

print(line)

3、 写入空文件

with open(test.txt, ‘w’) as file_object:

file_object.write(‘I love programming’)

1、打开文件时，可指定读取模式（’r’）、写入模式（’w’）、附加模式（’a’）或者能读取和写入模式（’r+’）,如果你忽略了实参，python 将以默认的只读模式打开文件。

2、如果你要写入的文件不存在，函数 open()将自动创建它。

3、以写入模式（’w’）打开文件时要注意，如果指定的文件已经存在，python 将在返回对象时清空该文件。

4、python 只能将字符串写入文本文件。

4、 附加到文件

如果要给文件添加内容，而不是覆盖原有内容，可以使用附加模式打开文件，这样写入的行都会添加到文件末尾。

如果指定的文件不存在，python 将会为你创建一个空文件。

10、异常

python 使用被称为异常 的对象来管理程序执行期间发生的错误

1、处理 ZeroDivisionError 异常

try-except 代码块

2、处理 FileNotFoundError 异常

try-except 代码块

3、 存储数据和重构

11、测试代码

单元测试用于核实函数的某个方面没有问题， 测试用例是一组单元测试

浏览器缓存保存着用户通过 HTTP 获取的所有资源，在下一次请求时可以避免向服务器发出多余的请求

浏览器的缓存分为两类：强缓存、协商缓存（对比缓存）。

浏览器在第一次请求发生后，再次请求时：
1、浏览器会先获取该资源缓存的 header 信息，根据其中的 expires 和 cahe-control 判断是否命中强缓存，若命中则直接从缓存中获取资源，包括缓存的 header 信息，本次请求不会与服务器进行通信；
2、如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的 header 字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match）,由服务器根据请求中的相关 header 信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应 header 信息更新缓存中的对应 header 信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容

强缓存：
1、查看该资源缓存的 header 头中的 Expire 和 Cache-control 来判断是否满足规则；
Expire：HTTP/1.0 规范
表示缓存到期时间，值为一个绝对时间的 GMT 格式时间的字符串
缺点：是一个绝对时间，修改客户端的本地时间，缓存失效？
Cache-control：HTTP/1.1 新增字段
_ no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在 ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
_ no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
_ public：默认设置。可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。
_ private：不能被多用户共享。只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存。 * max-age：表示资源缓存的最大有效时间，相对时间。单位为秒
Cache-control 优先级高于 Expire
2、如果满足规则，就返回缓存的数据
3、如果不满足规则，就向服务器发送请求
4、服务器返回数据
5、将新数据存入缓存

协商缓存：
当强缓存没有命中时，浏览器会发送一个请求到服务器，服务器根据请求中的部分信息来判断是否命中缓存。如果命中，则返回 304，告诉浏览器资源未更新，可使用本地缓存。
1、把资源标识，比如 If-Modify-Since 或 Etag 发送到服务器，确认资源是否更新
Last-Modify/If-Modify-Since:
浏览器第一次请求一个资源的时候，服务器返回的 header 中会加上 Last-Modify，Last-modify 是一个时间标识该资源的最后修改时间，例如 Last-Modify: Thu,31 Dec 2037 23:59:59 GMT.
当浏览器再次请求该资源时，request 的请求头中会包含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。
如果命中缓存，则返回 304，并且不会返回资源内容，并且不会返回 Last-Modify。
ETag/If-None-Match：
Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。
与 Last-Modified 不一样的是，当服务器返回 304 Not Modified 的响应时，由于 ETag 重新生成过，response header 中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化。
两者使用原因：

• 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新 GET；
• 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说 1s 内修改了 N 次)，If-Modified-Since 能检查到的粒度是 s 级的，这种修改无法判断(或者说 UNIX 记录 MTIME 只能精确到秒)
• 某些服务器不能精确的得到文件的最后修改时间。
  Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证 ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回 304。
  2、如果资源未更新，请求响应返回的 http 状态为 304 并且显示一个 Not Modified 字符串，告诉浏览器使用本地缓存。
  3、如果资源已经更新，返回新的数据
  4、将新的数据存入缓存

另外：
请求头里的 Cache-Control 是 no-cache，表示不读取浏览器缓存数据。
响应头中的 Cache-Control 是 no-cache 是通知浏览器，不要缓存
以上的该资源缓存的 header 信息是指浏览器缓存请求中的响应头中的 Cache-Control

1、HTTP/0.9

最早版本是 1991 年发布的 0.9 版。该版本极其简单，只有一个命令 GET。

GET /index.html
表示，TCP 连接（connection）建立后，客户端向服务器请求（request）网页 index.html。
协议规定，服务器只能回应 HTML 格式的字符串，不能回应别的格式。服务器发送完毕，就关闭 TCP 连接。

2、HTTP/1.0

1996 年 5 月，HTTP/1.0 版本发布，内容大大增加。
任何格式的内容都可以发送；引入了 POST 命令和 HEAD 命令；HTTP 请求和回应的格式也变了，除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据；其他的新增功能还包括状态码（status code）、多字符集支持、多部分发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等。

请求格式：
GET / HTTP/1.0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10*10_5)
Accept: */_
第一行是请求命令，必须在尾部添加协议版本（HTTP/1.0）。后面就是多行头信息，描述客户端的情况。

回应格式：
HTTP/1.0 200 OK
Content-Type: text/plain
Content-Length: 137582
Expires: Thu, 05 Dec 1997 16:00:00 GMT
Last-Modified: Wed, 5 August 1996 15:55:28 GMT
Server: Apache 0.84

1
2
3
4
5

<html>
  <body>
    Hello World
  </body>
</html>

回应的格式是”头信息 + 一个空行（\r\n） + 数据”。其中，第一行是”协议版本 + 状态码（status code） + 状态描述”。

Content-Type：
关于字符的编码，1.0 版规定，头信息必须是 ASCII 码，后面的数据可以是任何格式。因此，服务器回应的时候，必须告诉客户端，数据是什么格式，这就是 Content-Type 字段的作用。

• text/plain
• text/html
• text/css
• image/jpeg
• image/png
• image/svg+xml
• audio/mp4
• video/mp4
• application/javascript
• application/pdf
• application/zip
• application/atom+xml
  这些数据类型总称为 MIME type，每个值包括一级类型和二级类型，之间用斜杠分隔。
  MIME type 还可以在尾部使用分号，添加参数。Content-Type: text/html; charset=utf-8 表明，发送的是网页，而且编码是 UTF-8。
  客户端请求的时候，可以使用 Accept 字段声明自己可以接受哪些数据格式。Accept: / 表示，客户端声明自己可以接受任何格式的数据。

Content-Encoding：
由于发送的数据可以是任何格式，因此可以把数据压缩后再发送。Content-Encoding 字段说明数据的压缩方法。

• Content-Encoding: gzip
• Content-Encoding: compress
• Content-Encoding: deflate
  客户端在请求时，用 Accept-Encoding 字段说明自己可以接受哪些压缩方法。Accept-Encoding: gzip, deflate

HTTP/1.0 版的主要缺点是，每个 TCP 连接只能发送一个请求。发送数据完毕，连接就关闭，如果还要请求其他资源，就必须再新建一个连接。
为了解决这个问题，有些浏览器在请求时，用了一个非标准的 Connection 字段。Connection: keep-alive 表示，要求服务器不要关闭 TCP 连接，以便其他请求复用。服务器同样回应这个字段。但是，这不是标准字段，不同实现的行为可能不一致，因此不是根本的解决办法。

3、HTTP/1.1

1997 年 1 月，HTTP/1.1 版本发布，只比 1.0 版本晚了半年。它进一步完善了 HTTP 协议，一直用到了 20 年后的今天，直到现在还是最流行的版本。

1.1 版的最大变化，就是引入了持久连接（persistent connection），即 TCP 连接默认不关闭，可以被多个请求复用，不用声明 Connection: keep-alive。目前，对于同一个域名，大多数浏览器允许同时建立 6 个持久连接。

1.1 版还引入了管道机制（pipelining），即在同一个 TCP 连接里面，客户端可以同时发送多个请求。这样就进一步改进了 HTTP 协议的效率。举例来说，客户端需要请求两个资源。以前的做法是，在同一个 TCP 连接里面，先发送 A 请求，然后等待服务器做出回应，收到后再发出 B 请求。管道机制则是允许浏览器同时发出 A 请求和 B 请求，但是服务器还是按照顺序，先回应 A 请求，完成后再回应 B 请求。

Content-length：
一个 TCP 连接现在可以传送多个回应，势必就要有一种机制，区分数据包是属于哪一个回应的。这就是 Content-length 字段的作用，声明本次回应的数据长度。
Content-Length: 3495 表示，告诉浏览器本次回应的长度是 3495 个字节，后面的字节就属于下一个回应了。
在 1.0 版中，Content-Length 字段不是必需的，因为浏览器发现服务器关闭了 TCP 连接，就表明收到的数据包已经全了。

Transfer-Encoding：
对于一些很耗时的动态操作来说，这意味着，服务器要等到所有操作完成，才能发送数据，显然这样的效率不高。更好的处理方法是，产生一块数据，就发送一块，采用”流模式”（stream）取代”缓存模式”（buffer）。只要请求或回应的头信息有 Transfer-Encoding 字段，就表明回应将由数量未定的数据块组成。
Transfer-Encoding: chunked

1.1 版还新增了许多动词方法：PUT、PATCH、HEAD、 OPTIONS、DELETE。

另外，客户端请求的头信息新增了 Host 字段，用来指定服务器的域名。有了 Host 字段，就可以将请求发往同一台服务器上的不同网站，为虚拟主机的兴起打下了基础。

虽然 1.1 版允许复用 TCP 连接，但是同一个 TCP 连接里面，所有的数据通信是按次序进行的。服务器只有处理完一个回应，才会进行下一个回应。要是前面的回应特别慢，后面就会有许多请求排队等着。这称为”队头堵塞”（Head-of-line blocking）。

为了避免这个问题，只有两种方法：一是减少请求数，二是同时多开持久连接。这导致了很多的网页优化技巧，比如合并脚本和样式表、将图片嵌入 CSS 代码、域名分片（domain sharding）等等。如果 HTTP 协议设计得更好一些，这些额外的工作是可以避免的。

4、SPDY 协议

2009 年，谷歌公开了自行研发的 SPDY 协议，主要解决 HTTP/1.1 效率不高的问题。这个协议在 Chrome 浏览器上证明可行以后，就被当作 HTTP/2 的基础，主要特性都在 HTTP/2 之中得到继承。

5、 HTTP/2

2015 年，HTTP/2 发布。它不叫 HTTP/2.0，是因为标准委员会不打算再发布子版本了，下一个新版本将是 HTTP/3。

HTTP/1.1 版的头信息肯定是文本（ASCII 编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为”帧”（frame）：头信息帧和数据帧。

多工：
HTTP/2 复用 TCP 连接，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，而且不用按照顺序一一对应，这样就避免了”队头堵塞”。
举例来说，在一个 TCP 连接里面，服务器同时收到了 A 请求和 B 请求，于是先回应 A 请求，结果发现处理过程非常耗时，于是就发送 A 请求已经处理好的部分， 接着回应 B 请求，完成后，再发送 A 请求剩下的部分。
这样双向的、实时的通信，就叫做多工（Multiplexing）。

数据流：
因为 HTTP/2 的数据包是不按顺序发送的，同一个连接里面连续的数据包，可能属于不同的回应。因此，必须要对数据包做标记，指出它属于哪个回应。
HTTP/2 将每个请求或回应的所有数据包，称为一个数据流（stream）。每个数据流都有一个独一无二的编号。数据包发送的时候，都必须标记数据流 ID，用来区分它属于哪个数据流。另外还规定，客户端发出的数据流，ID 一律为奇数，服务器发出的，ID 为偶数。
数据流发送到一半的时候，客户端和服务器都可以发送信号（RST_STREAM 帧），取消这个数据流。1.1 版取消数据流的唯一方法，就是关闭 TCP 连接。这就是说，HTTP/2 可以取消某一次请求，同时保证 TCP 连接还打开着，可以被其他请求使用。
客户端还可以指定数据流的优先级。优先级越高，服务器就会越早回应。

头信息压缩：
HTTP/2 对这一点做了优化，引入了头信息压缩机制（header compression）。一方面，头信息使用 gzip 或 compress 压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就提高速度了。

HTTP/2 允许服务器未经请求，主动向客户端发送资源，这叫做服务器推送

语言处理器大致分为解释器和编译器

解释器：用于执行程序的软件。如果执行的程序由虚拟机器语言或类似的机器语言写成，这种软件也能称为虚拟机。

编译器：能将某种语言写成的程序转换成另一种语言的程序

通常，Java 语言首先会通过编译器将源代码转换为 Java 二进制代码，并将这种虚拟的机器语言保存在文件中，之后，Java 虚拟机的解释器将执行这段代码。

不过，大多数 Java 虚拟机为了提高性能，会在执行过程中通过编译将一部分 Java 二进制代码直接转换成机器语言使用（这个过程称为动态编译或 JIT 编译）。转换后的机器语言将被载入内存，有硬件执行，无需解释器。

现代解释器内部常采用各种类型的编译器。

语言处理器内部的处理流程

源代码 —- 词法分析 -—> 单词排列 —- 语法分析 -— > 抽象语法树 —- 编译器/解释器 -— >其他语言程序/程序执行结果。

设计 Stone 语言的语法规则

分割单词

语言处理器的第一个组成部分是词法分分析器，将字符串中的字符以单词为单位分组，切割成多个子字符串。

借助 Java 语言来设计 Stone 语言的处理器

1、设计词法分析器。考虑每一种类型的单词的定义，规定怎样的字符串才能构成 一个单词

Stone 语言支持三种类型的单词：标识符、整型字面量、字符串字面量。

借助正则表达式来定义 Stone 语言的单词：

整型字面量：[0-9]+。从 0-9 中取出一个数字

标识符：

至少需要一个字母、数字或下划线，且首字母不能是数字：[A-Z_a-z][A-Z_a-z0-9]*

Stone 语言的标识符包括各类符号，所以完整的标识符规则：[A-Z a-[A-Z a–9 *|==|<=|>=|&&|\|\||\p{Punc。其中 \ p{Punc}表示与任意一个符号字符匹配

字符串字面量：”(\\“ |\\\\|\\n|[^” )*“ 。Java 中两个反斜杠代表\，因此\\\\表示匹配一个\。

用于表示程序的对象

1、抽象语法树定义

• 语言处理器在词法分析阶段将程序分割为单词后，将开始构造抽象语法树。

• 抽象语法树 (AST，Abstract Syntax Tree)是一种用于表示程序结构的树形结构。构造抽象语法树的过程称为语法分析，依然属于语言处理器的前半阶段。其主要任务是分析单词之间的关系，如判断哪些单词属于同一个表达式或语句，以及处 理左右括号(单词)的配对等问题。

• 语法分析的结果能够通过抽象语法树来表示。这一阶段还会 检查程序中是否含有语法错误。

本书使用 Java 语言来实现语言处理器，因此选择通过对象与树形结构来表示程序结构。如果用于实现的不是面向对象语言，表示树形结构的方法也会有所不同。如果是 C 语言，则会使 用结构体;如果是 Scheme 语言，则会使用列表。

2、使用 BNF(巴科斯范式 )或铁路图表示语法

语法规定了单词的组合规则，例如，双目运算表达式应该由哪些单词组成，或是 if 语句 应该具有怎样的结构等。而程序设计语言的语法通常会包含诸如 if 语句的执行方式，或通 过 extends 继承类时将执行哪些处理等规则。

BNF 是 JohBackus 为表达 Algol 语言的语法而设计的，不过最后大家发现它能用于表达语 言学领域中的 Noam Chomsky 上下文无关文法。

在 BNF 的表达规则中，

: 左侧所写的内容能够用于表示与在 : 右侧所写的模式相匹配的单词序列。

例如上图第 1 行的规则中，factor(因子)意指与右侧模式匹配的单词序 列。: 左侧出现的诸如 factor 这样的符号称为非终结符或元变量。

与非终结符相对的是终结符，它们是一些事先规定好的符号，表示各种单词。 : 右侧的模式中也包含了若干个终结符或非终结符。

例如上图第 1 行的规则中，factor 能表示 NUMBER(1 个整型字面量单词)，或 由左括号、 expression(表达式)及右括号依次排列而成的单词序列。 expression 是一个非终结符，第 3 行对其下了定义。因此，由左括号、与 expression 匹配的单词序列，及右括号这些单词组成的单词序列能与 factor 模式匹配。

也就是说，与该模式匹配的单词序列就是一个 expression。反之，如果单词序列与模式 expression 不匹配，则会发生语法错误(syntax error)。

模式中包含非终结符是 BNF 的特征之一。具有循环结构的递归定义 也是 BNF 的一个特征。

人们有时会用铁路图而不是 BNF 来表示语法规则。图中的圆圈表示终结符，矩形表示非终结符。箭头的分支与 合并表示模式的循环出现或“or ”的含义。

3、语法分析与抽象语法树

语法分析用于查找与模式匹配的单词序列。查找得到的单词序列是一个具有特定含义的单词组。 分组后的单词能继续与其他单词组一起做模式匹配，组成更大的分组。

通常，抽象语法树用于表示语法分析的 结果，因此需要表现出这些分组之间的包含关系。

什么是 Promise

1、Promise 最初提出是在 E 语言中，它是基于并列/并行处理设计的一种编程语言。

Node.js 等规定 JavaScript 的回调函数的第一个参数为 Error 对象，这是它的一个惯例。

而 Promise 则是把类似的异步处理对象和处理规则进行规范化，并采用统一的接口编写，而采用规定方法之外的写法都会报错。

2、Promise 的三种状态：Pending、Fulfilled、Rejected

实战 Promise

1、Promise.resolve(value)和 promise.reject(error)，new Promise()方法的快捷方式

2、使用 Promise 可以避免同时使用同步、异步调用可能引起的混乱问题

3、Promise chain，关注 Promise 的执行顺序。

Promise#then 不仅注册一个回调函数，它还会将回调函数的返回值进行变换，创建并返回一个 Promise 对象。

4、Promise.all 接收一个 Promise 对象的数组作为参数，当数组里的所有 Promise 对象全部变为 resolve 或 reject 时，才会去调用.then 方法

5、Promise.race 只要有一个 promise 对象进入 resolve 或 reject 状态，就会进行后面的处理。

6、使用.then 还是使用.catch：

.then 方法中的 onRejected 参数所指定的回调函数，实际上针对的是其 promise 对象或者之前的 promise 对象，而不是针对.then 方法里面指定的第一个参数，即 onFulfilled 所指向的对象，因此使用.catch 效果更好。

advanced

1、Promise 的实现类库

如果说一个类库兼容 Promises/A+ 的话，那么就是说它除了具有标准的 then 方法之外，很多情况下也说明此类库还支持 Promise.all 和 catch 等功能。

如果我们说一个类库具有 then 兼容性的话，实际上指的是 Thenable ，它通过使用 Promise.resolve 基于 ES6 Promise 的规定，进行 promise 对象的变换。

2、Promise.resolve 的最大特征之一就是可以将 thenable 的对象转换为 promise 对象。

Thenable 风格表现为位于回调和 Promise 风格中间的一种状态，作为类库的公开 API 有点不太成熟，所以并不常见。

Thenable 本身并不依赖于 Promise 功能，但是 Promise 之外也没有使用 Thenable 的方式，所以可以认为 Thenable 间接依赖于 Promise。

3、使用 reject 而不是 throw

在 Promise 中使用 throw 语句的话，很难区分 throw 是我们主动抛出来的，还是因为真正的其它 异常 导致的。

在 then 中使用 reject 的方法，返回的是 promise 对象，那么根据这个 promise 对象的状态，在下一个 then 中注册的回调函数中的 onFulfilled 和 onRejected 的哪一个会被调用也是能确定的。

4、使用 Promise.race 和 delay 取消 XHR 请求

经过一定时间后变为解决状态的 delayPromise

基于 delayPromise 和 Promise.race 的超时实现方式

取消 XHR promise 请求（abort）

通过模块化实现 promise 对象和操作的分离

5、什么是 Promise.prototype.done

ES6 Promises 和 Promises/A+等在设计上并没有对 Promise.prototype.done 做出任何规定，但是很多实现类库都提供了该方法的实现。

done 并不返回 promise 对象，也就是说，在 done 之后不能使用 catch 等方法组成方法链。

done 中发生的异常会被直接抛给外面，也就是说，不会进行 Promise 的错误处理（Error Handling）。

由于 done 不会返回 promise 对象，所以我们不难理解它只能出现在一个方法链的最后。

此外，我们已经介绍过了 Promise 具有强大的错误处理机制，而 done 则会在函数中跳过错误处理，直接抛出异常。

Promises API Reference

1、Promise#then

promise 对象会在变为 resolve 或者 reject 的时候分别调用相应注册的回调函数。

当处理 onFulfilled 和 onRejected 的函数（handler）返回一个正常值的时候，这个值会传递给 promise 对象的 onFulfilled 方法。

当处理 onFulfilled 和 onRejected 的函数（handler）中产生异常的时候，这个值则会传递给 promise 对象的 onRejected 方法。

2、Promise#catch

一个等价于 promise.then(undefined, onRejected) 的语法糖。

3、Promise.resolve

根据接收到的参数不同，返回不同的 promise 对象。

虽然每种情况都会返回 promise 对象，但是大体来说主要分为下面 3 类：

接收到 promise 对象参数的时候，返回的还是接收到的 promise 对象

接收到 thenable 类型的对象的时候，返回一个新的 promise 对象，这个对象具有一个 then 方法

接收的参数为其他类型的时候（包括 JavaScript 对或 null 等），返回一个将该对象作为值的新 promise 对象

4、Promise.reject

返回一个使用接收到的值进行了 reject 的新的 promise 对象。

而传给 Promise.reject 的值也应该是一个 Error 类型的对象。

5、Promise.all

生成并返回一个新的 promise 对象。

参数传递 promise 数组中所有的 promise 对象都变为 resolve 的时候，该方法才会返回， 新创建的 promise 则会使用这些 promise 的值。

如果参数中的任何一个 promise 为 reject 的话，则整个 Promise.all 调用会立即终止，并返回一个 reject 的新的 promise 对象。

由于参数数组中的每个元素都是由 Promise.resolve 包装（wrap）的，所以 Paomise.all 可以处理不同类型的 promose 对象。

6、Promise.race

生成并返回一个新的 promise 对象。

参数 promise 数组中的任何一个 promise 对象如果变为 resolve 或者 reject 的话， 该函数就会返回，并使用这个 promise 对象的值进行 resolve 或者 reject。

MDN CORS：规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

当请求满足下述任一条件时，即应首先发送预检请求：
1、使用了下面任一 HTTP 方法：

• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
• PATCH
  2、人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：
• Accept
• Accept-Language
• Content-Language
• Content-Type (需要注意额外的限制)
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width
  3、Content-Type 的值不属于下列之一:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
  4、请求中的 XMLHttpRequestUpload 对象注册了任意多个事件监听器。
  5、请求中使用了 ReadableStream 对象。

OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响。 预检请求中同时携带了下面两个首部字段：
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。首部字段 Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。

OPTIONS 请求方法的主要用途有两个：
1、获取服务器支持的 HTTP 请求方法；
2、用来检查服务器的性能。例如：AJAX 进行跨域请求时的预检，需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，用以判断实际发送的请求是否安全。

JavaScript 的简单类型包括数字、字符串、布尔值（true 和 false）、null 值和 undefined 值。数字、字符串和布尔值貌似对象，因为它们拥有方法

其它所有值都是对象，javascript 中的对象是可变的键控集合，数组、函数、正则表达式都是对象

字面量对象中的属性名可以是包括字符串在内的任何字符串

对象通过引用来传递，永远不会被拷贝

每个对象都连接到一个原型对象，并从中继承属性。所有通过字面量创建的对象都连接到 Object.prototype 这个 JavaScript 中的标准对象

在 JavaScript 中有四种调用模式：方法调用模式、函数调用模式、构造器调用模式和 apply 调用模式。当实际参数的个数与形式参数的个数不匹配时不会导致运行错误

方法调用模式：当一个函数保存为对象的一个属性时，我们称之为方法。方法调用时，this 绑定为该对象

回调：

例如：

1
2
3

request = prepare_the_request();
response = send_request_synchronously(request);
display(response);

网络上的同步请求会导致客户端进入假死状态。如果网络传输或服务器很慢，响应的降低是不可接受的

利用异步请求，提供一个当服务器的相应响应到达时被调用的回调函数，异步的函数立即返回，这样浏览器不会被阻塞

1
2
3
4

request = prepare_the_request();
send_request_asynchronously{request,function(response){
    display(reponse);
}};

目前比较全的 CSS 重设(reset)方法总结
在当今网页设计/开发实践中，使用 CSS 来为语义化的(X)HTML 标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有 CSS 规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多 CSS 样式在不同的浏览器中有着不同的解释和呈现。

当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari 等等)中，有一些都是以自己的方式去理解 CSS 规范，这就会导致有的浏览器对 CSS 的解释与设计师的 CSS 定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视 CSS 的一些声明和属性。

正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是 CSS Reset，什么是 CSS Reset？我们可以把它叫做 CSS 重设，也有人叫做 CSS 复位、默认 CSS、CSS 重置等。CSS 重设就是由于各种浏览器解释 CSS 样式的初始值有所不同，导致设计师在没有定义某个 CSS 属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些 CSS 样式，来让所有浏览器都按照同样的规则解释 CSS，这样就能避免发生这种问题。

一.最简化的 CSS Reset(重设) :

1
2
3
4

 {
  padding: 0;
  margin: 0;
}

这是最普遍最简单的 CSS 重设，将所有元素的 padding 和 margin 值都设为 0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

1
2
3
4
5

 {
  padding: 0;
  margin: 0;
  border: 0;
}

这是在上一个重设的基础上添加了对 border 属性的重设，初始值为 0 的确能避免一些问题。

1
2
3
4
5
6

 {
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

在前两个的基础上添加了 outline 属性的重设，防止一些冲突。

二.浓缩实用型 CSS Reset(重设):

1
2
3
4
5
6
7
8
9
10
11

 {
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

该 CSS 重设方法出自 Perishable Press，这是他常用的方法。

三.Poor Man 的 CSS Reset:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

html,
body {
  padding: 0;
  margin: 0;
}
html {
  font-size: 1em;
}
body {
  font-size: 100%;
}
a img,
:link img,
:visited img {
  border: 0px;
}

这个重设方法将 html 和 body 下元素的 padding 和 margin 都设为 0，并分别为 html 标签和 body 标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

 {
  vertical-align: baseline;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: none;
  padding: 0;
  margin: 0;
}
body {
  padding: 5px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
form,
ul,
ol,
dl {
  margin: 20px 0;
}
li,
dd,
blockquote {
  margin-left: 40px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

五.Shaun Inman’s Global Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
table,
th,
td,
embed,
object {
  padding: 0;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img,
abbr {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
th,
var {
  font-weight: normal;
  font-style: normal;
}
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
}
q:before,
q:after {
  content: ”;
}
a,
ins {
  text-decoration: none;
}

六.Yahoo(YUI) CSS Reset:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-weight: normal;
  font-style: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}
q:before,
q:after {
  content: ”;
}
abbr,
acronym {
  border: 0;
}

七.Eric Meyer’s CSS Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

html,
body,
div,
span,
applet,
object,
iframe,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
:focus {
  outline: 0;
}
body {
  background: white;
  line-height: 1;
  color: black;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  font-weight: normal;
  text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: “”;
}
blockquote,
q {
  quotes: “” “”;
}

八.condensedmeyerreset:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
}
fieldset,
img {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ol,
ul {
  list-style: none;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-weight: normal;
  font-style: normal;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}
q:before,
q:after {
  content: ”;
}
abbr,
acronym {
  border: 0;
}

九.Ateneu Popular CSS Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
th,
td {
  text-align: left;
  font-weight: normal;
}
img,
iframe {
  border: none;
  text-decoration: none;
}
ol,
ul {
  list-style: none;
}
input,
textarea,
select,
button {
  font-size: 100%;
  font-family: inherit;
}
select {
  margin: inherit;
}
hr {
  margin: 0;
  padding: 0;
  border: 0;
  color: #000;
  background-color: #000;
  height: 1px;
}

十.Chris Poteet’s Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

html {
  vertical-align: baseline;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: none;
  padding: 0;
  margin: 0;
}
body {
  padding: 5px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
form,
ul,
ol,
dl {
  margin: 20px 0;
}
li,
dd,
blockquote {
  margin-left: 40px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

十一.Tantek Celik Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

link:visited {
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code {
  font-size: 1em;
}
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
body,
html,
p,
blockquote,
fieldset,
input {
  margin: 0;
  padding: 0;
}
a img,
:link img,
:visited img {
  border: none;
}
address {
  font-style: normal;
}

十二.Christian Montoya Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

html,
body,
form,
fieldset {
  margin: 0;
  padding: 0;
  font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
ul,
ol,
dl,
address {
  margin: 1em 0;
  padding: 0;
}
li,
dd,
blockquote {
  margin-left: 1em;
}
form label {
  cursor: pointer;
}
fieldset {
  border: none;
}
input,
select,
textarea {
  font-size: 100%;
  font-family: inherit;
}

十三.Rudeworks Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

html {
  font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
  text-shadow: #000 0px 0px 0px;
}
ul {
  list-style: none;
  list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
ul,
ol,
dl,
address {
  font-weight: normal;
  margin: 0 0 1em 0;
}
cite,
em,
dfn {
  font-style: italic;
}
sup {
  position: relative;
  bottom: 0.3em;
  vertical-align: baseline;
}
sub {
  position: relative;
  bottom: -0.2em;
  vertical-align: baseline;
}
li,
dd,
blockquote {
  margin-left: 1em;
}
code,
kbd,
samp,
pre,
tt,
var,
input[type="text"],
textarea {
  font-size: 100%;
  font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
  text-decoration: line-through;
}
ins,
dfn {
  border-bottom: 1px solid #ccc;
}
small,
sup,
sub {
  font-size: 85%;
}
abbr,
acronym {
  text-transform: uppercase;
  font-size: 85%;
  letter-spacing: 0.1em;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
}
a abbr,
a acronym {
  border: none;
}
sup {
  vertical-align: super;
}
sub {
  vertical-align: sub;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.6em;
}
h4 {
  font-size: 1.4em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 1em;
}
a,
a:link,
a:visited,
a:hover,
a:active {
  outline: 0;
  text-decoration: none;
}
a img {
  border: none;
  text-decoration: none;
}
img {
  border: none;
  text-decoration: none;
}
label,
button {
  cursor: pointer;
}
input:focus,
select:focus,
textarea:focus {
  background-color: #fff;
}
fieldset {
  border: none;
}
.clear {
  clear: both;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
body {
  text-align: center;
}
#wrapper {
  margin: 0 auto;
  text-align: left;
}

十四. Anieto2K Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
center,
u,
b,
i {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
:focus {
  outline: 0;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: “”;
}
blockquote,
q {
  quotes: “” “”;
}
input,
textarea {
  margin: 0;
  padding: 0;
}
hr {
  margin: 0;
  padding: 0;
  border: 0;
  color: #000;
  background-color: #000;
  height: 1px;
}

十五.CSSLab CSS Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
a img,
iframe {
  border: none;
}
ol,
ul {
  list-style: none;
}
input,
textarea,
select,
button {
  font-size: 100%;
  font-family: inherit;
}
select {
  margin: inherit;
}
/_ Fixes incorrect placement of numbers in ol’s in IE6/7 _/ ol {
  margin-left: 2em;
}
/_ == clearfix == _/ .clearfix:after {
  content: “.”;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}

- html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}

好了，CSS 重设目前先总结到这里，这 15 套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有了这些 CSS 重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套 CSS 重设。

本文主要展示的是 gulp 常用插件的使用方法和用途，通过对插件的熟练运用达到精通 gulp。

What is gulp?

gulp 是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp 是基于 Nodejs 的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了 Unix 操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

匹配符 *、**、！、{}

1
2
3
4
5

gulp.src("./js/*.js"); // * 匹配js文件夹下所有.js格式的文件
gulp.src("./js/**/*.js"); // ** 匹配js文件夹的0个或多个子文件夹
gulp.src(["./js/*.js", "!./js/index.js"]); // ! 匹配除了index.js之外的所有js文件
gulp.src("./js/**/{omui,common}.js"); // {} 匹配{}里的文件名
文件操作;

del (替代 gulp-clean)

1
2

var del = require("del");
del("./dist"); // 删除整个 dist 文件夹

gulp - rename;
描述：重命名文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var rename = require("gulp-rename");

gulp
  .src("./hello.txt")
  .pipe(rename("gb/goodbye.md")) // 直接修改文件名和路径
  .pipe(gulp.dest("./dist"));

gulp
  .src("./hello.txt")
  .pipe(
    rename({
      dirname: "text", // 路径名
      basename: "goodbye", // 主文件名
      prefix: "pre-", // 前缀
      suffix: "-min", // 后缀
      extname: ".html", // 扩展名
    })
  )
  .pipe(gulp.dest("./dist"));

gulp - concat;
描述：合并文件。

1
2
3
4
5
6
7
8
9
10
11

var concat = require("gulp-concat");

gulp
  .src("./js/*.js")
  .pipe(concat("all.js")) // 合并 all.js 文件
  .pipe(gulp.dest("./dist"));

gulp
  .src(["./js/demo1.js", "./js/demo2.js", "./js/demo2.js"])
  .pipe(concat("all.js")) // 按照[]里的顺序合并文件
  .pipe(gulp.dest("./dist"));

gulp - filter;
描述：在虚拟文件流中过滤文件。