现在为大家一一解刨Web前端知识体系结构
1、常见的BOM对象
BOM（Browser Object Mode）浏览器对象模型，是Javascript的重要组成部分。它提供 了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。
document 即文档对象，也是window对象的一个属性。整个HTML代码解析完以后，会 生成一个由不同节点组成的树形结构，俗称DOM树，document用于描述DOM树的状态和属 性，并提供了很多操作DOM的API。
history 主要针对浏览器的历史，页面前进>>入栈，页面返回<<出栈。
location 对象用于获得当前页面的地址url并把浏览器重定向到新的页面。
navigator提供了与浏览器有关的信息。userAgent是最常用的属性，用来完成浏览器判断。
screen 主要用来获取用户的屏幕信息，比如屏幕的宽高，可用宽高等。
Document Object Model，简称DOM，是w3c组织推荐的处理可扩展置标语言的标准编 程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新 其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进 一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处 理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处 理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
DOM事件流（event flow ）存在三个阶段： 事件捕获阶段、处于目标阶段、事件冒泡阶 段。
事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始 由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的 话，会先触发父元素绑定的事件。
事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函 数，则不做任何处理。
事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
dom标准事件流的触发的先后顺序为： 先捕获再冒泡，即当触发dom事件时，会先进行事 件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现， IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、 Safari等浏览器则同时存在。
浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程 如下：
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则 更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 LastModified (或 Etag)等字段来控制文件缓存的机制。
另外有两种特殊的情况：
手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上 字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)， 在请求中加上字段：Cache-Control:no-cache(或 Pragma:no-cache)，发包向服务重新拉取 文件。
用户访问网页的历史记录通常会被保存在一个类似于栈的对象中，即history对象，点击返 回就出栈，跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退：
window.history.back( ) 返回到上一个页面
window.history.forward( ) 进入到下一个页面
window.history.go( [delta] ) 跳转到指定页面
HTML5离线缓存又叫ApplicationCache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人 和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化， 改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网 站，从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人可以通过可视化 的方式来判断页面上哪些内容是重点，而机器做不到。但搜索引擎会根据标签的含义来判断内 容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引 擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权 值非常高，用它们作页面的标题就是一个简单的SEO优化。
TextTwo：就是我们的css样式部分了
1、CSS选择器
CSS选择器即通过某种规则来匹配相应的标签，并为其设置CSS样式，常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器 (+~)、属性选择器等等。
HTML标签在不设置任何样式的情况下，也会有一个默认的CSS样式，而不同内核浏览器对于这个默认值的设置则不尽相同，这样可能会导致同一套代码在不同浏览器上的显示效果不一致，而出现兼容性问题。因此，在初始化时，需要对常用标签的样式进行初始化，使其默认样 式统一，这就是CSSReset ，即CSS样式重置，比如：*{margin:0,padding:0} 就是最简单CSS Reset， 关于CSS重置请参考：Neat.css
盒子模型是CSS比较重要的一个概念，也是CSS 布局的基石。常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，与盒子相关的几个属性有：margin、border、padding和 content等，这些属性的作用是设置盒子与盒子之间的关系以及盒子与内容之间的关系。其中，只有普通文档流中块级盒子的垂直外边距才会发生合并，而行内盒子、浮动盒子或绝对定 位之间的外边距不会合并。另外，box-sizing属性的设置会影响盒子width和height的计算。
设置元素的 float 属性值为 left 或right，就能使该元素脱离普通文档流，向左或向右浮 动。一般在做宫格布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需 要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置clear:both，
设置元素的position属性值为 relative/absolute/fixed，就可以使该元素脱离文档流，并 以某种参照坐标进行偏移。其中，releave是相对定位，它以自己原来的位置进行偏移，偏移 后，原来的空间不会被其他元素占用；absolute是绝对定位，它以离自己最近的定位父容器作 为参照进行偏移；为了对某个元素进行定位，常用的方式就是设置父容器的
poistion:relative，因为相对定位元素在不设置top 和 left 值时，不会对元素位置产生影响； fixed
弹性布局即Flex布局，定义了flex的容器一个可伸缩容器，首先容器本身会根据容器中的元 素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整 容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素 的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，做页面布局的可以方 便很多了。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
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的开始、结束和重复播放时的 状态，分别对应三个事件
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素。比如：内 部滚动就是一个BFC，当一个父容器的overflow-y设置为auto时，并且子容器的长度大于父容 器时，就会出现内部滚动，无论内部的元素怎么滚动，都不会影响父容器以外的布局，这个父 容器的渲染区域就叫BFC。
早期，不同内核浏览器对CSS属性的解析存在着差异，导致显示效果不一致，比如 margin 属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在 ie6中距左侧元素的实际显示距离是40px，而在非ie6的浏览器上显示正常。因此，如果要想让 所有浏览器中都显示是20px的宽度，就需要在CSS样式中加入一些特殊的符号，让不同的浏览 器识别不同的符号，以达到应用不同的CSS样式的目的，这种方式就是csshack， 对于ie6中的 margin应用hack就会变成这样：.el {margin-left:20px;_margin-left:10px}
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内部就会创建一 个对应的包装对象，从而可以调用一些方法来操作这些数据。
JS是一种基于对象的语言，但在ES6 之前是不支持继承的，为了具备继承的能力， Javascript 在 函数对象上建立了原型对象prototype，并以函数对象为主线，从上至下，在 JS内部构建了一条 原型链 。原型链把一个个独立的对象联系在一起，Object则是所有对象的 祖宗， 任何对象所建立的原型链最终都指向了Object，并以 Object 终结。
函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义 的。因此， JS中没有块级作用域，只有函数作用域，这种设计导致JS中出现了 变量提升 的 问题。简单来说就是，将变量声明提升到它所在作用域的最开始的部分，为了解决变量提升带 来的副作用，ES6新增了let 命令来声明变量，let 所声明的变量只在 let 命令所在的代码块内 有效，所以不存在变量提升问题。
this 指针存在于函数中，用以标识函数运行时所处的上下文。函数的类型不同，this指向规 则也不一样：对于普通函数，this始终指向全局对window对于构造函数，this则指向新创建的 对象；对于方法，this指向调用该方法的对象。另外，Function对象也提供了call、apply和 bind 等方法来改变函数的 this 指向，其中，call 和 apply 主动执行函数，bind一般在事件回 调中使用，而 call 和 apply的区别只是参数的传递方式不同。
函数的创建有三种方式，即 显式声明、匿名定义 和 new Function()。前面提到，JS中的 函数即可以是函数，也可以是方法，还可以是构造函数。当使用new来创建对象时，该函数就 是构造函数，JS将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之 间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。
通俗来讲，闭包是一个具有独立作用域的静态执行环境。和函数作用域不同的是，闭包的 作用域是静态的，可以永久保存局部资源，而函数作用域只存在于运行时，函数执行结束后立 即销毁。因此，闭包可以形成一个独立的执行过程，关于闭包更
JS中的 setTimeout 和 setInterval 就是典型的异步操作，它们会被放入异步队列中等待， 即使 setTimeout(0)也不会被立即执行，需要等到当前同步任务结束后才会被执行。
Ajax是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是 XMLHttpRequest，通过该对象可以创建一个Ajax请求。Ajax请求是一个耗时的异步操作，当 请求发出以后，Ajax提供了两个状态位来描述请求在不同阶段的状态，这两个状态位分别 是 readyState 和 status
status 用于描述服务端对请求处理的情况，200 表示正确响应了请求，404 表示服务器找 不到资源，500 代表服务器内部异常等等。
Ajax对象还可以设置一个timeout 值，代表超时时间，切记：timeout 只会影响 readyState，而不会影响status，因为超时只会中断数据传输，但不会影响服务器的处理结 果。 如果 timeout 设置的不合理，就会导致响应码status 是200，但 response里却没有数 据，这种情况就是服务器正确响应了请求，但数据的下载被超时中断了。
为了防止XSS攻击，浏览器对Ajax请求做了限制，不允许Ajax 跨域请求服务器，只允许请 求和当前地址同域的服务器资源。但不限制脚本和标签发送跨域请求，比如script 和 img 标 签，因此可以利用脚本跨域能力来实现跨域请求，即JSONP 的原理
JSONP虽然可以解决跨域问题，但只能是get请求，并且没有有效的错误捕获机制，为了解决这个问题，XMLHttpRequest Level2 提出了CORS 模型，即 跨域资源共享， 它不是一个新的API，而是一个标准规范，当浏览器发现该请求需要跨域时，就会自动在头信息中添加一个 Origin字段，用以说明本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求。
随着移动端的快速发展，Web技术的应用场景正在变得越来越复杂， 关注点分离 原则在 系统设计层面就显得越来越重要，而XMLHttpRequest 是Ajax 最古老的一个接口，因而不太 符合现代化的系统设计理念。因此，浏览器提供了一个新的 Ajax 接口，即 Fetch API ， FetchAPI 是基于Promise 思想设计的，更符合关注点分离原则。
历史上，Javascript 规范一直没有模块(module)体系，即无法将一个大程序拆分成互相依 赖的小文件，再用简单的方法拼装起来。在 ES6之前，为了实现JS模块化编程，社区制定了一 些模块加载方案，最主要有 CMD 和 AMD 两种，分别以commonjs 和 requirejs为代表。 ES6在语言标准的层面上，实现了模块化编程，其设计思想是，尽量静态化，使得编译时就能 确定模块的依赖关系，即编译时加载，而CMD和AMD是在运行时确定依赖关系，即运行时加 载。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript运行环境，它的运行不依赖于浏览器 作为宿主环境，而是和服务端程序一样可以独立的运行，这使得JS编程第一次从客户端被带到 了服务端，Node.js在服务端的优势是，它采用单线程和异步I/O模型，实现了一个高并发、高 性能的运行时环境。相比传统的多线程模型，Node.js实现简单，并且可以减少资源开销。
ES6 是 ECMAScript 6.0的简写，即Javascript语言的下一代标准，已经在2015年6月正式 发布了，它的目标是让JS能够方便的开发企业级大型应用程序，因此，ES6的一些规范正在逐 渐向Java、C#等后端语言标准靠近。ES6规范中，比较重大的变化有以下几个方面：
新增 let、const 命令 来声明变量，和var 相比，let声明的变量不存在变量提升问题，但没 有改变JS弱类型的特点，依然可以接受任意类型变量的声明；const
声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。
新增解构赋值、rest语法、箭头函数，这些都是为了让代码看起来更简洁，而包装的语法 糖。
新增模块化，这是JS走向规范比较重要的一步，让前端更方便的实现工程化。
新增类和继承的概念，配合模块化，JS也可以实现高复用、高扩展的系统架构。
新增模板字符串功能，高效简洁，结束拼接字符串的时代。
新增Promise对象，解决异步回调多层嵌套的问题。