五、運行環境
瀏覽器API
-
瀏覽器提供的符合W3C標準的DOM操作API、瀏覽器差異、兼容性
web API：瀏覽器提供的一套操作瀏覽器功能和頁面元素的API（BOM和DOM）。
DOM文檔對象模型，是W3C組織推薦的處理可擴展標誌語言的標準編程接口。
獲取元素：getElementById getElementByTagName getElementByName getElementByClassName querySelector
創建元素：write() createElement() createAttribute() createCommment()
修改元素：appendChild() insertBefore() removeChild() replaceChild()
DOM解析中瀏覽器的差異
一個重要的差異就是，處理空白和換行的方式。Internet Explorer 將不會把空的空白或換行作爲文本節點，而其他瀏覽器會。
-
瀏覽器提供的瀏覽器對象模型（BOM）提供的所有全局API、瀏覽器差異、兼容性
BOM是指瀏覽器對象模型，瀏覽器對象模型提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，比如：刷新瀏覽器、後退、前進、在瀏覽器中輸入URL等。
對話框：alert() prompt() confirm()
頁面加載事件：onload、onunload
定時器：setTimeout() cleatTimeout() setInterval() clearInterval()
location對象：location對象是window對象下的一個屬性，可以獲取或設置瀏覽器地址欄的URL
history對象：back()、forward() go()
navigator對象：userAgent可以判斷用戶瀏覽器類型 platform可以判斷瀏覽器所在的系統平臺類型
-
大量DOM操作、海量數據的性能優化（合併操作、Diff、requestAnimationFrame等）
大量DOM操作解決方案：
減少DOM操作次數DocumentFragment，縮短循環時間使用分治思想分批次插入，採用requestAnimationFrame
-
瀏覽器海量數據存儲、操作性能優化
一般是 localStorage 配合 IndexDB 使用
-
DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理
事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間，事件流描述的是從頁面中接收順序的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。
[注意]IE9、Firefox、Chrome、Safari等現代瀏覽器都支持事件捕獲，但是從window對象開始捕獲。之前的從document開始。
-
前端發起網絡請求的幾種方式及其底層實現、可以手寫原生ajax、fetch、可以熟練使用第三方庫
網絡請求方式
1、link標籤的href屬性 2、script標籤的src屬性 3、img標籤的src屬性 4、ajax發送請求 5、表單提交發送請求
6、a標籤的href發送請求 7、iframe的src屬性發送請求 8、fetch --ajax的替代者 9、axios、request等衆多開源庫
原生ajax
var xhr = new XMLHttpRequest();
xhr.open('post', 'www.xxx.com', true);
// 接受返回值
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
// 處理請求參數
postData = {"name1":"value1","name2":"value2"};
postData = (function(valuse){
for(var key in value){
oStr += `${key}=${key[key]}&`
}
return oStr;
})
// 設置請求頭
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 異常處理
xhr.onerror = function() {
console.log('Network request failed');
}
// 跨域攜帶cookie
xhr.withCredentials = true;
// 發出請求
xhr.send(postData);
fetch的使用
const options = {
method: "Post",
headers{"Content-Type": "application/json"},
body: JSON.stringify({name: '123'}),
credentials: "sanme-origin",
mode: "cors" // 跨域
}
fetch('http://www.xxx.com')
.then(function(response){
return response.json();
})
.then(function(myJson){
console.log(myJson); //響應數據
})
.catch(function(err){
console.log(err) // 異常處理
})
-
瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型
請求存在跨域問題，瀏覽器的同源策略研製了從同以源加載的文檔或者腳本如何與另外一個源的資源進行交互，這是一個用於隔離潛在惡意文件的重要安全機制。通常不允許不同源間的讀操作。
跨域條件：協議，域名，端口，有一個不同就算跨域。
實現跨域的方式：
1.使用nginx反向代理實現跨域。
2.CORS：
跨域資源共享，服務端設置 Access-Control-Allow-Origin 就可以開啓 CORS。 該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源
3.jsonp：
優點是簡單兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持 get 方法具有侷限性,不安全可能會遭受 XSS 攻擊。
4.WebSocket
5.postMessage跨域：
適用於同瀏覽器多窗口間跨域通信、iframe間跨域通信
6.Node中間件處理
-
瀏覽器提供的幾種存儲機制、優缺點、開發中正確的選擇
cookie：
存儲在用戶本地終端上的數據。cookie默認情況下的有效期是很短暫的，一旦用戶關閉瀏覽器，cookie保存的數據就會丟失
每個cookie保存的數據不能超過4KB。
cookie的優點：能用於和服務器端通信；當cookie快要過期時，可以重新設置而不是刪除。
cookie的缺點：它會隨着http頭信息一起發送，增加了網絡流量（文檔傳輸的負載）；它只能儲存少量的數據；它只能儲存字符串；有潛在的安全問題。
localStorage
HTML5中新加入了一個localStorage特性，解決了cookie存儲空間不足的問題，localStorage中一般瀏覽器支持的是5M大小。
localStorage的優點：localStorage會可以將第一次請求的數據直接存儲到本地；存儲的數據沒有時間限制。
localStorage的缺點：1.在IE8以上的IE版本才支持localStorage這個屬性；
2.目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對我們日常比較常見的JSON
對象類型需要一些轉換
3.localStorage在瀏覽器的隱私模式下面是不可讀取的；
4.localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡；
5.localStorage不能被爬蟲抓取到。
SessionStorage
sessionStorage與localStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對就會被清空。
UserData、GlobalStorage、Google Gear
這三種的使用都有一定的侷限性，例如userData是IE瀏覽器專屬，它的容量可以達到640K，這種方案可靠，不需要安裝額外插件，只不過它僅在IE下有效~
globalStorage適用於Firefox 2+的瀏覽器，類似於IE的userData
google gear是谷歌開發出的一種本地存儲技術，需要安裝Gear組件。
Flash ShareObject
這種方式能能解決上面提到的cookie存儲的兩個弊端，而且能夠跨瀏覽器，應該說是目前最好的本地存儲方案。不過，需要在頁面中插入一個Flash，當瀏覽器沒有安裝Flash控件時就不能用了。
indexDB
進行大數據的存儲，通常50m, 目前應用場景都不多，放太多東西在本地會造成數據的泄露；
-
瀏覽器跨標籤通信
方法一：使用localStorage
方法二：使用cookie + serInterval
瀏覽器原理
-
各瀏覽器使用的JavaScript引擎以及他們的異同點、如何在代碼中進行區分
JavaScript引擎就是能將js代碼處理並執行的運行環境。包括編譯器，解釋器，JIT工具，垃圾回收器和分析工具。
V8
工作兩個階段：編譯和運行
JavaScriptCore
WenKit中默認的JS引擎。首先是詞法和語法分析，然後使用底層解釋器來解釋那些字節碼。
之後，通過簡單的 JIT 編譯器將它們轉化成本地代碼，最後就是引入 DFG JIT 編譯器。
渲染引擎：
Firefox瀏覽器爲Gecko引擎，Safari爲WebKit引擎，Chrome爲Blink引擎。
JS引擎
firefox使用monkey系列引擎，chrome使用V8引擎。nodeJs其實就是封裝了V8引擎，edge瀏覽器，IE9使用Chakra引擎
代碼判斷
if (window.devicePixelRatio) { //If WebKit browser
var st = escape(navigator.javaEnabled.toString());
if (st === 'function%20javaEnabled%28%29%20%7B%20%5Bnative%20code%5D%20%7D') {
document.write('V8 detected');
} else {
document.write('JSC detected');
}
} else {
document.write("Not a WebKit browser");
}
-
請求數據到請求結束與服務器進行了幾次交互
三次握手四次揮手
-
可詳細描述瀏覽器從輸入URL到頁面展現的詳細過程
輸入網址 --> DNS解析 --> 建立TCP連接 --> 客戶端發送HTTP請求 --> 服務器處理請求 --> 服務器響應請求 -->瀏覽器展示 --> 瀏覽器發送請求獲取其他在HTML中的資源
瀏覽器渲染頁面：
-
瀏覽器解析HTML代碼的原理，以及構建DOM樹的流程
標記化算法 -> 樹構建
-
瀏覽器如何解析CSS規則，並將其應用到DOM樹上
構建render樹的過程是遍歷dom樹, 每次拿出一個dom節點，然後遍歷所有的樣式規則查找與當前節點匹配的規則，最後將所有匹配的規則中定義的樣式寫入一個render對象中，再將該render對象掛到render樹上。
疊加：瀏覽器會把所有來源的樣式疊加到一起，把各個零散的整合成一個整體。
覆蓋：如果多個來源樣式有相同樣式，根據權重值，高權重樣式覆蓋低權重樣式——特殊情況：具有！important修飾的樣式有最高權重。
-
瀏覽器如何將解析好的帶有樣式的DOM樹進行繪製
第一步：瀏覽器解析HTML文檔和解析CSS樣式表形成DOM樹和CSSOM樹
第二步 : 結合DOM樹和CSSDOM樹形成 render樹。 也就是我們所說的渲染樹。渲染樹
第三步： 瀏覽器在render樹內對每個render節點進行佈局處理，計算出每一個元素的大小和位置。確定其在屏幕上的位置
第四步：繪製。通過遍歷render樹將實際的像素顯示到屏幕上
-
瀏覽器的運行機制，如何配置資源異步同步加載
-
瀏覽器迴流與重構的底層原理，引發原因，如何有效避免
-
瀏覽器的垃圾回收機制，如何避免內存泄漏
-
瀏覽器採用的緩存方案，如何選擇合適的緩存方案