Web前端知识体系精简

一、JAVASCRIPT 篇

0、基础语法

1、函数原型链

2、函数作用域

3、this 指针

4、new 操作符

5、闭包

6、单线程与事件循环

7、异步通信 Ajax技术

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

8、模块化

9、Node.js

10、ES6

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

二、CSS 篇

1、CSS选择器

2、CSS Reset

3、盒子布局

4、浮动布局

5、定位布局

6、弹性布局

7、CSS3 动画

8、BFC

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

9、Sprite，Iconfont，@font-face

10、CSS Hack

三、HTML 篇

1、BOM

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

2、DOM 系统

• 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。

3、事件系统

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

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

4、HTML解析过程

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

5、重绘与回流

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

6、本地存储

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

7、浏览器缓存机制

• 手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
• 强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache (或 Pragma:no-cache)，发包向服务重新拉取文件。

8、History

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

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

9、HTML5离线缓存

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

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

10、Web语义化与SEO