一、瀏覽器：

11道瀏覽器原理面試題

九種跨域方式實現原理（完整版)

1、常見的瀏覽器核心有哪些?

2、瀏覽器的主要組成部分是什麼？

1. 使用者介面

   - 包括位址列、前進/後退按鈕、書籤選單等。除了瀏覽器主視窗顯示的您請求的頁面外，其他顯示的各個部分都屬於使用者介面。

2. 瀏覽器引擎 - 在使用者介面和呈現引擎之間傳送指令。

3. UI呈現引擎 - 負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在螢幕上。

4. 網路 - 用於網路呼叫，比如 HTTP 請求。其介面與平臺無關，併為所有平臺提供底層實現。

5. 使用者介面後端 - 用於繪製基本的視窗小部件，比如組合框和視窗。其公開了與平臺無關的通用介面，而在底層使用作業系統的使用者介面方法。

6. JavaScript 直譯器。用於解析和執行 JavaScript 程式碼。

7. 資料儲存。這是持久層。瀏覽器需要在硬碟上儲存各種資料，例如 Cookie。新的 HTML 規範 (HTML5) 定義了“網路資料庫”，這是一個完整（但是輕便）的瀏覽器內資料庫。

3、瀏覽器是如何渲染UI的？

1. 瀏覽器獲取HTML檔案，然後對檔案進行解析，形成DOM Tree
2. 與此同時，進行CSS解析，生成Style Rules
3. 接著將DOM Tree與Style Rules合成為 Render Tree
4. 接著進入佈局（Layout）階段，也就是為每個節點分配一個應出現在螢幕上的確切座標
5. 隨後呼叫GPU進行繪製（Paint），遍歷Render Tree的節點，並將元素呈現出來

4、瀏覽器如何解析css選擇器？

瀏覽器會『從右往左』解析CSS選擇器。

我們知道DOM Tree與Style Rules合成為 Render Tree，實際上是需要將Style Rules附著到DOM Tree上，因此需要根據選擇器提供的資訊對DOM Tree進行遍歷，才能將樣式附著到對應的DOM元素上。

若從左向右的匹配，過程是：

1. 從 父 tree 開始，遍歷子節點
   2. 然後各自向子節點tree遍歷。
   3. 最後遍歷目標節點，一顆DOM樹的節點動不動上千，這種效率很低。

如果從右至左的匹配：

1. 先找到符合條件的最右選擇器，再找符合 層層左邊選擇器
2. 最後找到根選擇器。

後者匹配效能更好，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點）；而從左向右的匹配規則的效能都浪費在了失敗的查詢上面。

5、瀏覽器重繪與重排的區別？

• 重排: 部分渲染樹（或者整個渲染樹）需要重新分析並且節點尺寸需要重新計算，表現為重新生成佈局，重新排列元素
• 重繪: 由於節點的幾何屬性發生改變或者由於樣式發生改變，例如改變元素背景色時，螢幕上的部分內容需要更新，表現為某些元素的外觀被改變

單單改變元素的外觀，肯定不會引起網頁重新生成佈局，但當瀏覽器完成重排之後，將會重新繪製受到此次重排影響的部分

重排和重繪代價是高昂的，它們會破壞使用者體驗，並且讓UI展示非常遲緩，而相比之下重排的效能影響更大，在兩者無法避免的情況下，一般我們寧可選擇代價更小的重繪。

『重繪』不一定會出現『重排』，『重排』必然會出現『重繪』。

6、如何觸發重排和重繪？

任何改變用來構建渲染樹的資訊都會導致一次重排或重繪：

• 新增、刪除、更新DOM節點
• 通過display: none隱藏一個DOM節點-觸發重排和重繪
• 通過visibility: hidden隱藏一個DOM節點-只觸發重繪，因為沒有幾何變化
• 移動或者給頁面中的DOM節點新增動畫
• 新增一個樣式表，調整樣式屬性
• 使用者行為，例如調整視窗大小，改變字號，或者滾動。

