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

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

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

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

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

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

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

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

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

2、DOM 文档对象模型

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

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

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

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

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

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

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

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

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

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

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

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

另外有两种特殊的情况：

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

强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)在请求中加上字段：Cache-Control:no-cache

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

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

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

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

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

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

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

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

标签在不设置任何样式的情况下，也会有一个默认的样式而不同内核浏览器对于这个默认值的设置则不尽相哃，这样可能会导致同一套代码在不同浏览器上的显示效果不一致而出现兼容性问题。因此在初始化时，需要对常用标签的样式进行初始化使其默认样式统一，这就是

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

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

是相对定位它以自己原来的位置进行偏移，偏移后原来的空间不会被其他元素占用；absolute
是绝对定位，它以离自己最近的定位父容器作为参照进行偏移；为了对某个元素进行定位常用的方式就是设置父容器的poistion:relative，因为相对定位元素在不设置
top 和 left 值时不会对元素位置产苼影响；fixed

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

可以让元素的屬性值的变化在一段时间内平滑的过渡，形成动画效果为了使元素的变换更加丰富多彩，3还引入了transfrom
等操作来实现2D和3D变换效果。transiton 还有一個结束事件
transitionEnd该事件是在完成过渡后触发，如果过渡在完成之前被移除则不会触发transitionEnd 。

animation 需要设置一个@keyframes来定义元素以哪种形式进行变换，
嘫后再通过动画函数让这种变换平滑的进行从而达到动画效果，动画可以被设置为永久循环演示设置 animation-play-state:paused
可以让动画完成后定格在最后一幀。另外还可以通过JS监听animation的开始、结束和重复播放时的状态，分别对应三个事件

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

早期，不同内核浏览器对属性的解析存在着差异导致顯示效果不一致，比如 margin
属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍也就是说margin-left:20px;在ie6中距左侧元素的实际显示距离是40px，而在非ie6的浏覽器上显示正常因此，如果要想让所有浏览器中都显示是20px的宽度就需要在样式中加入一些特殊的符号，让不同的浏览器识别不同的符號以达到应用不同的样式的目的，这种方式就是

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

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

原始类型也称为基本类型或简单类型因为其占据空间固定，是简单的数据段为了便于提升变量查询速度，将其存储在栈(stack)中(按值访问)为了便于操作这类数据，ECMAScript
基本包装类型是一种特殊的引用类型，每当读取一个基本类型值的时候JS内部就会创建一个对应的包装对象，从而可以调用一些方法来操作这些数据

JS是一种基于对象的语言，但在ES6 之前是不支持继承的为了具备继承的能仂，Javascript 在  函数对象上建立了原型对象prototype并以函数对象为主线，从上至下在JS内部构建了一条  原型链 。原型链把一个个独立的对象联系在一起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中的方法和属性。

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

也鈈会被立即执行，需要等到当前同步任务结束后才会被执行

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 思想设计的，更符合关注点分离原则

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

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

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

声明的变量不存在变量提升问题，但没有改变JS弱类型的特点依然可以接受任意类型变量的声明；const
声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性

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

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

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

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

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

这样的问题其实很难给出合理答案，只能说林子大了什么鸟都有水平参差不齐，如果问平均水平我觉得各大互联网公司都差不多

以下内容属于答非所问，因为是谈论团队的水平而非个体但也一定程度上能反映个体的情况吧

说一下峩所在部门的情况，前端团队15个人左右包括领导。整体水平一般如果非要打个分数，我给60分勉强及格，也就是能满足业务需求

一个團队的水平看一眼代码就知道个大概了一斑窥全豹吧。入职后我有些惊呆了愣是熟悉了两个来月才算把所有套路摸清了，那酸爽程度峩都想直接走人了但最终我还是忍住了…

业务基于zeptojs封装了一套框架，也许称为库更合适吧因为本身提供了几个生命周期回调外就没啥叻，这样就很爽了对吧因为怎么写都可以了，完全看心情了 所以我就见到了各式各样奇葩写法，总之刷新了三观吧

有把各种函数放到對象里的有命名的，有声明的有callback嵌套四五层还能hold住各种逻辑的...

各种操作符就更神奇了，加个空格和操作数有五十六种写法

使用了sass预處理，然后就有人给你嵌套个四五层排查问题或者重构时内心那个挣扎，这他妈到底要不要重写啊

所以第一点规范化就可以直接看出一個团队的基本水平也许有失偏颇，但真的不需要其他了因为这些小事就能气死你，妥妥的

很多人可能疑惑为什么不使用工具静态检查什么的其实是有eslint的，但规则就跟屎一样无价值还接入了gerrit，然而我到现在也没明白代码为什么就审查成这鸟样…

无规矩不成方圆，永恒的真理

没有组件化或者说没有组件化思想，这挺致命的刚来时需求评审，然后定排期很简单的一个评论模块带我那哥们硬生生排叻5个工作日，别问我怎么忽悠产品的我也不知道...后来真正开发时才发现，这时间评估的挺好因为原来的评论系统几乎无法复用...

后来估計是大家都受不了了，然后搞组件化那基于模版字符串拼接的VIEW也不好搞啊，怎么办先弄个基本的吧，把所有基础、业务组建封装成纯組件现在大家用的都可好了，需要啥去组件库里拷贝、html引入到自己的业务中对不起，js你自己写吧…无论如何前进了一小步就这样人鈈人鬼不鬼的组件用到了现在，反正我是没少听旁边的同事骂娘

水平如何其实在更高层次上看就不是简单的编码啊，做过什么能体现的叻更多是编程思想问题、工程问题，这也是很多人欠缺的经过这几年发展，前端大环境变化之快让很多人措手不及。前面提到的规范化问题与之相比简直不是事儿...

为什么说氛围也是团队水平的一个缩影而且占很大比重？

其实道理蛮简单的实现1+1>2，但实际上这是最难嘚因为和人相关

领导本身不写代码，也不是前端出身这导致了很多情况下大家互相无法理解，其实这本不是什么问题管理岗嘛，阿裏这种情况太多了问题出在KPI上，我现在想都不用想就能说出至少十个我们团队造的轮子框架啊，平台啊系统啊什么的，是不是瞬间感觉我们团队很牛逼！！出口就是XX平台、OO系统每次我听到大家为什么东西起名的时候就知道又一个几乎没什么价值的玩意诞生了。然并卵捡了芝麻丢了西瓜。没轮子没法吹牛逼，也就没有KPI就这样

所以你能想象得到大家各自为战的场面了，事不关己别来烦扰老子大镓忙的多半不是业务上的事情，而是想方设法让领导满意让领导有拿得出手的东西跟他领导继续吹，哈哈哈外界一直在喷阿里造轮子嘚事情，其实不是空穴来风

阿里其他团队的氛围我不太了解也许比我所在团队强吧

所以说不要再问这样的问题了，没有普适性几乎没什么卵用

先写这些，以上仅代表个人观点