Web前端面試題（二）

一、同步和異步有什麼區別？

同步，個人理解是一種線性執行的方式，執行的流程不能跨越。通常用於流程性比較強的程序，咱們作的用戶登陸功能也是同步處理的，必須用戶經過用戶名和密碼驗證後才能進入系統的操做。

異步，是一種並行處理的方式，沒必要等待一個程序執行完，能夠執行其它的任務。在程序中異步處理的結果一般使用回調函數來處理結果。在JavaScript中實現異步的方式主要有Ajax和H5新增的Web Worker。

 

三、js在頁面中的加載順序以及延遲加載的方式有哪些？

當瀏覽器遇到（內嵌）<script>時，當前瀏覽器無從獲知javascript是否會修改頁面內容，這是瀏覽器會中止處理頁面，先執行該javascript代碼，而後再繼續解析和渲染頁面。一樣的狀況也發生在使用src屬性加載外鏈javascript的過程當中，瀏覽器必須先花時間下載外鏈文件的代碼，而後解析並執行他，在這個過程當中，頁面渲染和用戶交互徹底被阻塞了。

 

　script標籤存在兩個屬性，defer和async： 都屬於異步加載

　　   <script src="example.js"></script>

　　　沒有defer或async屬性，瀏覽器會當即加載並執行相應的腳本。也就是說在渲染script標籤以後的文檔以前，不等待後續加載的文檔元素，讀到就開始加載和執行，此舉會阻塞後續文檔的加載；

　　（1）async

　　 <script async src="example.js"></script>

　　   有了async屬性，表示後續文檔的加載和渲染與js腳本的加載和執行是並行進行的，即異步執行；可是不能保證腳本會按順序執行，因此須要各個腳本之間無依賴性。

　　（2）defer 延遲腳本

　　<script defer src="example.js"></script>

         有了defer屬性，加載後續文檔的過程和js腳本的加載(此時僅加載不執行)是並行進行的，js腳本會被延遲到整個頁面都解析完畢後再運行，DOMContentLoaded事件觸發執行以前。

         在<script> 元素中設置 defer 屬性，等於告訴瀏覽器當即下載，但延遲執行。包含的腳本將延遲瀏覽器遇到</html>標籤後再執行。

（3）動態建立dom　

//這些代碼應被放置在</body>標籤前(接近HTML文件底部)
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else
      window.onload =downloadJSAtOnload;  
</script>  

 

四、window.onload與$(document).ready()的區別

（1）執行時間

　　window.onload必須等頁面內全部元素包括圖片都加載完成以後才執行

　　$(document).ready()在dom結構繪製完畢後就執行

（2）個數

　　只能有一個window.onload方法，而$(document).ready()能夠有多個

 

五、你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。

　　渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。

　　渲染引擎是一種對HTML文檔進行解析並將其顯示在頁面上的工具（就是按照HTML代碼在界面上繪製各類控件圖形）。

　　JS引擎：解析和執行javascript來實現網頁的動態效果。

　　最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

常見的瀏覽器內核有：Webket（谷歌內核）、Trident（IE內核）、Gecko（Firefox火狐內核）