web基础知识点

1、JAVASCRIPT 篇

0、基础语法

Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。

在ES5 中，变量声明有两种方式，分别是  var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。

JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其余的都是原始类型(Primitive Type)。

原始类型也称为基本类型或简单类型，由于其占据空间固定，是简单的数据段，为了便于提高变量查询速度，将其存储在栈(stack)中(按值访问)。为了便于操做这类数据，ECMAScript 提供了 3 个基本包装类型：Boolean、Number 和 String 。基本包装类型是一种特殊的引用类型，每当读取一个基本类型值的时候，JS内部就会建立一个对应的包装对象，从而能够调用一些方法来操做这些数据。

引用类型因为其值的大小会改变，因此不能将其存放在栈中，不然会下降变量查询速度，所以其存储在堆(heap)中，存储在变量处的值是一个指针，指向存储对象的内存处(按址访问)，对于引用类型的值，能够为其添加属性和方法，也能够改变和删除其属性和方法；但基本类型不能够添加属性和方法。

Javascript 能够经过 typeof 来判断原始数据类型，但不能判断引用类型，要知道引用类型的具体类型，须要经过 Object 原型上的 toString 方法来判断

JS中的函数存在着三种角色：普通函数、构造函数、对象方法。同一个函数，调用方式不一样，函数的做用不同，所扮演的角色也不同。直接调用时就是普通函数，经过new建立对象时就是构造函数，经过对象调用时就是方法。

JS经常使用的内置对象有window、Date、Array、JSON、RegExp 等，window是浏览器在执行脚本时建立的一个全局对象，主要描述浏览器窗口相关的属性和状态，这个后面会讲到，Date 和 Array 使用场景最多，JSON主要用于对象的序列化和反序列化，还有一个做用就是实现对象的深拷贝。RegExp 即正则表达式，是处理字符串的利器。

一、函数原型链

JS是一种基于对象的语言，但在ES6 以前是不支持继承的，为了具有继承的能力，Javascript 在函数对象上创建了原型对象 prototype，并以函数对象为主线，从上至下，在JS内部构建了一条原型链。原型链把一个个独立的对象联系在一块儿，Object 则是全部对象的祖宗， 任何对象所创建的原型链最终都指向了Object，并以 Object 终结。

简单来讲，就是创建了变量查找机制，当访问一个对象的属性时，先查找对象自己是否存在，若是不存在就去该对象所在的原型连上去找，直到 Object 对象为止，若是都没有找到该属性才会返回 undefined。所以，咱们能够经过原型链来实现继承机制。

二、函数做用域

函数做用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。通俗来说就是，在一个函数里，有些变量能够访问，有些不能够访问。那些能访问的变量所造成的范围，就是这个函数的做用域。

在 JavaScript 中，没有块级做用域，只有函数做用域，也就是说 if、while、for 语句不会造成独立的做用域。但有一个特殊状况，即 with 语句和 catch 语句会造成临时做用域，语句执行结束后，该做用域就会被释放。

三、this 指针

this 指针存在于函数中，用以标识函数运行时所处的上下文。函数的类型不一样，this 指向规则也不同：对于普通函数，this 始终指向全局对象window；对于构造函数，this则指向新建立的对象；对于方法，this指向调用该方法的对象。另外，Function对象也提供了call、apply 和 bind 等方法来改变函数的 this 指向，其中，call 和 apply 主动执行函数，bind通常在事件回调中使用，而 call 和 apply 的区别只是参数的传递方式不一样。

若是往深的去理解，不管什么函数，this 是否被改变， 本质上，this 均指向触发函数运行时的那个对象。而在函数运行时，this 的值是不能被改变的。

四、new 操做符

函数的建立有三种方式，即 显式声明、匿名定义 和 new Function() 。前面提到，JS 中的函数便可以是函数，也能够是方法，还能够是构造函数。

当使用new来建立对象时，该函数就是构造函数，JS 将新对象的原型链指向了构造函数的原型对象，因而就在新对象和函数对象之间创建了一条原型链，经过新对象能够访问到函数对象原型 prototype 中的方法和属性。

五、闭包

闭包不是一个孤立的概念，须要从函数做用域的角度来理解。