7、同源策略、cookie、localstorage、sessionStorage

同源策略： 域名，協議，埠相同

如果不是同源：

(1)Cookie、LocalStorage和IndexDB 無法讀取
(2)DOM無法獲得
(3)AJAX請求不能傳送

# cookie 同源
1.當前域名或者父域名下的Cookie；
2.當前路徑或父路徑下的Cookie
3.每次發起同域下的 HTTP 請求時，都會攜帶當前域名下的 Cookie；
4.支援設定為 HttpOnly，防止 Cookie 被客戶端的 JavaScript 訪問。

8、瀏覽器快取機制

9、postMessage

二、html5

1、如何理解HTML語義化

• 便於程式碼可讀性
• 便於seo
• 有例子舉例子

2、哪些是塊級元素、哪些是內聯元素

Display: block/table: 有div h1 tabble ol ul p等

display：inline/inline-block; 有 span img input button等

三、CSS + flex + less

1、盒模型

box-sizing: content-box|border-box|inherit;  

2、塊級元素和行內元素

display: none|block|inline-block|flex|inline-block

·塊級元素
1.總是從新的一行開始
2.高度、寬度都是可控
3.寬度沒有設定時，預設為100%
4.塊級元素中可以包含塊級元素和行內元素

·行內元素
1.和其他元素都在一行
2.高度、寬度以及內邊距都是不可控的
3.寬高就是內容的高度，不可以改變
4.行內元素只能行內元素，不能包含塊級元素

3、常用客戶端尺寸和移動端尺寸

客戶端尺寸：

移動端尺寸：

media-query：

4、常用顏色：三基色R(Red)、G(Green)、B(Blue)

5、display 和 visiblity 、opacity的區別：

1.當為元素設定display:none;時，元素在頁面中不佔據任何位置，而visibility:hidden;時，元素依舊佔據位置;opacity: 0 也會被子元素繼承，但是不能通過設定子元素opacity: 0使其重新顯示

2.對子元素的影響
父元素為display:none;時，子元素設定display:block;無效
父元素為visibility:hidden;時，子元素設定visibility:visible;元素再次顯示

3.不管設定哪個，如果子元素為圖片的時候，都會請求圖片

4.visibility:hidden比display:none效能上要好，display:none切換顯示時，頁面產生迴流,而visibility切換是否顯示時則不會引起迴流

5.opacity: 0元素上面繫結的事件是可以觸發的

6.transition對於opacity 是有效,transition對於visibility 也是無效的

6、水平垂直居中、對齊的問題

水平居中：

inline: text-aligin:center；

Block: margin； auto；

absulote： left: 50% + marginl-left

垂直居中:

Inline: line-height 等於height

absulote： top: 50% + margin-top 負值

absulote: transform(-50%, -50%) ===> transform相對自己移動

absulote： top,left,bottom,right = 0; + margin: auto

16種方法實現水平居中垂直居中

flex, transform + absolute, 同時適用於水平居中和垂直居中

absolute相對於最近的有定位的元素進行定位

圖片和文字的對齊

