Web前端筆試整理8

阿新 • • 發佈：2020-09-14

請簡述XMLHttpRequest、JSONP的適用場景，並針對兩種請求形式簡述如何檢測請求錯誤

XMLHttpRequest用於瀏覽器端於伺服器端非同步請求資料從而實現對頁面的無重新整理修改，支援GET/POST請求，一般用於非跨域的場景，如果需要使用XMLHttpRequest跨域請求資料，需要通過CORS頭支援。 JSONP用於跨域請求資料的場景，只支援GET請求。
XMLHttpRequest異常判斷一般通過該物件的readystate和http狀態碼status來判斷， JSONP的異常判斷一般是onerror事件和超市timer來判斷

請簡述瀏覽器渲染頁面的過程,並給出下方script程式碼中對哪些CSS屬性的"修改"會觸發重繪（repaint）和重排（reflow）？

<style>.sg-container {padding: 10px;margin-bottom: 10px;width: 100px; height: 100px;}</style>
<div class="sg-container">
    <p style="line-height:20px">2019搜狗校園招聘</p>
<script>
    document.querySelector('p').style.cssText +='height:10px; line-height:24px;font-size:20px;visibility:hidden;background-color:#00f;border:1px solid #f00';
</script>
</div>

瀏覽器渲染過程因不同核心可能會有差異，現已webkit為例描述瀏覽器渲染原理，瀏覽器渲染過程主要分為三個階段，先詳述如下：
第一階段：

使用者輸入URL時， webkit依賴網路模組載入網頁或者資源資料
網頁被交給HTML直譯器轉變成一系列的詞語
直譯器根據語法構建節點並形成DOM樹
如果節點是CSS、圖片、視訊等資源，會呼叫資源載入器載入他們，因該類資源載入是非同步的，不會阻礙當前DOM樹的繼續建立
如果節點是javascript，停止當前DOM樹的建立，直到javascript資源載入完成並被javascript引擎執行後才繼續進行DOM的建立

第二階段：

CSS直譯器解析CSS檔案成內部表示結構，並在DOM樹上附加樣式資訊形成RenderObject樹

RenderObject節點在建立的同時， webkit會根據網頁的層次結構建立RenderLayer樹，同時建立一個虛擬的繪圖上下文

第三階段：

根據生成的繪圖上下文和2D或3D影象庫生成最終的影象
對於包含動畫和使用者互動的動態網頁，瀏覽器的渲染過程會重複的執行，可能會觸發不同程度的重排和重繪。

重排屬性： height、line-height、font-size、border
重回屬性： height、line-height、font-size、boder、background-color、visibility

完成一個getTags函式，可以檢測當前頁面用到了那些標籤，函式返回包含標籤的字串的陣列

<html>
  <head></head>
  <body>
    <div></div>
    <p></p>
  </body>
</html>

(function getTags () {
        var list1 = document.getElementsByTagName("*"); //ES5語法，返回HTMLCollection
        var list2 = document.querySelectorAll("*"); //ES6語法，返回nodeList
        var tags = Array.prototype.slice.call(list1)
        console.log(tags.map(function (item) {
            return item.tagName.toLowerCase()
        }))
 
    })()