每一个函数都有本身的做用域，若是在一个函数里定义了另外一个函数，那么对应的就有两个做用域，这两个做用域就会造成一个链条，俗称做用域链。本质上讲，做用域链是一个自上而下的链表， 链表的最顶端是内部函数做用域，链表的最底端是全局做用域。内部函数有权访问整个做用域链上的变量。正常状况下，每当一个函数执行完毕，对应的做用域就会从该链表上移除，而后销毁。

但若是函数 A 把函数 B 做为返回值返回时，状况又不同。

首先，函数 A 返回的是函数 B 的引用，也就是说，B 可能会在其余地方被调用。上面提到，函数 B 的定义是位于函数 A 内部，所以 A 和 B 会造成一条做用域链，函数 B 有可能会读取 A 中的变量 。为了保证函数 B 可以在其余地方正确执行，函数 B 所在的这条做用域链就不能被破坏。因此，即便函数 A 执行返回后，A 的做用域也不能释放，须要一直保存在内存中，以确保函数 B 可以正常读取里面的变量。函数 B 具备永久访问 A 做用域的特权，确切说，函数 B 就是闭包 。

六、单线程与事件循环

Javascript 是单线程语言。在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务，主线程会在栈中建立一个全局执行环境 （全局做用域）。每当有一个函数进入执行流时，就会造成一个对应的执行环境（函数做用域），并将该执行环境压入栈中。每当一个函数执行完毕之后，对应的执行环境就会从栈中弹出，而后被销毁。这就是执行环境栈，执行环境栈的做用就是保证全部的函数能按照正确的顺序被执行。

但在浏览器中，有一些任务是很是耗时的，好比 ajax请求、定时器、事件等。为了保证主线程任务不受影响，Javascript 内部维护了一个任务队列， 当这些耗时任务结束时（Ajax 请求返回、定时器超时、事件被触发），就将对应的回调函数插入队列中进行等待。这些任务的执行时机并不肯定，只有当全部同步任务执行完毕后，执行环境栈被清空（栈底的全局执行环境会一直存在，直到进程退出）之后，而后再从任务队列中依次读取回调函数，并将其压入执行环境栈中。因而，主线程开始执行新的同步任务，执行完毕后再从栈中弹出，栈被清空。

主线程从任务队列中读取任务是不断循环的，每当栈被清空后，主线程就会从任务队列中读取新的任务并执行，若是没有新的任务，就会一直等待，直到有新的任务。JavaScript 的这种执行机制就叫作任务循环。由于每一个任务都由一个事件所触发，因此也叫事件循环。

七、异步通讯 Ajax技术    

Ajax是浏览器专门用来和服务器进行交互的异步通信技术，其核心对象是 XMLHttpRequest，经过该对象能够建立一个 Ajax 请求。Ajax 请求是一个耗时的异步操做，当请求发出之后，Ajax 提供了两个状态位来描述请求在不一样阶段的状态，这两个状态位分别是 readyState 和 status ，readyState 经过 5个状态码来描述一个请求的 5 个阶段：

• 0 - 请求未发送，初始化阶段
• 1 - 请求发送中，服务器还未收到请求
• 2 - 请求发送成功，服务器已收到请求
• 3 - 服务器处理完成，开始响应请求，传输数据
• 4 - 客户端收到请求，并完成了数据下载，生成了响应对象

status 用于描述服务端对请求处理的状况，200 表示正确响应了请求，404 表示服务器找不到资源，500 表明服务器内部异常等等。

Ajax 对象还能够设置一个 timeout 值，表明超时时间。切记：timeout 只会影响 readyState，而不会影响 status，由于超时只会中断数据传输，但不会影响服务器的处理结果。 若是 timeout 设置的不合理，就会致使响应码 status 是 200，但 response里却没有数据，这种状况就是服务器正确响应了请求，但数据的下载被超时中断了。

为了保证用户信息的安全，浏览器引入了同源策略，对脚本请求作了限制，不容许 Ajax 跨域请求服务器 ，只容许请求和当前地址同域的服务器资源。但不限制 HTML 标签发送跨域请求，好比 script、img、a 标签等，所以能够利用标签跨域能力来实现跨域请求，这就是 JSONP 可以跨域的原理。