7、滾動條

 .test-1::-webkit-scrollbar {
  /*滾動條整體樣式*/
  width : 10px;  /*高寬分別對應橫豎滾動條的尺寸*/
  height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
  /*滾動條裡面小方塊*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
  /*滾動條裡面軌道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }

8、margin 縱向重疊、margin 負值

margin負值：

Margin-top,margin-left 負值，元素向上、元素向左移動

margin-right負值，右側元素左移，自身不受影響

margin-bottom負值、下方元素上移，自身不受影響

9、BFC 理解和應用 hasLayout

Block format context, 塊級盒子上下文

一塊獨立的渲染區域，內部元素的渲染不會影響邊界以為的元素

形成BFC的常見條件：

float 不是none

position： 是absolute 或者fixed

overflow 不是visible

display: flex 、inline-block

清除浮動：

.claerfix::after{
 content； '.';
 height: 0;
  display: block;
 clear: both;
 visibility:hidden;
}
.claerfix{
 *zoom: 1
}

10、float 佈局的問題，以及clearfix

聖盃和雙飛翼佈局的目的

• 三欄佈局， 中間一欄最先載入和渲染
• 兩側內容固定，中間內容隨著寬度自適應
• 一般用於PC

11、flex

flex畫骰子

12、border的三角形，border屬性有哪些問題

13、偽元素和偽類

偽類：L,V,H,A ===> css 相同權重後面覆蓋前面

a:link 表示未被訪問的連結 （在頁面上寫了，還沒有訪問過）

a:visited 表示已經被訪問過後的連結 （訪問過了，注：判斷是否訪問過，是以瀏覽器的瀏覽記錄為依據）

a:hover 表示滑鼠指標位於其上的連結

a:active 表示活動連結 （當滑鼠點下時的連結）

14、line-height的繼承

四、 JS ES6

1、js 的繼承 原型 和 ES類原型本質

原型和原型鏈的圖示

屬性和方法的執行規則 ===> 通過鏈查詢

new Object（ target ） 和Object.create()的區別

{} 等同於new Object(), target__ proto __ = Object.prototype

Object.create(null) 沒有原型

Object.create（{}）指定原型

new 呼叫

如何實現繼承？

2、深度克隆的原理，為什麼要實現深度克隆，為什麼不使用 JSON.parse(JSON.stringfy(data))、

Loadsh

值型別 和 引用資料型別?

typeof Symbol() // 'symbol'

typeof Number() // 'number'

typeof Sring() // 'string'

typeof Function() // 'function'

typeof Objecr() // 'object' ===> typeof Array()

typeof Boolean() // 'boolean'

typeof null() // 'object' ===> 特殊引用型別，指標指向為空地址

typeof undefined() // 'undefined'

棧（stack）和 堆（heap：一般是在堆的頭部用一個位元組存放堆的大小）

方法一

function deepClone(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
            }
        }
    } 
    return newObj
}
const newObj = deepClone(oldObj));

方法二

利用JSON.stringify 將js物件序列化（JSON字串），再使用JSON.parse來反序列化(還原)js物件

const newObj = JSON.parse(JSON.stringify(oldObj));

缺點：

• 如果obj裡面有時間物件，則JSON.stringify後再JSON.parse的結果，時間將只是字串的形式。而不是時間物件；
• 如果obj裡有RegExp、Error物件，則序列化的結果將只得到空物件；
• 如果obj裡有function，Symbol 型別，undefined，則序列化的結果會把函式或 undefined丟失；
• 如果obj裡有NaN、Infinity和-Infinity，則序列化的結果會變成null
• JSON.stringify()只能序列化物件的可列舉的自有屬性，例如 如果obj中的物件是有建構函式生成的， 則使用JSON.parse(JSON.stringify(obj))深拷貝後，會丟棄物件的constructor；

方法三

const newObj = Object.assign([],oldObj);

缺點：

• Object.assign只對頂層屬性做了賦值，完全沒有繼續做遞迴之類的把所有下一層的屬性做深拷貝。

3、js 演算法、程式設計

實現一個簡易的jQuery,考慮外掛和擴充套件性

手寫節流 throttle ===> scroll 滑動觸發 、drag 拖動

防抖 debounce ===> search 框輸入結束觸發

遞迴 -- 函式自呼叫 -- 斐波那契 --- 黃金分割數列

JS 從斐波那契數列淺談遞迴

柯里化

直角三角形和金字塔效果

javascript 實現楊輝三角

js寫九九乘法表的不同寫法

手寫深度比較、模擬loadash isEqual

實現一個ajax

XMLHttpRequest：

var xhr= new XMLHttpRequest(),
   method = "GET",
   url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
 if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
   console.log(xhr.responseText)
 }
}
xhr.send();

值	狀態	描述
0	UNSENT	代理被建立，但尚未呼叫 open() 方法。
1	OPENED	open() 方法已經被呼叫。
2	HEADERS_RECEIVED	send() 方法已經被呼叫，並且頭部和狀態已經可獲得。
3	LOADING	下載中； responseText 屬性已經包含部分資料。
4	DONE	下載操作已完成。

HTTP狀態碼分類：

1**	資訊，伺服器收到請求，需要請求者繼續執行操作
2**	成功，操作被成功接收並處理
3**	重定向，需要進一步的操作以完成請求
4**	客戶端錯誤，請求包含語法錯誤或無法完成請求
5**	伺服器錯誤，伺服器在處理請求的過程中發生了錯誤

Fetch

十大經典排序演算法

1. 氣泡排序
2. 選擇排序
3. 插入排序
4. 希爾排序
5. 歸併排序
6. 快速排序
7. 堆排序
8. 計數排序
9. 基數排序

JS演算法之深度優先遍歷(DFS)和廣度優先遍歷(BFS)

4、內建物件Math , Array，Date 的常用API

純函式： 1.不改變源陣列（沒有副作用）

陣列不突變API：

concat，filter，slice，map,includes indexOf

陣列突變API：

push pop shift unshif forEach some every reduce sort reverse join

陣列slice -切片 和splice-剪接 的區別 ？

獲取多個數字中的最大值 ？

1. Math.ceil()

2. Math.floor()

3. Math.max()

4. Math.min()

5. Math.random()

6. Math.round()

7. Math.trunc()

8. Math.PI

9. Math.abs()

10. Number.isNaN()

11. Number.parseFloat()

12. Number.parseInt()

13. Number.prototype.toFixed()

14. Number.prototype.toPrecision()

15. Number.prototype.toString()

js 生成隨機整數，小數？

parseInt(Math.random()*(n-m+1)+m)

js數字字串轉成千分位金額？

let num = "1234567";
num = parseFloat(num)
num = num.toFixed(2)
num = num.replace(/\B(?=(\d{3})+\b)/g,',')

5、作用域和自由變數、閉包、this，執行上下文

作用域:

全域性作用域 ===> 凡是跨了自己的作用域的變數都叫自由變數。

函式作用域

塊級作用域 ( es6 { } )

閉包: 自由變數的查詢，是在函式定義的地方查詢，不知在執行的地方

this 的不同應用場景，如何取值？

• 當做普通函式呼叫 ===> window
• bind call apply ===> 繫結誰就是誰
• 作為物件方法呼叫 ===> 物件本身
• class 的方法呼叫 ===> class物件
• 箭頭函式 ===> 定義時的父級this

手寫bind 函式？

實際開發中閉包的應用場景，舉例說明？

• 隱藏資料
• 做一個cache 的工具

6、說說 call, apply, bind

7、promise，generator-yield，async-await， 非同步和單執行緒，巨集任務和微任務，（call stack）呼叫棧，事件迴圈（event-loop）

非同步和單執行緒：

js 是單執行緒語言，只能同時做一件事兒

瀏覽器和nodejs已經支援js啟動程序，如 web worker ，但是js執行還是單執行緒

js 和 DOM 渲染共用一個執行緒，因為js 可以修改dom結構

遇到等待（網路請求，定時任務）不能卡住

什麼是巨集任務佇列（macrotask callback queue）和微任務佇列（microTask callback queue） ===> 事件迴圈後加人呼叫棧

瀏覽器api執行程式碼，將callback 加入巨集任務佇列 ===> timer, dom ==> W3C 規範

DOM 渲染後觸發，如 setTimeout

js--api 引擎執行程式碼，將callback 加入微任務佇列 ===> promise ===> ES6 語法規定

DOM 渲染前觸發， 如 Promise

描述事件迴圈執行機制（可畫圖）？

事件迴圈回撥實現原理

1.call stack 2.嘗試DOM 渲染 3. 觸發event loop

promise解決了什麼問題

解決了: 回撥地獄/回撥巢狀( callBack hell )：改為了then序列程式碼格式，不是ajax巢狀的模式

promise有哪三種狀態，如何變化？

const p3 = new Promise(resolve =>{

   resolve(2)
})
console.log(p3)
/*
Promise {<fulfilled>: 2}
 __proto__: Promise
 [[PromiseState]]: "fulfilled"
 [[PromiseResult]]: 2 
*/

pending、resolved、 rejected ===> 狀態不可逆

pending： 沒有進行resolve或rejeact的 new Promise

resolved: 觸發then 的回撥

rejected：觸發catch 的回撥

then, catch ===> 返回的是resolved、rejected的Promise

then、catch對狀態的影響？

then和catch的鏈式呼叫？

Promise.all 和 Promise.race ?

async await

await 相當於promise 的then ，如果promise.rejected狀態時，會中斷 async函式執行； 需要加try + catch 捕獲錯誤

await 後面的內容都可以看做callback

同步和非同步的區別是什麼？

手寫用Promise 載入一張圖片?

手寫一個promise？

前端使用非同步的場景有哪些？

• 網路請求， 如ajax 圖片載入
• 定時任務，如setTimeout

for ... of 非同步迴圈===> 沒執行完一步才執行下一步； for in 是先遍歷完 一起執行

8、es6模組 amd cmd commonJS

ES6 Module 靜態引入，編譯時引用， 不能條件引入

Commonjs 動態引入，執行時引入

只有ES6 Module才能靜態分析，實現Tree-Shaking

9、事件冒泡,事件捕獲,事件委託

事件冒泡,事件捕獲,事件委託

Js 建立10個 標籤， 點選的時候彈出對應的序號

activated

deactivated

vue3.0 元件生命週期：

beforeCreate -> 請使用 setup()
created -> 請使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured ===> 捕獲一個來自子孫元件的錯誤時被呼叫

何時需要使用 beforeDestroy

• 接觸自定義事件event.$off

• 清除定時器

• 接觸自定義的Dom事件，如window scroll 等

3、react.hook和vue.hook的區別

4、react.hook和react.class-component程式設計的比較

5、react的元件如何通訊

6、vue的元件如何通訊

父子: Props + $emit 父子傳遞引數 子元件像父元件分發一個事件

$refs 呼叫

$parent呼叫

自定義元件例項：非父子 ===> 自定義事件需要及時解綁

$eventBus?

7、v-show 和 v-if 的區別、

v-if 不會渲染，沒有dom結構

v-show 有Dom結構，但是display：none

8、為何 v-for 中的 key

v-for 計算級別高於 v-if 不能同時使用

Diff 演算法中通過tag 和key 來判斷， 是否是sameNode，減少渲染次數，提升渲染效能

9、描述元件渲染和更新過程

10、vue-model 的實現原理

input 元素的value = this.name

繫結input 事件 this.name = $event.target.value

data 更新觸發re-render

11、jsx的本質是什麼

12、context 是什麼， 有何用途

13、shouldComponentUpdate(SCU)的用途

14、面試redux單項資料流

15、setState是同步還是非同步

16、基於vue 或 react 涉及 一個todolist

17、基於vue 或 react 涉及 一個購物車

18、react的可控組價和不可控元件

19、vue-router

前端路由原理：

路由的原理

hashRouter ===> 不會發送到後端

Window.location.assin()

Window.location.replace()

Window.location.onhashChange()

H5 history ===> 需要後端支援，前端需要設定 404

history.pushState() + window.onpopstate

20、$nextTick

1、vue 是非同步渲染

2、資料改變時，頁面渲染時 會將 data 的修改整合，多次資料變化只會渲染一次

21、vue的常見效能優化

1、合理使用 keepAlive

2、computed ===> 合理使用computed屬性的快取，data不變不會重新計算

3、vue-router 非同步載入

4、合理使用 v-show 和 v-if

5、v-for 時加key， 以及避免和v-if同時使用

6、自定義事件、DOM事件及時銷燬

7、合理使用非同步元件

8、data 層級不要太深 ===> 不理由響應式遍歷

22、vuex 的資料結構設計

action：非同步操作

action: 可以整合多個mutation

mutation 做原子操作

23、slot 插槽

預設插槽

具名插槽 v-slot

作用域插槽

父級別需要使用插槽元件的內部屬性

24、 元件化 + 響應式 + 訂閱釋出 + diff + 模板編譯

資料驅動檢視： MVVM，setState

Object.defineProperty ===> 資料描述, 屬性描述符

// Object.defineProperty(obj, prop, descriptor) 
Object.defineProperty(obj, prop, {
 // 公共控制屬性
  configurable:true, // 控制屬性的描述符才能夠被改變，同時該屬性也能從對應的物件上被刪除
  enumerable:true,  // 控制出現在物件的列舉屬性中
 // 資料描述符
   value: 42,
   writable: false // 控制是否能夠被賦值
 // 存取描述符
  get:()=>{},  // 執行時不傳入任何引數，但是會傳入 this 物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。該函式的返回值會被用作屬性的值,
  set:(newVal)=>{}, // 該方法接受一個引數（也就是被賦予的新值），會傳入賦值時的 this 物件
}) 

描述符預設值彙總

• 擁有布林值的鍵 configurable、enumerable 和 writable 的預設值都是 false。
• 屬性值和函式的鍵 value、get 和 set 欄位的預設值為 undefined。

Proxy

使用時深度監聽，效能更好

可監聽 新增/刪除 屬性

可監聽陣列變化

25、虛擬DOM（ Virtual DOM ） 和 diff

Vdom 是實現vue 和 React 的重要基石

diff 演算法是vdom中最核心、最關鍵的部分

樹的diff 演算法: O(n^3) ===> 優化到了 O(n)

簡述diff 演算法

Vue：

• 只是比較同一層級，不跨級比較
• tag 不相同，則直接刪除重建，不再深度比較
• tag 和 key，兩則都相同，則認為是相同節點， 不再深度比較

26、元件 渲染/更新 過程

27、為何元件data 必須是一個函式？

vue元件是一個類，當元件例項化的時候，每個例項data應該不同

28、ajax 請求應該放在哪個生命週期？

mounted

js 單執行緒，ajax非同步獲取資料

放在mounted 之前沒有用，只會讓邏輯混亂

29、請用vnode 描述一個DOM 結構

七、node.js

1、node的事件機制和瀏覽器的事件機制

八、 http1.0 http1.1 http2.0 webscoket

分析 HTTP，TCP 的長連線和短連線以及 sock

網際互聯及OSI七層模型

TCP 連線可以發多個 HTTP 請求？

TCP之三次握手四次揮手

TCP的三次握手和四次揮手(如果服務端主動關閉連線會怎麼樣)

HTTP1.0、HTTP1.1 和 HTTP2.0 的區別

• 應用層
• 傳輸層
• 網路層
• 資料鏈路層
• 物理層

1、HTTP 屬於應用層協議，在傳輸層使用 TCP 協議，在網路層使用 IP 協議

http 常見的狀態碼有哪些？

(HTTP狀態碼分類：)（https://www.runoob.com/http/http-status-codes.html）

http 常見的header 有哪些

responce-header:

1. Cache-Control: private
2. Connection: keep-alive
3. Content-Encoding: gzip
4. Content-Length: 47
5. Content-Type: text/html;charset=utf-8
6. Date: Tue, 08 Dec 2020 13:06:47 GMT
7. Expires: Tue, 08 Dec 2020 13:06:47 GMT
8. Server: BWS/1.0
9. Vary: Accept-Encoding
10. age: 934273
11. cache-control: max-age=2592000
12. content-type: image/png
13. date: Mon, 07 Dec 2020 03:20:20 GMT
14. etag: "5e7c3f77-c49" ===> 資源的唯一標識
15. expires: Sat, 26 Dec 2020 07:49:07 GMT
16. last-modified: Thu, 26 Mar 2020 05:36:55 GMT ===> 資源最後修改時間

Resquest-header:

1. Accept: text/plain, /; q=0.01
2. Accept-Encoding: gzip, deflate, br
3. Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
4. Connection: keep-alive
5. Cookie: PSTM=1592643412; BAIDUID=4AC4D717D44E368E25736C64885B8FD8:FG=1;
6. Host: www.baidu.com
7. Referer: https://www.baidu.com/
8. Sec-Fetch-Dest:empty
9. Sec-Fetch-Mode: cors
10. Sec-Fetch-Site: same-origin
11. User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
12. X-Requested-With: XMLHttpRequest
13. (自定義)Token: 213123123
14. If-modified-Since: Thu, 26 Mar 2020 05:36:55 GMT
15. If-none-match: "5e7c3f77-c49" ===.etag的值

什麼是 Restful API？

傳統API設計：把每個url當做一個功能

RestfulAPI 設計: 把每個url當做一個唯一的資源

描述一下 http的快取機制（重要）？ -- 靜態資源（js css img）

正常url	強快取200（from cache）， 協商快取（304）
手動 f5 ,點選刷洗，右鍵重新整理	協商快取（304）
強制：ctrl + f5

優先使用etag，last-modified 只能精確到秒

如果資源被重複生成，而榮內不變，則Etag 更精確一些

http1.0 http1.1 http2.0 區別？

九、Dom Bom的api

DOM:

DOM 是哪種資料結構 ?

Tree

DOM 操作的api ?

getElementById

getElementByClassName

querySelector() // css 選擇器

querySelectorAll() // css 選擇器

attr 和 property的區別 ?

property 設定的標籤屬性的值，改變屬性值不會對js-dom屬性結構改變，不會改變html 結構

attr 操作標籤的屬性的結構，會對js--dom物件屬性結構改變，會改變html結構

attr 和 property 都引起頁面重新渲染

一次性插入多個DOM節點，考慮效能 ？

對dom做快取 ===> createDocumentFragment

常用盒子屬性api

網頁可見區域寬： document.body.clientWidth(不包括border--scroll);
網頁可見區域高： document.body.clientHeight(不包括border--scroll);;
網頁可見區域寬： document.body.offsetWidth (包括border--scroll，不包括margin);
網頁可見區域高： document.body.offsetHeight (包括border--scroll，不包括margin);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被拖動的高： document.body.scrollTop;
網頁被拖動的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
螢幕解析度的高： window.screen.height;
螢幕解析度的寬： window.screen.width;
螢幕可用工作區高度： window.screen.availHeight;
螢幕可用工作區寬度：window.screen.availWidth;

盒子邊距： node.offseLeft： 到body邊框的距離

Window.screen.height:螢幕高度

Window.innerHeight : 網頁視口高度

document.body.clientHeight: body內容高度

window.onload 和DOMContentLoaded的區別:

​ window.addEventListenter('load',function(){

​ // 頁面全部資源載入完才會執行，包括圖片，視訊等

})

​

window.addEventListenter('load',function(){

​ // DOM 渲染完即可執行，圖片和視訊不一定完成

})

drag 事件

• drag
• dragstart
• dragend
• dragover
• dragenter
• dragleave
• dragexit

從url 頁面載入過程？

DNS解析：域名 -> ip地址

瀏覽器根據IP地址向伺服器發起http 請求

伺服器處理http 請求，並返回給瀏覽器

根據HTML程式碼生成DOM Tree

根據CSS 程式碼生成CSSOM

將DOMTree 和 CSSOM 整合Render Tree

遇到