一、js
0、基础语法
在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。
原始类型称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈(stack)中(按值访问)。为了便于操作这类数据，ECMAScript 提供了 3 个基本包装类型：Boolean、Number 和 String 。基本包装类型是一种特殊的引用类型，每当读取一个基本类型值的时候，JS内部就会创建一个对应的包装对象，从而可以调用一些方法来操作这些数据。
引用类型由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度，因此其存储在堆(heap)中，存储在变量处的值是一个指针，指向存储对象的内存处(按址访问)，对于引用类型的值，可以为其添加属性和方法，也可以改变和删除其属性和方法；但基本类型不可以添加属性和方法。
Javascript 可以通过 typeof 来判断原始数据类型，但不能判断引用类型，要知道引用类型的具体类型，需要通过 Object 原型上的 toString 方法来判断
JS中的函数存在着三种角色：普通函数、构造函数、对象方法。同一个函数，调用方式不同，函数的作用不一样，所扮演的角色也不一样。直接调用时就是普通函数，通过new创建对象时就是构造函数，通过对象调用时就是方法。
1、函数原型链
JS是一种基于对象的语言，但在ES6 之前是不支持继承的，为了具备继承的能力，Javascript 在函数对象上建立了原型对象 prototype，并以函数对象为主线，从上至下，在JS内部构建了一条原型链。原型链把一个个独立的对象联系在一起，Object 则是所有对象的祖宗， 任何对象所建立的原型链最终都指向了Object，并以 Object 终结。
简单来说，就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到 Object 对象为止，如果都没有找到该属性才会返回 undefined。因此，我们可以通过原型链来实现继承机制。
2、函数作用域
在 JavaScript 中，没有块级作用域，只有函数作用域，也就是说 if、while、for 语句不会形成独立的作用域。但有一个特殊情况，即 with 语句和 catch 语句会形成临时作用域，语句执行结束后，该作用域就会被释放。
3、this 指针
无论什么函数，this 是否被改变， 本质上，this 均指向触发函数运行时的那个对象。而在函数运行时，this 的值是不能被改变的。
4、new 操作符
函数的创建有三种方式，即 显式声明、匿名定义 和 new Function() 。前面提到，JS 中的函数即可以是函数，也可以是方法，还可以是构造函数。当使用new来创建对象时，该函数就是构造函数，JS 将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型 prototype 中的方法和属性。
5、单线程与事件循环
Javascript 是单线程语言。在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务，主线程会在栈中创建一个全局执行环境 （全局作用域）。每当有一个函数进入执行流时，就会形成一个对应的执行环境（函数作用域），并将该执行环境压入栈中。每当一个函数执行完毕以后，对应的执行环境就会从栈中弹出，然后被销毁。这就是执行环境栈，执行环境栈的作用就是保证所有的函数能按照正确的顺序被执行。
但在浏览器中，有一些任务是非常耗时的，比如 ajax请求、定时器、事件等。为了保证主线程任务不受影响，Javascript 内部维护了一个任务队列， 当这些耗时任务结束时（Ajax 请求返回、定时器超时、事件被触发），就将对应的回调函数插入队列中进行等待。这些任务的执行时机并不确定，只有当所有同步任务执行完毕后，执行环境栈被清空（栈底的全局执行环境会一直存在，直到进程退出）以后，然后再从任务队列中依次读取回调函数，并将其压入执行环境栈中。于是，主线程开始执行新的同步任务，执行完毕后再从栈中弹出，栈被清空。
主线程从任务队列中读取任务是不断循环的，每当栈被清空后，主线程就会从任务队列中读取新的任务并执行，如果没有新的任务，就会一直等待，直到有新的任务。JavaScript 的这种执行机制就叫做任务循环。因为每个任务都由一个事件所触发，所以也叫事件循环。
6、模块化
在 ES6 之前，为了实现 JS 模块化编程，社区制定了一些模块加载方案，最主要有 CMD 和 AMD 两种，分别以 commonjs 和 requirejs 为代表。ES6 在语言标准的层面上，实现了模块化编程，其设计思想是，尽量静态化，使得编译时就能确定模块的依赖关系，即编译时加载，而 CMD 和 AMD 是在运行时确定依赖关系，即运行时加载。
二、css
1、雪碧图Sprite，Iconfont，@font-face
对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络， 然后在css中通过设置background-position来控制显示所需要的小图标，这就是Sprite图。
Iconfont，即字体图标，就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接用控制字体的css属性来设置图标的样式，字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响，并且可以任意修改图标的颜色。
@font-face是CSS3中的一个模块，通过@font-face可以定义一种全新的字体，然后就可以通过css属性font-family来使用这个字体了，即使操作系统没有安装这种字体，网页上也会正常显示出来。
2、CSS Hack
早期，不同内核浏览器对CSS属性的解析存在着差异，导致显示效果不一致。因此，如果要想让所有浏览器中都显示一致，就需要在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的，这种方式就是css hack， 对于ie6中的margin应用hack就会变成这样：.el {margin-left:20px;_margin-left:10px}
兼容各大浏览器的 css hack 如下：
三、html
1、HTML解析过程
浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：
- 用户输入网址，浏览器向服务器发出请求，服务器返回html文件；
- 渲染引擎开始解析 html 标签，并将标签转化为DOM节点，生成 DOM树；
- 如果head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析；
- 如果引用了外部 js 文件，则发出 js 文件请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析；
- 引擎开始解析 body 里面的内容，如果标签里引用了css 样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树；
- 如果 body 中的 img 标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；
- 服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容；
- 如果此时 js 脚本中运行了 style.display="none"，布局被改变，引擎也需要重新渲染这部分代码；
- 直到 html 结束标签为止，页面解析完毕。
2、重绘与回流
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。
从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。会引起重绘和回流的操作如下：
- 添加、删除元素(回流+重绘)
- 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
- 移动元素，比如改变top,left的值，或者移动元素到另外一个父元素中。(重绘+回流)
- 对style的操作(对不同的属性操作，影响不一样)
- 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
另外，transform 操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation 动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。
3、浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag) 等字段来控制文件缓存的机制。
Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。
Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since 字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。
Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。
Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag 的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match 字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和 Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
- 手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
- 强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache (或 Pragma:no-cache)，发包向服务重新拉取文件。
4、HTML5离线缓存
HTML5离线缓存又叫Application Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
离线缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。