JSONP 虽然能够解决跨域问题，但只能发送 GET 请求，而且没有有效的错误捕获机制 。为了解决这个问题，W3C 在 XMLHttpRequest Level2 中提出了 CORS 规范，即 跨域资源共享。它不是一个新的 API，而是一个标准规范 。当浏览器发现该请求须要跨域时，就会自动在头信息中添加一个 Origin 字段，用以说明本次请求来自哪一个源。服务器根据这个值，决定是否赞成此次请求。

随着移动端的快速发展，Web 技术的应用场景正在变得愈来愈复杂，关注点分离原则在系统设计层面就显得愈来愈重要，而 XMLHttpRequest 是 Ajax 最古老的一个接口，于是不太符合现代化的系统设计理念。所以，浏览器提供了一个新的 Ajax 接口，即 Fetch，Fetch 是基于 ES6 的 Promise 思想设计的，更符合关注点分离原则。

八、模块化

历史上，Javascript 规范一直没有模块（module）体系，即没法将一个大程序拆分红互相依赖的小文件，再用简单的方法拼装起来。在 ES6 以前，为了实现 JS 模块化编程，社区制定了一些模块加载方案，最主要有 CMD 和 AMD 两种，分别以 commonjs 和 requirejs 为表明。ES6 在语言标准的层面上，实现了模块化编程，其设计思想是，尽可能静态化，使得编译时就能肯定模块的依赖关系，即编译时加载，而 CMD 和 AMD 是在运行时肯定依赖关系，即运行时加载。

九、Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它的运行不依赖于浏览器做为宿主环境，而是和服务端程序同样能够独立的运行，这使得JS编程第一次从客户端被带到了服务端，Node.js 在服务端的优点是，它采用单线程和异步I/O模型，实现了一个高并发、高性能的运行时环境。相比传统的多线程模型，Node.js 实现简单，而且能够减小资源开销。

十、ES6

ES6 是 ECMAScript 6.0 的简写，即 Javascript 语言的下一代标准，已经在 2015年6月正式发布了，它的目标是让JS可以方便的开发企业级大型应用程序，所以，ES6的一些规范正在逐渐向Java、C# 等后端语言标准靠近。ES6 规范中，比较重大的变化有如下几个方面：

• 新增 let、const 命令 来声明变量，和var 相比，let 声明的变量不存在变量提高问题，但没有改变JS弱类型的特色，依然能够接受任意类型变量的声明；const 声明的变量不容许在后续逻辑中改变，提升了JS语法的严谨性。
• 新增解构赋值、rest语法、箭头函数等，这些都是为了让代码看起来更简洁，而包装的语法糖。
• 新增模块化机制，这是 JavaScript 走向规范比较重要的一步，让前端更方便的实现工程化。
• 新增类和继承的概念，配合模块化，JavaScript 也能够实现高复用、高扩展的系统架构。
• 新增模板字符串功能，高效简洁，结束拼接字符串的时代。
• 新增 Promise 机制，解决异步回调多层嵌套的问题。

2、CSS 篇

一、CSS选择器

CSS选择器即经过某种规则来匹配相应的标签，并为其设置CSS样式，经常使用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。

二、CSS Reset

HTML 标签在不设置任何样式的状况下，也会有一个默认的CSS样式，而不一样内核浏览器对于这个默认值的设置则不尽相同，这样可能会致使同一套代码在不一样浏览器上的显示效果不一致，而出现兼容性问题。所以，在初始化时，须要对经常使用标签的样式进行初始化，使其默认样式统一，这就是CSS Reset ，即CSS样式重置，好比：*{margin:0,padding:0} 就是最简单CSS Reset

三、盒子布局

盒子模型是CSS比较重要的一个概念，也是CSS 布局的基石。 常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，与盒子相关的几个属性有：margin、border、padding和content 等，这些属性的做用是设置盒子与盒子之间的关系以及盒子与内容之间的关系。其中，只有普通文档流中块级盒子的垂直外边距才会发生合并，而行内盒子、浮动盒子或绝对定位之间的外边距不会合并。另外，box-sizing 属性的设置会影响盒子width和height的计算。

四、浮动布局

