，即由document 捕獲後沿著DOM 樹依次向下傳播，並在各節點上觸發捕獲事件
，直到到達實際目標元素。
目標階段
當事件到達目標節點的，事件就進入了目標階段。 事件在目標節點上被觸發(執行事件對應的函數)，然後會逆向回流，直到傳播至最外層的文檔節點。
冒泡階段
事件在目標元素上觸發後，會繼續隨著DOM 樹一層層往上冒泡，直到到達最外層的根節點。
所有事件都要經歷捕獲階段和目標階段，但有些事件會跳過冒泡階段，例如元素獲得焦點focus 和失去焦點blur 不會冒泡
擴充一
e.target 和e.currentTarget 差別？
- e.target
指向觸發事件監聽的物件。
- e.currentTarget
指向新增監聽事件的物件。
例如：
<ul>
<li><span>hello 1</span></li>
</ul>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
ul.addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被点击的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})登入後複製
給ul 綁定了事件，點擊其中li 的時候，target 就是被點擊的li， currentTarget 是被綁定事件的ul
事件冒泡階段（上述例子），
e.currenttarget和e.target是不相等的，但是在事件的目標階段，e.currenttarget和e.target是相等的
作用：
#e.target可以用來實作事件委託，原理是透過事件冒泡（或事件擷取）為父元素新增事件監聽，e.target指向引發觸發事件的元素
擴展二
addEventListener 參數
語法：
addEventListener(type, listener);
addEventListener(type, listener, options || useCapture);
登入後複製
Vue篇
筆主是主要從事Vue相關開發的，也做過react 相關的項目，當然react 也只是能做項目的水平，所以在履歷表中屬於一筆帶過的那種，框架貴不在多而在精，對Vue源碼系列的學習讓我對Vue還是十分自信的。學習過程也是如此，如果你能夠對一門框架達到精通原理的掌握程度，學習其他框架不過只是花時間的事情。
vue與react的區別
#1、資料可變性
- React 推崇函數式編程，資料不可變以及單向資料流，只能透過
setState或onchange來實現視圖更新 - Vue 基於資料可變，設計了響應式數據，透過監聽資料的變化自動更新視圖
2、寫法
- React 推薦使用jsx inline style的形式，就是all in js
- #Vue是單一檔案元件（SFC）形式，在一個元件內分模組(tmplate/script/style)，當然vue也支援jsx形式，可以在開發vue的ui元件函式庫時使用
##3 、diff 演算法
Vue2採用雙端比較，Vue3採用快速比較- react
主要使用diff佇列保存需要更新哪些DOM，得到patch樹，再統一操作批次更新DOM。 ，需要使用shouldComponentUpdate()來手動優化react的渲染。
擴充：了解 react hooks嗎
元件類別的寫法很重，層級一多很難維護。
函數元件是純函數，不能包含狀態，也不支援生命週期方法，因此無法取代類別。
React Hooks 的設計目的，就是加強版函數元件，完全不使用"類別"，就能寫出一個全功能的元件
React Hooks 的意思是，元件盡量寫成純函數，如果需要外部功能和副作用，就用鉤子把外部程式碼"鉤子"進來。
vue元件通訊方式
props/ $emitref / $refs- #pa#rent/parent /
- p
- a
- r
e
n
#t
##/
root
attrs / listeners
eventBus / vuex / pinia / localStorage / sessionStorage / Cookie / windowprovide / inject
vue 渲染清單為什麼要加key?#########Vue 在處理更新同類型vnode 的一組子節點（例如v-for渲染的清單節點）的過程中，為了減少DOM頻繁建立和銷毀的效能開銷：######對沒有key 的子節點陣列更新是透過###就地更新###的策略。它會透過比較新舊子節點數組的長度，先以比較短的那部分長度為基準，將新子節點的那一部分直接 patch 上去。然後再判斷，如果是新子節點數組的長度更長，就直接將新子節點數組剩餘部分掛載；如果是新子節點數組更短，就把舊子節點多出來的那部分給卸載掉） 。 ###所以如果子節點是元件或是有狀態的 DOM 元素，原有的狀態會保留，就會出現渲染不正確的問題###。 ######有key 的子節點更新是呼叫的###patchKeyedChildren###，這個函數就是大家熟悉的實作核心diff 演算法的地方，大概流程就是同步頭節點、同步尾部節點、處理新增和刪除的節點，最後用解最長遞增子序列的方法區處理未知子序列。是為了###最大程度實現對已有節點的複用，減少 DOM 操作的效能開銷###，同時避免了就地更新所帶來的子節點狀態錯誤的問題。 ######綜上，如果是用 v-for 去遍歷常數或子節點是諸如純文字這類沒有」狀態「的節點，是可以使用不加 key 的寫法的。但實際開發過程中更建議統一加上 key，能夠實現更廣泛場景的同時，避免了可能發生的狀態更新錯誤，我們一般可以使用 ESlint 配置 key 為 v-for 的必需元素。 ###
想详细了解这个知识点的可以去看看我之前写的文章：v-for 到底为啥要加上 key?
vue3 相对 vue2的响应式优化
vue2使用的是Object.defineProperty去监听对象属性值的变化，但是它不能监听对象属性的新增和删除，所以需要使用$set、$delete这种语法糖去实现，这其实是一种设计上的不足。
所以 vue3 采用了proxy去实现响应式监听对象属性的增删查改。
其实从api的原生性能上proxy是比Object.defineProperty要差的。
而 vue 做的响应式性能优化主要是在将嵌套层级比较深的对象变成响应式的这一过程。
vue2的做法是在组件初始化的时候就递归执行Object.defineProperty把子对象变成响应式的；
而vue3是在访问到子对象属性的时候，才会去将它转换为响应式。这种延时定义子对象响应式会对性能有一定的提升
Vue 核心diff流程
前提：当同类型的 vnode 的子节点都是一组节点（数组类型）的时候，
步骤：会走核心 diff 流程
Vue3是快速选择算法
- 同步头部节点
- 同步尾部节点
- 新增新的节点
- 删除多余节点
- 处理未知子序列（贪心 + 二分处理最长递增子序列）
Vue2是双端比较算法
在新旧字节点的头尾节点，也就是四个节点之间进行对比，找到可复用的节点，不断向中间靠拢的过程
diff目的：diff 算法的目的就是为了尽可能地复用节点，减少 DOM 频繁创建和删除带来的性能开销
vue双向绑定原理
基于 MVVM 模型，viewModel(业务逻辑层)提供了数据变化后更新视图和视图变化后更新数据这样一个功能，就是传统意义上的双向绑定。
Vue2.x 实现双向绑定核心是通过三个模块：Observer监听器、Watcher订阅者和Compile编译器。
首先监听器会监听所有的响应式对象属性，编译器会将模板进行编译，找到里面动态绑定的响应式数据并初始化视图；watchr 会去收集这些依赖；当响应式数据发生变更时Observer就会通知 Watcher；watcher接收到监听器的信号就会执行更新函数去更新视图；
vue3的变更是数据劫持部分使用了porxy 替代 Object.defineProperty，收集的依赖使用组件的副作用渲染函数替代watcher
v-model 原理
vue2 v-model 原理剖析
V-model 是用来监听用户事件然后更新数据的语法糖。
其本质还是单向数据流，内部是通过绑定元素的 value 值向下传递数据，然后通过绑定 input 事件，向上接收并处理更新数据。
单向数据流：父组件传递给子组件的值子组件不能修改，只能通过emit事件让父组件自个改。
// 比如
<input v-model="sth" />
// 等价于
<input :value="sth" @input="sth = $event.target.value" />
登入後複製
给组件添加 v-model 属性时，默认会把value 作为组件的属性，把 input作为给组件绑定事件时的事件名:
// 父组件
<my-button v-model="number"></my-button>
// 子组件
<script>
export default {
props: {
value: Number, // 属性名必须是 value
},
methods: {
add() {
this.$emit('input', this.value + 1) // 事件名必须是 input
},
}
}
</script>登入後複製
如果想给绑定的 value 属性和 input 事件换个名称呢？可以这样：
在 Vue 2.2 及以上版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event：
<script>
export default {
model: {
prop: 'num', // 自定义属性名
event: 'addNum' // 自定义事件名
}
}登入後複製
vue3 v-model 原理
实现和 vue2 基本一致
<Son v-model="modalValue"/>
登入後複製
等同于
<Son v-model="modalValue"/>
登入後複製
自定义 model 参数
<Son v-model:visible="visible"/>
setup(props, ctx){
ctx.emit("update:visible", false)
}登入後複製
vue 响应式原理
不管vue2 还是 vue3，响应式的核心就是观察者模式 + 劫持数据的变化，在访问的时候做依赖收集和在修改数据的时候执行收集的依赖并更新数据。具体点就是：
vue2 的话采用的是 Object.definePorperty劫持对象的 get 和 set 方法，每个组件实例都会在渲染时初始化一个 watcher 实例，它会将组件渲染过程中所接触的响应式变量记为依赖，并且保存了组件的更新方法 update。当依赖的 setter 触发时，会通知 watcher 触发组件的 update 方法，从而更新视图。
Vue3 使用的是 ES6 的 proxy，proxy 不仅能够追踪属性的获取和修改，还可以追踪对象的增删，这在 vue2中需要 set/delete 才能实现。然后就是收集的依赖是用组件的副作用渲染函数替代 watcher 实例。
性能方面，从原生 api 角度，proxy 这个方法的性能是不如 Object.property，但是 vue3 强就强在一个是上面提到的可以追踪对象的增删，第二个是对嵌套对象的处理上是访问到具体属性才会把那个对象属性给转换成响应式，而 vue2 是在初始化的时候就递归调用将整个对象和他的属性都变成响应式，这部分就差了。
扩展一
vue2 通过数组下标更改数组视图为什么不会更新？
尤大：性能不好
注意：vue3 是没问题的
why 性能不好？
我们看一下响应式处理:
export class Observer {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 这里对数组进行单独处理
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
// 对对象遍历所有键值
this.walk(value)
}
}
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}登入後複製
对于对象是通过Object.keys()遍历全部的键值，对数组只是observe监听已有的元素，所以通过下标更改不会触发响应式更新。
理由是数组的键相较对象多很多，当数组数据大的时候性能会很拉胯。所以不开放
computed 和 watch
Computed 的大体实现和普通的响应式数据是一致的，不过加了延时计算和缓存的功能：
在访问computed对象的时候，会触发 getter ，初始化的时候将 computed 属性创建的 watcher （vue3是副作用渲染函数）添加到与之相关的响应式数据的依赖收集器中（dep），然后根据里面一个叫 dirty 的属性判断是否要收集依赖，不需要的话直接返回上一次的计算结果，需要的话就执行更新重新渲染视图。
watchEffect?
watchEffect会自动收集回调函数中响应式变量的依赖。并在首次自动执行
推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景（或者懒惰的场景 ）
$nextTick 原理？
vue有个机制，更新 DOM 是异步执行的，当数据变化会产生一个异步更行队列，要等异步队列结束后才会统一进行更新视图，所以改了数据之后立即去拿 dom 还没有更新就会拿不到最新数据。所以提供了一个 nextTick 函数，它的回调函数会在DOM 更新后立即执行。
nextTick 本质上是个异步任务，由于事件循环机制，异步任务的回调总是在同步任务执行完成后才得到执行。所以源码实现就是根据环境创建异步函数比如 Promise.then（浏览器不支持promise就会用MutationObserver，浏览器不支持MutationObserver就会用setTimeout），然后调用异步函数执行回调队列。
所以项目中不使用$nextTick的话也可以直接使用Promise.then或者SetTimeout实现相同的效果
Vue 异常处理
1、全局错误处理：Vue.config.errorHandler
Vue.config.errorHandler = function(err, vm, info) {};
如果在组件渲染时出现运行错误，错误将会被传递至全局Vue.config.errorHandler 配置函数 (如果已设置)。
比如前端监控领域的 sentry，就是利用这个钩子函数进行的 vue 相关异常捕捉处理
2、全局警告处理：Vue.config.warnHandler
Vue.config.warnHandler = function(msg, vm, trace) {};登入後複製
注意：仅在开发环境生效
像在模板中引用一个没有定义的变量，它就会有warning
3、单个vue 实例错误处理：renderError
const app = new Vue({
el: "#app",
renderError(h, err) {
return h("pre", { style: { color: "red" } }, err.stack);
}
});登入後複製
和组件相关，只适用于开发环境，这个用处不是很大，不如直接看控制台
4、子孙组件错误处理：errorCaptured
Vue.component("cat", {
template: `<div><slot></slot></div>`,
props: { name: { type: string } },
errorCaptured(err, vm, info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
return false;
}
});登入後複製
注：只能在组件内部使用，用于捕获子孙组件的错误，一般可以用于组件开发过程中的错误处理
5、终极错误捕捉：window.onerror
window.onerror = function(message, source, line, column, error) {};登入後複製
它是一个全局的异常处理函数，可以抓取所有的 JavaScript 异常
Vuex 流程 & 原理
Vuex 利用 vue 的mixin 机制，在beforeCreate 钩子前混入了 vuexinit 方法，这个方法实现了将 store 注入 vue 实例当中，并注册了 store 的引用属性 store，所以可以使用‘this.store.xxx`去引入vuex中定义的内容。
然后 state 是利用 vue 的 data，通过new Vue({data: {$$state: state}} 将 state 转换成响应式对象，然后使用 computed 函数实时计算 getter
Vue.use函数里面具体做了哪些事
概念
可以通过全局方法Vue.use()注册插件，并能阻止多次注册相同插件，它需要在new Vue之前使用。
该方法第一个参数必须是Object或Function类型的参数。如果是Object那么该Object需要定义一个install方法；如果是Function那么这个函数就被当做install方法。
Vue.use()执行就是执行install方法，其他传参会作为install方法的参数执行。
所以**Vue.use()本质就是执行需要注入插件的install方法**。
源码实现
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 避免重复注册
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 获取传入的第一个参数
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
// 如果传入对象中的install属性是个函数则直接执行
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
// 如果传入的是函数，则直接（作为install方法）执行
plugin.apply(null, args)
}
// 将已经注册的插件推入全局installedPlugins中
installedPlugins.push(plugin)
return this
}
}登入後複製
使用方式
installedPlugins import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
登入後複製
怎么编写一个vue插件
要暴露一个install方法，第一个参数是Vue构造器，第二个参数是一个可选的配置项对象
Myplugin.install = function(Vue, options = {}) {
// 1、添加全局方法或属性
Vue.myGlobalMethod = function() {}
// 2、添加全局服务
Vue.directive('my-directive', {
bind(el, binding, vnode, pldVnode) {}
})
// 3、注入组件选项
Vue.mixin({
created: function() {}
})
// 4、添加实例方法
Vue.prototype.$myMethod = function(methodOptions) {}
}登入後複製
CSS篇
Css直接面试问答的题目相对来说比较少，更多的是需要你能够当场手敲代码实现功能，一般来说备一些常见的布局，熟练掌握flex基本就没有什么问题了。
什么是 BFC
Block Formatting context，块级格式上下文
BFC 是一个独立的渲染区域，相当于一个容器，在这个容器中的样式布局不会受到外界的影响。
比如浮动元素、绝对定位、overflow 除 visble 以外的值、display 为 inline/tabel-cells/flex 都能构建 BFC。
常常用于解决
处于同一个 BFC 的元素外边距会产生重叠（此时需要将它们放在不同 BFC 中）；
清除浮动（float），使用 BFC 包裹浮动的元素即可
阻止元素被浮动元素覆盖，应用于两列式布局，左边宽度固定，右边内容自适应宽度（左边float，右边 overflow）
伪类和伪元素及使用场景
伪类
伪类即：当元素处于特定状态时才会运用的特殊类
开头为冒号的选择器，用于选择处于特定状态的元素。比如:first-child选择第一个子元素；:hover悬浮在元素上会显示；:focus用键盘选定元素时激活；:link + :visted点击过的链接的样式;:not用于匹配不符合参数选择器的元素；:fist-child匹配元素的第一个子元素；:disabled 匹配禁用的表单元素
伪元素
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。示例：
::before 在被选元素前插入内容。需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中
h1:before {
content: "Hello ";
}登入後複製
::first-line 匹配元素中第一行的文本
src 和 href 区别
href是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。href 用于在当前文档和引用资源之间确立联系
src是source的简写，目的是要把文件下载到html页面中去。src 用于替换当前内容
浏览器解析方式
当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)
不定宽高元素的水平垂直居中
浏览器和网络篇
浏览器和网络是八股中最典型的案例了，无论你是几年经验，只要是前端，总会有问到你的浏览器和网络协议。
最好的学习文章是李兵老师的《浏览器工作原理与实践》
跨页面通信的方法？
这里分了同源页面和不同源页面的通信。
不同源页面可以通过 iframe 作为一个桥梁，因为 iframe 可以指定 origin 来忽略同源限制，所以可以在每个页面都嵌入同一个 iframe 然后监听 iframe 中传递的 message 就可以了。
同源页面的通信大致分为了三类：广播模式、共享存储模式和口口相传模式
第一种广播模式，就是可以通过 BroadCast Channel、Service Worker 或者 localStorage 作为广播，然后去监听广播事件中消息的变化，达到页面通信的效果。
第二种是共享存储模式，我们可以通过Shared Worker 或者 IndexedDB，创建全局共享的数据存储。然后再通过轮询去定时获取这些被存储的数据是否有变更，达到一个的通信效果。像常见cookie 也可以作为实现共享存储达到页面通信的一种方式
最后一种是口口相传模式，这个主要是在使用 window.open 的时候，会返回被打开页面的 window 的引用，而在被打开的页面可以通过 window.opener 获取打开它的页面的 window 点引用，这样，多个页面之间的 window 是能够相互获取到的，传递消息的话通过 postMessage 去传递再做一个事件监听就可以了
详细说说 HTTP 缓存
在浏览器第一次发起请求服务的过程中，会根据响应报文中的缓存标识决定是否缓存结果，是否将缓存标识和请求结果存入到浏览器缓存中。
HTTP 缓存分为强制缓存和协商缓存两类。
强制缓存就是请求的时候浏览器向缓存查找这次请求的结果，这里分了三种情况，没查找到直接发起请求（和第一次请求一致）；查找到了并且缓存结果还没有失效就直接使用缓存结果；查找到但是缓存结果失效了就会使用协商缓存。
强制缓存有 Expires 和 Cache-control 两个缓存标识，Expires 是http/1.0 的字段，是用来指定过期的具体的一个时间（如 Fri, 02 Sep 2022 08:03:35 GMT），当服务器时间和浏览器时间不一致的话，就会出现问题。所以在 http1.1 添加了 cache-control 这个字段，它的值规定了缓存的范围（public/private/no-cache/no-store），也可以规定缓存在xxx时间内失效（max-age=xxx）是个相对值，就能避免了 expires带来的问题。
協商快取就是強制快取的快取結果失效了，瀏覽器攜帶快取標識向伺服器發起請求，有伺服器透過快取識別決定是否使用快取的過程。
控制協商快取的欄位有 last-modified / if-modified-since 和 Etag / if-none-match，後者優先權較高。
大致流程就是透過請求封包傳遞last-modified 或Etag 的值給伺服器與伺服器中對應值作對比，若與回應封包中的if-modified-since 或if-none-match 結果一致，則協商快取有效，使用快取結果，返回304；否則失效，重新請求結果，返回200
輸入URL 到頁面展現的全過程
##用戶輸入一段內容後，瀏覽器會先去判斷這段內容是搜尋內容還是URL ，是搜尋內容的話就會接合預設的搜尋引擎產生URL，例如google 瀏覽器是goole.com/search?xxxx，如果是URL會拼接協議，如http/https。當頁面沒有監聽 beforeupload 時間或同意了繼續執行流程，瀏覽器圖示列會進入載入中的狀態。
接下來瀏覽器進程會透過IPC 進程間通訊將URL 請求傳送給網路進程，網路進程會先去快取中尋找該資源，如果有則攔截請求並直接200返回，沒有的話會進入網路請求流程。
網路請求流程是網路進程請求DNS 伺服器返回網域名稱對應的IP和連接埠號碼（如果這些之前有快取也是直接回傳快取結果），如果沒有連接埠號，http預設為80，https預設為443 ，如果是https還需要建立TLS 安全連線建立加密的資料通道。
接著就是TCP 三次握手建立瀏覽器和伺服器連接，然後進行數據傳輸，數據傳輸完成四次揮手斷開連接，如果設定了
connection: keep-alive就可以一直保持連線。
網路進程將透過TCP取得的封包進行解析，首先是根據回應頭的content-type來判斷資料類型，如果是位元組流或檔案類型的話，會交給下載管理器進行下載，這時候導航流程就結束了。如果是 text/html 類型，就會通知到瀏覽器進程取得文件進行渲染。
瀏覽器進程獲取到渲染的通知，會根據當前頁面和新輸入的頁面判斷是否是同一個站點，是的話就復用之前網頁創建的渲染進程，否則的話會新創建一個單獨的渲染行程。
瀏覽器程序將「提交文件」的訊息給渲染進程，渲染進程接收到訊息就會和網路進程建立傳輸資料的通道，資料傳輸完成後就回傳「確認提交」的資訊給瀏覽器進程。
瀏覽器接收到渲染進程的「確認提交「的訊息後，就會更新瀏覽器的頁面狀態：安全狀態、網址列URL、前進後退的歷史訊息，並更新web頁面，此時頁面是空白頁面（白屏）。
頁面渲染過程（重點記憶）
最後是渲染進程對文件進行頁面解析和子資源加載，渲染進程會將HTML 轉換成DOM 樹結構，將css 轉換成styleSeets （ CSSOM）。然後複製 DOM 樹過濾掉不顯示的元素創建基本的渲染樹，接著計算每個 DOM 節點的樣式和計算每個節點的位置佈局資訊建構成佈局樹。
具有層疊上下文或需要要裁剪的地方會獨立創建圖層，這就是分層，最終會形成一個分層樹，渲染進程會給每個圖層生成繪製列表並提交給合成線程，合成線程將圖層分成圖塊（避免一次繪製圖層所有內容，可以根據圖塊優先需渲染視口部分），並在光柵化線程池中將圖塊轉換成點陣圖。
轉換完畢後合成線程發送繪製圖塊命令 DrawQuard 給瀏覽器進程，瀏覽器根據 DrawQuard 訊息產生頁面，並顯示到瀏覽器上。
速記：
瀏覽器的渲染程序將html 解析成dom樹，將css 解析成cssom 樹，然後會先複製一份DOM 樹過濾掉不顯示的元素（如display: none），再和cssom 結合進行計算每個dom 節點的佈局資訊建構成一個佈局樹。
佈局樹產生完畢就會根據圖層的層疊上下文或裁切部分進行分層，形成一個分層樹。
渲染進程再將每個圖層產生繪製列表並提交給合成線程，合成線程為了避免一次性渲染，就是分塊渲染，會將圖層分成圖塊，並透過光柵化線程池將圖塊轉換成點陣圖。
轉換完畢後，合成執行緒將繪製圖塊的指令傳送給瀏覽器進行顯示
TCP 和UDP 的差異
UDP 是使用者封包協定（User Dataprogram Protocol），IP 透過IP 位址資訊把封包傳送給指定電腦之後，UDP 可以透過連接埠號碼把封包分發給正確的程式。 UDP 可以校驗資料是否正確，但沒有重發的機制，只會丟棄錯誤的資料包，同時 UDP 在發送之後無法確認是否到達目的地。 UDP 無法保證資料的可靠性，但傳輸的速度非常快，通常運用於線上影片、互動遊戲這些較不嚴格保證資料完整性的領域。
TCP 是為了解決UDP 的資料容易遺失，無法正確組裝資料包二引入的傳輸控制協定（Transmission Control Protocol），是一種面向連接的，可靠的，基於位元組流的傳輸層通訊協定。 TCP 在處理封包遺失的情況，提供了重傳機制；並且 TCP 引入了封包排序機制，可以將亂序的封包組合成完整的檔案。
TCP 頭除了包含目標連接埠和本機連接埠號碼外，還提供了用於排序的序號，以便接收端透過序號來重排資料包。
TCP 和 UDP 的差異
一個 TCP 連線的生命週期會經歷連結階段，資料傳輸和斷開連線階段三個階段。
連接階段
用來建立客戶端和伺服器之間的鏈接，透過三次握手用來確認客戶端、服務端相互之間的資料包收發能力。
1、客戶端先發送SYN 封包用來確認服務端能夠發數據，並進入SYN_SENT 狀態等待服務端確認
2、服務端收到SYN 封包，會向客戶端發送一個ACK 確認封包，同時服務端也會向客戶端發送SYN 封包用來確認客戶端是否能夠發送數據，此時服務端進入SYN_RCVD 狀態
3、客戶端接收到ACK SYN 的封包，就會傳送封包至服務端並進入ESTABLISHED 狀態（建立連線）；服務端接收到用戶端傳送的ACK 封包也會進入ESTABLISHED 狀態，完成三次握手
傳輸資料階段
該階段，接收端需要對每個包進行確認操作；
所以當發送端發送了一個資料包之後，在規定時間內沒有接收到接收端回饋的確認訊息，就會判斷為包遺失，從而觸發重發機制；
一個大檔案在傳輸過程中會分成很多個小資料包，封包到達接收端後會根據TCP 頭中的序號為其排序，保證資料的完整。
斷開連線階段
透過四次揮手，來確保雙方的建立的連線能夠斷開
1、客戶端向伺服器發起FIN 包，並進入FIN_WAIT_1 狀態
2、服務端收到FIN 包，發出確認包ACK，並帶上自己的序號，服務端進入CLOSE_WAIT 狀態。這時候客戶端已經沒有資料要發給服務端了，但是服務端如果有資料要發給客戶端，客戶端還是需要接收。用戶端收到ACK 後進入FIN_WAIT_2 狀態
3、服務端資料傳送完畢後，向客戶端發送FIN 包，此時伺服器進入LAST_ACK 狀態
4、客戶端收到FIN包發出確認包ACK ，此時客戶端進入TIME_WAIT 狀態，等待2 MSL 後進入CLOSED 狀態；服務端接收到客戶端的ACK 後就進入CLOSED 狀態了。
對於四次揮手，因為TCP 是全雙工通信，在主動關閉方發送FIN 包後，接收端可能還要發送數據，不能立即關閉伺服器端到客戶端的數據通道，所以也就無法將伺服器端的FIN 套件與對客戶端的ACK 套件合併發送，只能先確認ACK，然後伺服器待無需發送資料時再發送FIN 包，所以四次揮手時必須是四次資料包的互動
Content-length 了解嗎？
Content-length 是 http 訊息長度，用十進位數字表示的位元組的數目。
如果content-length > 實際長度，服務端/客戶端讀取到訊息隊尾時會繼續等待下一個字節，會出現無回應逾時的情況
如果content -length < 實際長度，首次要求的訊息會被截取，然後會導致後續的資料解析混亂。
當不確定content-length的值應該使用Transfer-Encoding: chunked，能夠將需要傳回的資料分成多個資料區塊，直到傳回長度為0 的終止區塊
跨域常用方案
什麼是跨域？
協議網域連接埠號碼皆相同時則為同域，任一個不同則為跨域
解決方案
##1、傳統的jsonp：利用
作為前端人員，技術的深度廣度是排在第一位的，三年是一個分割線，一定要在這個時候找準自己的定位和方向。 
