北京博派通達科技有限公司(前端面試題) 給須要的人

時間 2019-11-26

原文原文鏈接

1.網頁解析的全過程(輸入url到展現頁面)

1.用戶輸入網址，瀏覽器發起DNS查詢請求css

用戶訪問網頁，DNS服務器（域名解析系統）會根據用戶提供的域名查找對應的IP地址。域名解析服務器是基於UDP協議實現的一個應用程序，一般經過監聽53端口來獲取客戶端的域名解析請求。DNS查找過程以下：瀏覽器緩存 – 瀏覽器會緩存DNS記錄一段時間。有趣的是，操做系統沒有告訴瀏覽器儲存DNS記錄的時間，這樣不一樣瀏覽器會儲存個自固定的一個時間（2分鐘到30分鐘不等）。系統緩存 – 若是在瀏覽器緩存裏沒有找到須要的記錄，瀏覽器會作一個系統調用（windows裏是gethostbyname）。這樣即可得到系統緩存中的記錄。html

路由器緩存 – 接着，前面的查詢請求發向路由器，它通常會有本身的DNS緩存。html5

ISP DNS 緩存 – 接下來要check的就是ISP緩存DNS的服務器。在這通常都能找到相應的緩存記錄。java

遞歸搜索 – 你的ISP的DNS服務器從跟域名服務器開始進行遞歸搜索，從.com頂級域名服務器到Facebook的域名服務器。通常DNS服務器的緩存中會有.com域名服務器中的域名，因此到頂級服務器的匹配過程不是那麼必要了。node

二、創建TCP鏈接瀏覽器經過DNS獲取到web服務器真的IP地址後，便向web服務器發起tcp鏈接請求，經過TCP三次握手創建好鏈接後，瀏覽器即可以將HTTP請求數據經過發送給服務器了。python

三、瀏覽器向 web 服務器發送一個 HTTP 請求 HTTP請求是一個基於TCP協議之上的應用層協議——超文本傳輸協議。一個http事務由一條(從客戶端發往服務器的)請求命令和一個(從服務器發回客戶端的)響應結果組成。 GET www.cricode.com/ HTTP/1.1 Host: www.cricode.com Connection: keep-alive Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8 web

四、發送響應數據給客戶端 Web服務器一般經過監聽80端口，來獲取客戶端的HTTP請求。與客戶端創建好TCP鏈接後，web服務器開始接受客戶端發來的數據，並經過HTTP解碼，從接受到的網絡數據中解析出請求的url信息之前其餘諸如Accept-Encoding、Accept-Language等信息。Web服務器根據HTTP請求頭的信息，獲得響應數據返回給客戶端。一個典型的HTTP響應頭數據報以下：chrome

HTTP/1.1 200 OK Date: Fri, 24 Oct 2014 13:55:18 GMT Server: Apache X-Powered-By: PHP/5.4.32 Keep-Alive: timeout=5, max=10000 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=UTF-8 a0f6 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title></title> <body class="home"></body> </html> 編程

至此，一個HTTP通訊過程完成。web服務器會根據HTTP請求頭中的Connection字段值決定是否關閉TCP連接通道，當Connection字段值爲keep-alive時，web服務器不會當即關閉此鏈接。（這一步一開始也許還會有重定向及瀏覽器跟蹤重定向地址等）。canvas

五、瀏覽器解析http response

（1）html文檔解析（DOM Tree）

在瀏覽器沒有完整接受所有HTML文檔時，它就已經開始顯示這個頁面了。生成解析樹即dom樹，是由dom元素及屬性節點組成，樹的根是document對象。

（2）瀏覽器發送獲取嵌入在HTML中的對象

加載過程當中遇到外部css文件，瀏覽器另外發出一個請求，來獲取css文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。這是異步請求，並不會影響html文檔進行加載。

可是當文檔加載過程當中遇到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，不只要等待文檔中js文件加載完畢，還要等待解析執行完畢，才能夠恢復html文檔的渲染線程。

（3）css解析（parser Render Tree）

瀏覽器下載css文件，將css文件解析爲樣式表對象，並用來渲染dom tree。該對象包含css規則，該規則包含選擇器和聲明對象。

css元素遍歷的順序，是從樹的低端向上遍歷。

（4）js解析

瀏覽器UI線程：單線程，大多數瀏覽器（好比chrome）讓一個單線程共用於執行javascrip和更新用戶界面。

js阻塞頁面：瀏覽器裏的http請求被阻塞通常都是由js所引發，具體緣由是js文件在下載完畢以後會當即執行，而js執行時候會阻塞瀏覽器的其餘行爲，有一段時間是沒有網絡請求被處理的，這段時間事後http請求才會接着執行，這段空閒時間就是所謂的http請求被阻塞。

2.session 和 cookie 的不一樣和聯繫

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。 cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

3.Html 和 html5 的區別,及HTML5有哪些新特性及兼容性處理

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。繪畫 canvas; 用於媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除; 語意化更好的內容元素，好比 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、search; 新的技術webworker, websocket, Geolocation;

移除的元素：純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤： IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

固然也能夠直接使用成熟的框架、好比html5shim;
如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

4.li節點的onclick事件都能正確的彈出當前被點擊的li索引

var nodes = document.getElementsByTagName("li");
 	for(i = 0;i<nodes.length;i+= 1){
 	    nodes[i].onclick = (function(i){
 	              return function() {
 	                 console.log(i);
 	              }
 	            })(i);
 	}
複製代碼

5. 冒泡排序

var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
  for(i=0;i<arr.length-1;i++){
      for(j=0;j<arr.length-1-i;j++){
          if(arr[j]>arr[j+1]){
              var temp=arr[j];
              arr[j]=arr[j+1];
              arr[j+1]=temp;
          }
      }
  }
  return arr;
}
sortarr(examplearr);
console.log(examplearr);
複製代碼