设置元素的 float 属性值为 left 或 right，就能使该元素脱离普通文档流，向左或向右浮动。通常在作宫格布局时会用到，若是子元素所有设置为浮动，则父元素是塌陷的，这时就须要清除浮动，清除浮动的方法也不少，经常使用的方法是在元素末尾加空元素设置clear:both， 更高级一点的就给父容器设置before/after来模拟一个空元素，还能够直接设置overflow属性为auto/hidden来清除浮动。除浮动能够实现宫格布局，行内盒子(inline-block)和table也能够实现一样的效果。 

五、定位布局

设置元素的position属性值为 relative/absolute/fixed，就可使该元素脱离文档流，并以某种参照坐标进行偏移。其中，releave 是相对定位，它以本身原来的位置进行偏移，偏移后，原来的空间不会被其余元素占用；absolute 是绝对定位，它以离本身最近的定位父容器做为参照进行偏移；为了对某个元素进行定位，经常使用的方式就是设置父容器的poistion:relative，由于相对定位元素在不设置 top 和 left 值时，不会对元素位置产生影响；fixed 即固定定位，它则以浏览器窗口为参照物，PC网页底部悬停的banner通常均可以经过fixed定位来实现，但fixed属性在移动端有兼容性问题，所以不推荐使用，可替代的方案是：绝对定位+内部滚动。

六、弹性布局

弹性布局即Flex布局，定义了flex的容器一个可伸缩容器，首先容器自己会根据容器中的元素动态设置自身大小；而后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新大小。Flex容器也能够设置伸缩比例和固定宽度，还能够设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，作页面布局的能够方便不少了。注意，设为Flex布局之后，子元素的float、clear和vertical-align 属性将失效。

七、CSS3 动画

CSS3中规范引入了两种动画，分别是 transition 和 animation，transition 可让元素的CSS属性值的变化在一段时间内平滑的过渡，造成动画效果，为了使元素的变换更加丰富多彩，CSS3还引入了transfrom 属性，它能够经过对元素进行 平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew) 等操做，来实现2D和3D变换效果。transiton 还有一个结束事件 transitionEnd，该事件是在CSS完成过渡后触发，若是过渡在完成以前被移除，则不会触发transitionEnd 。

animation 须要设置一个@keyframes，来定义元素以哪一种形式进行变换， 而后再经过动画函数让这种变换平滑的进行，从而达到动画效果，动画能够被设置为永久循环演示。设置 animation-play-state:paused 能够暂停动画，设置 animation-fill-mode:forwards 可让动画完成后定格在最后一帧。另外，还能够经过JS监听animation的开始、结束和重复播放时的状态，分别对应三个事件，即 animationStart、animationEnd、animationIteration 。注意，当播放次数设置为1时，不会触发 animationIteration 。

和 transition相比，animation 设置动画效果更灵活更丰富，还有一个区别是：transition 只能经过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画。另外，HTML5 还新增了一个动画API，即 requestAnimationFrame，它经过JS来调用，并按照屏幕的绘制频率来改变元素的CSS属性，从而达到动画效果，e

八、BFC

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素。好比：内部滚动就是一个BFC，当一个父容器的overflow-y设置为auto时，而且子容器的长度大于父容器时，就会出现内部滚动，不管内部的元素怎么滚动，都不会影响父容器之外的布局，这个父容器的渲染区域就叫BFC。知足下列条件之一就可触发BFC：

• 根元素，即HTML元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

九、Sprite，Iconfont，@font-face

对于大型站点，为了减小http请求的次数，通常会将经常使用的小图标排到一个大图中，页面加载时只需请求一次网络， 而后在css中经过设置background-position来控制显示所须要的小图标，这就是Sprite图。

Iconfont，即字体图标，就是将经常使用的图标转化为字体资源存在文件中，经过在CSS中引用该字体文件，而后能够直接用控制字体的css属性来设置图标的样式，字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响，而且能够任意修改图标的颜色。

@font-face是CSS3中的一个模块，经过@font-face能够定义一种全新的字体，而后就能够经过css属性font-family来使用这个字体了，即便操做系统没有安装这种字体，网页上也会正常显示出来。

十、CSS Hack

