资深阿里程序员一一为你解刨Web前端知识体系结构，付出与收获成正比！

只要接触过前端，都会指导web前端的知识主要由三部分组成：分别为静态html，样式css，动态javascript（简称js）这三大部分组成。其三部分组成的一个体系的复杂程度不亚于其他一门技术的复杂程度。当然对于跟我一样厉害的那些web前端来说那就是小菜一碟，但是很多人都只学了表面，基础部分，很多重要的知识，深入部分都是被忽视了！其实这也就导致了部分前端开发工作者学了前端，但是却找不到工作，有工作但是工资少的现象！

现在为大家一一解刨Web前端知识体系结构，在阿里从事了6年的全栈，也是从前端慢慢成长过来的，也想跟很多小伙伴说一句：付出与收获是成正比的！

TextOne：首先最最最基础的部分html部分

1、常见的BOM对象

BOM（Browser Object Mode）浏览器对象模型，是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。

 

window窗口对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。同时， window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

document 即文档对象，也是window对象的一个属性。整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document
用于描述DOM树的状态和属性，并提供了很多操作DOM的API。

history 主要针对浏览器的历史，页面前进>>入栈，页面返回<<出栈。

location 对象用于获得当前页面的地址url并把浏览器重定向到新的页面。

navigator提供了与浏览器有关的信息。userAgent是最常用的属性，用来完成浏览器判断。

screen 主要用来获取用户的屏幕信息，比如屏幕的宽高，可用宽高等。

2、DOM 文档对象模型

Document Object Model，简称DOM，是w3c组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

 

3、事件机制

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

DOM事件流（event flow ）存在三个阶段： 事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始 由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。

事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

dom标准事件流的触发的先后顺序为： 先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

4、HTML渲染过程

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

如果你是转行或者是在校学生，遇见有问题无法解答，可以到我的WEB前端裙，里面有我整理的最新学习路线和教程，可以跟着学，有什么不懂的地方可以随时在里面问。
我都会帮忙解答，下面就是我的WEB前端q裙 851231348。
里面聚集了一些正在学习的初学者，裙文件里面也有我做web前端技术这段时间整理的一些学习手册，面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

5、本地存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

6、浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)等字段来控制文件缓存的机制。

另外有两种特殊的情况：

手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。

强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，发包向服务重新拉取文件。

7、History

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

window.history.back( ) 返回到上一个页面

window.history.forward( ) 进入到下一个页面

window.history.go( [delta] ) 跳转到指定页面

8、HTML5离线缓存

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

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

9、Web语义化 和 SEO

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

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

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

TextTwo：就是我们的css样式部分了

1、CSS选择器

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

2、CSS Reset

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

3、盒子布局

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

4、浮动布局

设置元素的 float 属性值为 left 或
right，就能使该元素脱离普通文档流，向左或向右浮动。一般在做宫格布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置clear:both，

5、定位布局

设置元素的position属性值为 relative/absolute/fixed，就可以使该元素脱离文档流，并以某种参照坐标进行偏移。其中，releave
是相对定位，它以自己原来的位置进行偏移，偏移后，原来的空间不会被其他元素占用；absolute
是绝对定位，它以离自己最近的定位父容器作为参照进行偏移；为了对某个元素进行定位，常用的方式就是设置父容器的poistion:relative，因为相对定位元素在不设置
top 和 left 值时，不会对元素位置产生影响；fixed

6、弹性布局

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

7、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的开始、结束和重复播放时的状态，分别对应三个事件

8、BFC

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素。比如：内部滚动就是一个BFC，当一个父容器的overflow-y设置为auto时，并且子容器的长度大于父容器时，就会出现内部滚动，无论内部的元素怎么滚动，都不会影响父容器以外的布局，这个父容器的渲染区域就叫BFC。

9、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}

TextThree：javascript动态方面js部分

1、基础语法

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内部就会创建一个对应的包装对象，从而可以调用一些方法来操作这些数据。

2、函数原型链

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

3、函数作用域

函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。因此，  JS中没有块级作用域，只有函数作用域
，这种设计导致JS中出现了  变量提升 的问题。简单来说就是，将变量声明提升到它所在作用域的最开始的部分，为了解决变量提升带来的副作用，ES6新增了let 命令来声明变量，let 所声明的变量只在 let 命令所在的代码块内有效，所以不存在变量提升问题。

4、this 指针

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

5、new 操作符

函数的创建有三种方式，即 显式声明、匿名定义 和 new Function()
。前面提到，JS中的函数即可以是函数，也可以是方法，还可以是构造函数。当使用new来创建对象时，该函数就是构造函数，JS将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。

6、闭包

通俗来讲，闭包是一个具有独立作用域的静态执行环境。和函数作用域不同的是，闭包的作用域是静态的，可以永久保存局部资源，而函数作用域只存在于运行时，函数执行结束后立即销毁。因此，闭包可以形成一个独立的执行过程，关于闭包更

7、单线程和异步队列

JS中的 setTimeout 和 setInterval 就是典型的异步操作，它们会被放入异步队列中等待，即使 setTimeout(0)
也不会被立即执行，需要等到当前同步任务结束后才会被执行。

8、异步通信 Ajax技术

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 ，Fetch
API 是基于Promise 思想设计的，更符合关注点分离原则。

9、模块化

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

10、Node.js

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

10、ES6

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

新增 let、const 命令 来声明变量，和var 相比，let
声明的变量不存在变量提升问题，但没有改变JS弱类型的特点，依然可以接受任意类型变量的声明；const
声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。

新增解构赋值、rest语法、箭头函数，这些都是为了让代码看起来更简洁，而包装的语法糖。

新增模块化，这是JS走向规范比较重要的一步，让前端更方便的实现工程化。

新增类和继承的概念，配合模块化，JS也可以实现高复用、高扩展的系统架构。

新增模板字符串功能，高效简洁，结束拼接字符串的时代。

新增Promise对象，解决异步回调多层嵌套的问题。