早期，不一样内核浏览器对CSS属性的解析存在着差别，致使显示效果不一致，好比 margin 属性在ie6中显示的距离会比其余浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧元素的实际显示距离是40px，而在非ie6的浏览器上显示正常。所以，若是要想让全部浏览器中都显示是20px的宽度，就须要在CSS样式中加入一些特殊的符号，让不一样的浏览器识别不一样的符号，以达到应用不一样的CSS样式的目的，这种方式就是css hack， 对于ie6中的margin应用hack就会变成这样：.el {margin-left:20px;_margin-left:10px}

兼容各大浏览器的 css hack 以下：

3、HTML 篇

一、BOM 

BOM 是 Browser Object Model 的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存建立一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window 对象也是BOM的顶级对象，其中包含了浏览器的 6个核心模块：

• document - 即文档对象，渲染引擎在解析HTML代码时，会为每个元素生成对应的DOM对象，因为元素之间有层级关系，所以整个HTML代码解析完之后，会生成一个由不一样节点组成的树形结构，俗称DOM树，document 用于描述DOM树的状态和属性，并提供了不少操做DOM的API。
• frames - HTML 子框架，即在浏览器里嵌入另外一个窗口，父框架和子框架拥有独立的做用域和上下文。
• history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。
• location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。
• navigator - 用来描述浏览器自己，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。
• screen - 提供了浏览器显示屏幕的相关属性，好比显示屏幕的宽度和高度，可用宽度和高度。

二、DOM 系统

DOM 是 Document Object Model 的缩写，即 文档对象模型，是全部浏览器公共遵照的标准，DOM 将HTML和XML文档映射成一个由不一样节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操做API。随着历史的发展，DOM 被划分为1级、2级、3级，共3个级别：

• 1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，容许获取和操做文档的任意部分。DOM HTML经过添加HTML专用的对象与函数对DOM核心进行了扩展。
• 2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。经过对原有DOM的扩展，2级DOM经过对象接口增长了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。
• 3级DOM - 经过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的全部内容，包括XML Infoset、 XPath、和XML Base。

浏览器对不一样级别DOM的支持状况以下所示：

从图中能够看出，移动端经常使用的 webkit 内核浏览器目前只支持 DOM2，而不支持 DOM3 。

三、事件系统

事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和 手势事件(guesture)，touch事件描述了手指在屏幕操做的每个细节，guesture 则是描述多手指操做时更为复杂的状况，总结以下：

• 第一根手指放下，触发 touchstart，除此以外什么都不会发生
• 手指滑动时，触发touchmove
• 第二根手指放下，触发 gesturestart 
• 触发第二根手指的 touchstart 
• 当即触发 gesturechange 
• 任意手指移动，持续触发 gesturechange
• 第二根手指弹起时，触发 gestureend，之后将不会再触发 gesturechange 
• 触发第二根手指的 touchend 
• 触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch)  
• 弹起第一根手指，触发 touchend 

 

DOM2.0 模型将事件处理流程分为三个阶段，即事件捕获阶段、事件处理阶段、事件冒泡阶段，如图所示：

• 事件捕获：当用户触发点击事件后，顶层对象document 就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。
• 事件处理：当到达目标元素以后，执行目标元素绑定的处理函数。若是没有绑定监听函数，则不作任何处理。
• 事件冒泡：事件流从目标元素开始，向最外层DOM节点传递，途中若是有节点绑定了事件处理函数，这些函数就会被执行。

利用事件冒泡原理能够实现 事件委托，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发之后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再经过event.target 获取到这个目标元素，这样作的好处是，父元素只需绑定一个事件监听，就能够对全部子元素的事件进行处理了，从而减小了没必要要的事件绑定，对页面性能有必定的提高。

四、HTML解析过程

浏览器加载 html 文件之后，渲染引擎会从上往下，一步步来解析HTML标签，大体过程以下：

• 用户输入网址，浏览器向服务器发出请求，服务器返回html文件；
• 渲染引擎开始解析 html 标签，并将标签转化为DOM节点，生成 DOM树；
• 若是head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析；
• 若是引用了外部 js 文件，则发出 js 文件请求，服务器返回后当即执行该脚本，这个过程也会阻塞html的解析；
• 引擎开始解析 body 里面的内容，若是标签里引用了css 样式，就须要解析刚才下载好的css文件，而后用css来设置标签的样式属性，并生成渲染树；
• 若是 body 中的 img 标签引用了图片资源，则当即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；
• 服务器返回图片文件，因为图片须要占用必定的空间，会影响到后面元素的排版，所以引擎须要从新渲染这部份内容；
• 若是此时 js 脚本中运行了 style.display="none"，布局被改变，引擎也须要从新渲染这部分代码；
• 直到 html 结束标签为止，页面解析完毕。

五、重绘与回流

当渲染树中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流。好比上面的img文件加载完成后就会引发回流，每一个页面至少须要一次回流，就是在页面第一次加载的时候。

当渲染树中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比 background-color。则就叫称为重绘。

从上面能够看出，回流必将引发重绘，而重绘不必定会引发回流。会引发重绘和回流的操做以下：

• 添加、删除元素(回流+重绘)
• 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
• 移动元素，好比改变top,left的值，或者移动元素到另一个父元素中。(重绘+回流)
• 对style的操做(对不一样的属性操做，影响不同)
• 还有一种是用户的操做，好比改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

另外，transform 操做不会引发重绘和回流，是一种高效率的渲染。这是由于transform属于合成属性，对合成属性进行transition/animation 动画时将会建立一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就不必进行重绘，浏览器会经过从新复合来建立动画帧。

六、本地存储

本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，能够设置过时时间。 可是 cookie 不适合大量数据的存储，由于每请求一次页面，cookie 都会发送给服务器，这使得 cookie 速度很慢并且效率也不高。所以cookie的大小被限制为4k左右(不一样浏览器可能不一样,分HOST)，以下所示：

• Firefox和Safari容许cookie多达4097个字节，包括名(name)、值(value) 和 等号。
• Opera容许cookie多达4096个字节，包括：名(name)、值(value) 和 等号。
• Internet Explorer容许cookie多达4095个字节，包括：名(name)、值(value) 和 等号。

在全部浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value 的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。

localStorage的存储空间大约5M左右(不一样浏览器可能不一样，分 HOST)，这个至关于一个5M大小的前端数据库，相比于cookie，能够节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage 的存储空间后会抛出异常。

此外，H5还提供了逆天的websql和 indexedDB，容许前端以关系型数据库的方式来存储本地数据，相对来讲，这个功能目前应用的场景比较少，此处不做介绍。

七、浏览器缓存机制

浏览器缓存机制是指经过 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)，发包向服务从新拉取文件。

八、History

用户访问网页的历史记录一般会被保存在一个相似于栈的对象中，即 history 对象，点击返回就出栈，跳下一页就入栈。 它提供了如下方法来操做页面的前进和后退：

• window.history.back( )  返回到上一个页面
• window.history.forward( )  进入到下一个页面
• window.history.go( [delta] )  跳转到指定页面

HTML5 对History Api 进行了加强，新增了两个Api 和一个事件，分别是pushState、replaceState 和 onpopstate：

• pushState是往history对象里添加一个新的历史记录，即压栈。
• replaceState 是替换history对象中的当前历史记录。

当点击浏览器后退按钮或 js调用history.back 都会触发 onpopstate 事件。

与其相似的还有一个事件：onhashchange，onhashchange是老 API，浏览器支持度高，原本是用来监听hash变化的，但能够被利用来作客户端前进和后退事件的监听，而onpopstate 是专门用来监听浏览器前进后退的，不只能够支持 hash，非 hash 的同源 url 也支持。

九、HTML5离线缓存

HTML5离线缓存又叫Application Cache，是从浏览器的缓存中分出来的一块缓存区，若是要在这个缓存中保存数据，可使用一个描述文件（manifest file），列出要下载和缓存的资源。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件须要与服务器的链接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面没法访问时的回退页面（好比 404 页面）

离线缓存为应用带来三个优点：

• 离线浏览 - 用户可在应用离线时使用它们
• 速度 - 已缓存资源加载得更快
• 减小服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。 

十、Web语义化与SEO

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，可以让人和搜索引擎都容易理解。

SEO是指在了解搜索引擎天然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的天然排名，得到更多的展示量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。

搜索引擎经过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人能够经过可视化的方式来判断页面上哪些内容是重点，而机器作不到。 但搜索引擎会根据标签的含义来判断内容的权重，所以，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。好比h1~h6这几个标签在SEO中的权值很是高，用它们做页面的标题就是一个简单的SEO优化。