3月web前端面試小結 | 掘金技術徵文

時間  2019-11-16
標籤 3月 web 前端 面試 小結 技術 徵文 欄目 HTML 简体版
原文   原文鏈接

說一下box-sizing的應用場景

  1. box-sizing的屬性值分爲兩個，border-box和content-box，其中，
    border-box：width=content+padding+border
    content-box： width=content

應用場景
2. border-box屬性在form上的使用
當咱們在要作一個登錄頁面的時候，這時候就須要表單和按鈕這些元素
首先咱們在div中設置兩個表單，一個用來輸入用戶名，一個用來輸入密碼，同時還有一個登陸按鈕， 當咱們想讓這兩個表單和一個登陸按鈕的長度相同時，咱們試着把她們三個的width的值設置爲100%
但她們的長度並不一致，表單和按鈕的padding，border值不統一，這時咱們給表單的屬性中添加一個box-sizing：border-box，此時表單和按鈕的長度保持一致
當不給表單添加box-sizing：border-box時，而是添加一個padding值會發現表單的長度都有所增長
當給按鈕添加padding時，她的長度並不會改變，由此能夠看出表單默認爲content-box，按鈕submit默認爲border-box，button的默認值也爲border-boxjavascript

  1. border-box屬性在盒子中的使用
    當咱們設置一個寬度爲500px的盒子，在裏面放入四個盒子，分別爲上(width:100%)，中左(width:60%)，中右(width:40%)，下(width: 100%)，此時在大盒子裏面四個盒子排列的很整齊
    這是咱們給上盒子設置一個padding或者border爲5px，這時上盒子的長度就會超出大盒子的寬度，此時咱們給上盒子添加box-sizing：border-box，就可使他的寬度不超出css

  2. 說到這裏你應該就能看到，box-sizing：border-box這個屬性值可使dom元素的padding和border屬性值做用於自身，而不對同級的兄弟元素形成影響html

參考連接 box-sizing的使用場景java

說一下你瞭解的彈性flex佈局

  1. flex佈局是什麼？
    flex佈局意爲彈性佈局，任何一個容器均可以指定爲flex佈局(display: flex)，行內元素也可使用flex佈局(display: inline-flex)，webkit內核的瀏覽器，必須加上(diaplay: -webkit-flex)，設爲flex佈局後，子元素的float，clear，vertical-align屬性將失效node

  2. 基本概念
    採用flex佈局的元素，成爲flex容器，她的全部子元素自動成爲容器成員，稱爲flex項目
    容器默認存在兩根軸，水平的主軸(main axis)和垂直的交叉軸(cross axis)，默認沿主軸排列，單個項目佔據的主軸空間叫作main sizereact

  3. 容器的屬性
    這6個屬性設置在容器上，flex-direction,flex-wrap, flex-flow, justify-content, align-items, align-contentgit

    • flex-direction決定主軸的方向，即項目排列的方向
      flex-direction：row | row-reserve | column | column-reservegithub

    • flex-wrap決定項目在一條軸線上排不下時，如何換行
      flex-wrap： nowrap | wrap | wrap-reserveweb

    • flex-flow是flex-direction屬性和flex-wrap屬性的簡寫，默認爲row nowrap面試

    • justify-content決定項目在主軸上的對齊方式
      justify-content: flex-start | flex-end | center | space-between | space-around

    • align-items決定項目在交叉軸上如何對齊
      align-items：flex-start | flex-end | center | baseline | stretch

    • ailgn-content決定多根軸線的對齊方式，若是項目只有一根軸線，該屬性不起做用
      align-content: flex-start | flex-end | center | space-between | space-around | stretch

  4. 項目的屬性 這6個屬性設置在項目上，order，flex-grow，flex-shrink，flex-basis，flex，algin-self

    • order定義項目的排列順序，數值越小，排列越靠前，默認爲0
      order：<integer>

    • flex-grow定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大
      flex-grow：<number>
      若是全部項目的flex-grow屬性都爲1，則他們將等分剩餘空間（若是有的話）

    • flex-shrink定義項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小
      flex-shrink： <number>
      若是一個項目的flex-shrink屬性爲0，其餘項目爲1，則空間不足時，前者不縮小

    • flex-basis定義項目在分配多餘空間以前，項目佔據的主軸空間，默認爲auto，能夠設置爲width或height同樣的值
      flex-basis：<length> | auto

    • flex屬性是flex-grow，flex-shrink，flex-basis的簡寫，默認爲0 1 auto
      默認存在兩個快捷值auto（1，1，auto）和none（0，0，auto）

    • align-self容許單個項目和其餘項目不同的對齊方式，可覆蓋align-items屬性，默認值爲auto
      align-self：auto | flex-start | flex-end | center | baseline | stretch

參考連接 flex佈局教程：語法篇
參考連接 flex佈局教程：實戰篇

說一下一個未知寬高元素怎麼上下左右垂直居中

  1. position+absolute
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
複製代碼
  1. flex
display: flex;
align-items: center;
justify-content: center;
複製代碼
  1. table-cell
display: table;(父)

display: table-cell;(子)
text-align: center;
vertical-align: middle;
複製代碼
  1. position+margin
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
複製代碼

參考連接 未知寬高元素水平居中

說一下原型鏈，對象，構造函數之間的一些聯繫

  1. javascript函數的new關鍵字究竟是幹什麼的
    不用建立臨時對象，由於new會幫你作
    不用綁定原型，由於new會幫你作
    不用return臨時對象，由於new會幫你作
    不要給原型想名字了，由於new指定名字爲prototype

  2. 對象與原型鏈(__proto__和prototype)
    每一個JS對象必定對應一個原型對象，並從原型對象繼承屬性和方法
    對象__proto__屬性的值就是他所對應的原型對象
    只有函數纔有prototype屬性，當你建立函數時，JS會爲這個函數自動添加prototype屬性，值是一個有constructor屬性的對象，不是空對象，而一旦你把這個函數看成構造函數調用時，那麼JS就會幫你建立該構造函數的實例，實例繼承構造函數prototype的全部屬性和方法
    對象的__proto__指向本身構造函數的prototype
    Object.prototype是原型鏈的頂端，Object自己是構造函數，繼承了Function.prototype，Function也是對象，繼承了Object.prototype
    Object.prototype.proto === null，說明原型鏈到Object.prototype終止
    null表示‘沒有對象’，即此處不應有值
    Function自己就是函數，Function.__proto__是標準的內置對象Function.prototype，而Function.prototype.__proto__是標準的內置對象Object.prototype

  3. 構造函數和原型
    原型：每個JS對象（除null外）在建立的時候就會與之關聯另外一個對象，這個對象就是咱們說的原型，每一個對象都會從原型繼承屬性
    proto：每個JS對象（除null外）都具備的一個屬性，叫__proto__，這個屬性會指向該對象的原型
    constructor：每個原型都有一個constructor屬性指向關聯的構造函數

參考連接 js的new究竟是幹什麼的
參考連接 從__proto__和prototype來深刻理解JS對象和原型鏈
參考連接 javascript深刻之從原型到原型鏈
參考連接 從探究Function.proto===Function.prototype過程當中的一些收穫

DOM事件綁定的幾種方式

  1. html中直接綁定
    html中綁定事件叫作內聯綁定事件，不利於分離

  2. js中直接綁定
    js中直接綁定稱爲賦值綁定函數，缺點是隻能綁定一次

  3. addEventListener
    target.addEventListener(type, listener[, useCapture])
    target表示要監聽事件的目標對象，能夠是一個文檔上的元素DOM自己，Window或者XMLHttpRequest
    type表示事件類型的字符串
    listener爲當指定的事件類型發生時被通知到的一個對象
    useCapture爲設置事件的捕獲或者冒泡
    true爲捕獲，false爲冒泡(默認)
    addEventListener能夠給同一個dom元素綁定多個函數，而且執行順序按照綁定順序執行，且執行順序與useCapture無關
    給一個dom元素綁定同一個函數，最多隻能綁定useCapture類型不一樣的兩次
    addEventListener只支持到IE9，爲兼容性考慮，在兼容IE8及一下瀏覽器能夠用attachEvent函數，和addEventListener函數表現同樣，但它綁定函數的this會指向全局

  4. 事件的解綁
    經過dom的on***屬性設置的事件，能夠用dom.onclick = null來解綁
    經過addEventListener綁定的事件可使用removeEventListener來解綁，接受參數同樣
    對於使用removeEventListener函數解綁事件，須要傳入的listener，useCapture和addEventListener徹底一致才能夠解綁事件

  5. 事件冒泡
    事件開始時由最具體的元素接受，而後逐級向上傳播到較爲不具體的節點

  6. 事件捕獲
    事件捕獲的思想是不太具體的DOM節點應該更早接收到事件，而最具體的節點應該最後接收到事件，與事件冒泡順序相反

  7. DOM事件流
    DOM事件流包括三個階段，事件捕獲階段，處於目標階段，事件冒泡階段，首先發生的是事件捕獲，爲截獲事件提供機會，而後是實際的目標接受事件，最後一個階段是事件冒泡階段，能夠在這個階段對事件做出響應

  8. stopPropagation()和stopImmediatePropagation()
    stopPropagation()既能夠阻止事件冒泡，也能夠阻止事件捕獲，也能夠阻止處於目標階段
    stopImmediatePropagation()既能夠阻止事件冒泡，也能夠阻止事件捕獲，還會阻止該元素其餘事件的發生

參考連接 從一個事件綁定提及-DOM

有沒有了解http2，websocket，https，說一下你的理解以及你瞭解的特性

  1. http2.0和http1.1的區別

    • 多路複用
      多路複用容許單一的http2鏈接同時發起多重的請求-響應信息
      http性能優化的關鍵並不在於高帶寬，而是低延遲，TCP鏈接會隨着時間進行自我調諧，起初會限制鏈接的最大速度，若是數據成功傳輸，會隨着時間的推移提升傳輸的速度，這種調諧則稱之爲TCP慢啓動，因爲這種緣由，讓本來就具備突發性和短時性的http鏈接變得十分低效
      http2經過讓全部數據流共用同一個鏈接，能夠更有效的使用TCP鏈接，讓高帶寬也能真正服務於http的性能提高
      小總結：多路複用技術，單鏈接多資源的方式，減小服務端的連接壓力，內存佔用更少，鏈接吞吐量更大，因爲減小TCP慢啓動時間，提升傳輸的速度

    由於全部的http2的請求都在一個TCP鏈接上，因此在http1中的自動化合並文件和Sprite合圖等資源合併減小請求的優化手段對於http2來講是沒有效果的

    • 二進制分幀
      http2在應用層和傳輸層之間增長一個二進制分幀層，http2會將全部傳輸的信息分割成更小的消息和幀，並對他們採用二進制格式的編碼，其中http1的首部信息會被封裝成Headers幀，而咱們的request body則封裝到Data幀裏面

    • 首部壓縮
      http請求和響應都是由狀態行，請求／響應頭部，消息主題三部分組成，通常而言，消息主題都會通過gzip壓縮，或者自己傳輸的就是壓縮後的二進制文件，但狀態行和頭部卻沒有通過任何壓縮，直接以純文本傳輸，浪費流量資源
      原理：頭部壓縮須要在支持http2的瀏覽器和服務端之間，維護一份相同的靜態字典，包含常見的頭部名稱與值的組合，維護一份相同的動態字典，能夠動態的添加內容，支持基於靜態哈夫曼碼錶的哈夫曼編碼

    • http2支持服務器推送
      服務端推送是一種在客戶端請求以前發送數據的機制，當代網頁使用了許多資源：html，樣式表，腳本等，在http1.x中這些資源每個都必須明確的請求，這多是一個很慢的過程，由於服務器必須等待瀏覽器作的每個請求，網絡常常是空閒和未充分使用的
      爲了改善延遲，http2引入了server push，它容許服務端推送資源給瀏覽器，在瀏覽器明確請求以前，一個服務器常常知道一個頁面須要更多的附加資源，在他響應瀏覽器第一個請求時，能夠開始推送這些資源，這容許服務端去徹底充分利用一個可能空閒的網絡，改善頁面加載的時間
      有了http2的服務端推送，http1時代的內嵌資源的優化手段也變得沒有意義了，使用服務端推送更高效，由於客戶端能夠緩存起來，甚至能夠不一樣頁面之間共享

    • 並行雙向字節流的請求和響應
      在http2上，客戶端和服務端能夠把http消息分解成回不依賴的幀，而後亂序發送，最後再在另外一端把她們從新組合起來，同一連接上能夠有多個不一樣方向上的數據在傳輸，客戶端能夠一邊亂序發送stream，也能夠一邊接收着服務端的響應，在服務端同理
      把http消息分解爲獨立的幀，交錯發送，而後在另外一端從新組裝是http2最重要的一項加強，這個機制會在整個web技術棧中引起一系列的連鎖反應，從而帶來巨大的性能提高，由於

      1. 能夠並行交錯的發送請求，請求之間互不影響
      2. 能夠並行交錯的發送響應，響應之間互不干擾
      3. 只使用同一個鏈接便可並行的發送多個請求和響應
      4. 消除沒必要要的延遲，從而減小頁面加載的時間
        也就是說‘域名分區’的優化手段對於http2來講是無用的，由於資源都是並行交錯發送，且沒有限制，不須要額外的多域名並行下載

    • http2的請求優先級
      每一個http2流裏面有個優先值，這個優先值肯定着客戶端和服務端處理不一樣的流採起不一樣的優先級策略，高優先級的流應該優先發送，但又不是絕對的準守，可能又會引入首隊阻塞的問題，高優先級的請求慢致使阻塞其餘文件的交付，分配處理資源和客戶端與服務器間的帶寬，不一樣優先級的混合是必須的

  2. https
    http協議傳輸的數據都是未加密的，也就是明文的，所以使用http協議傳輸隱私信息很是不安全，爲了保證這些隱私數據能加密傳輸，因而網景公司設計了SSL協議用於對http協議傳輸的數據進行加密，從而誕生了https，如今的https使用的都是TSL協議

    https在傳輸數據以前須要客戶端和服務端之間進行一次握手，在握手的過程當中將確立雙方加密傳輸數據的密碼信息，TSL／SSL協議不只僅是一套加密傳輸的協議，TSL/SSL中使用了非對稱加密，對稱加密以及hash算法

    握手過程：

    • 瀏覽器將本身支持的一套加密規則發送給網站

    • 網站從中選出一組加密算法和hash算法，並將本身的身份信息以證書的形式發回給瀏覽器，證書裏面包含了網站地址，加密公鑰，以及證書的頒發機構等信息

    • 得到網站證書後瀏覽器要作如下工做

      1. 驗證證書的合法性（頒發證書的機構是否合法，證書中包含的網站地址是否與正在訪問的地址一致）若是證書受信任，則瀏覽器欄裏會顯示一個小鎖頭，不然會給出證書不受信的提示
      2. 若是證書受信任，或者是用戶接受了不受信的證書，瀏覽器會生成一串隨機數的密碼，並用證書中提供的公鑰加密
      3. 使用約定好的hash計算握手信息，並使用生成的隨機數對消息進行加密，最後將以前生成的全部信息發送給網站

    • 網站接收瀏覽器發來的數據以後要作如下工做

      1. 使用本身的私鑰將信息解密取出密碼，使用密碼解密瀏覽器發來的握手信息，並驗證hash是否與瀏覽器發來的一致
      2. 使用密碼加密一段握手信息，發送給瀏覽器

    • 瀏覽器解密並計算握手信息的hash，若是與服務端發來的hash一致，此時握手過程結束，以後全部的通訊數據將由以前瀏覽器生成的隨機密碼並利用對稱加密算法進行加密

    這裏瀏覽器與網站互相發送加密的握手信息並驗證，目的是爲了保證雙發都得到了一致的密碼，而且能夠正常的加密解密數據

    其中非對稱加密算法用於在握手過程當中加密生成的密碼，對稱加密算法用於對真正傳輸的數據進行加密，而hash算法用於驗證數據的完整性

    因爲瀏覽器生成的密碼是整個數據加密的關鍵，所以在傳輸的時候使用了非對稱加密算法對其進行加密，非對稱加密算法會生成公鑰和私鑰，公鑰只能用於加密數據，所以能夠隨意傳輸，而網站的私鑰用於對數據進行解密，因此網站都會很是當心的保管本身的私鑰，防止泄漏

    TSL握手的過程當中若是有任何錯誤，都會使加密鏈接斷開，從而阻止了隱私數據的傳輸，正是因爲https很是的安全，攻擊者沒法從中找到下手的地方，因而更多的是採用了假證書的手法來欺騙客戶端，從而獲取明文信息

  3. webSocket概述
    http協議是一種無狀態的協議，要實現有狀態的會話必須藉助一些外部機制如session和cookie，這或多或少或帶來一些不便，尤爲是服務端和客戶端須要實時交換數據的時候
    webSocket容許服務器和客戶端進行全雙工通訊，傳統的http是單工通訊的，它只容許客戶端向服務端發出請求，服務端被動返回數據，而不能主動向客戶端傳遞數據
    webSocket的請求頭部

    Connection: Upgrade             //通訊協議提高
Upgrade: websocket              //傳輸協議升級爲websocket
Sec-WebSocket-Key: **********   //握手協議密鑰，base64位編碼的16字節的隨機字符串
複製代碼

    webSocket的響應頭部

    Connection: Upgrade                 //通訊協議提高
Upgrade: websocket                  //傳輸協議升級爲websocket
Sec-WebSocket-Accept: **********    //將客戶上報的Sec-WebSocket-Key和一段GUID(258EAFA5-E914-47DA-95CA-C5AB0DC85B11)進行拼接，再將這個拼接的字符串作SHA-1 hash計算，而後再把獲得的結果經過base64加密，最後再返回給客戶端
複製代碼

    WebSocket,ajax輪詢和long poll

參考連接 http2.0協議你應該準備的面試題
參考連接 面試時如何優雅的談論http
參考連接 http2.0的奇妙平常 參考連接 淺談WebSocket協議及其實現

  1. 說說對洗牌算法的理解和如何驗證其正確性
    洗牌算法以前沒了解過，剛面到的時候好蒙，閒話很少說，這裏說下洗牌算法的js實現

    Fisher-Yates
    這是最經典的洗牌算法，其算法思想是從原數組中隨機抽取一個新的元素到新數組中

    從還沒處理的數組（假如還剩n個）中，產生一個[0,n]之間的隨機數random

    從剩下的n個元素中把第random個元素取出到新數組中

    刪除原數組第random個元素

    重複第2 3步直到全部的元素取完

    最終返回一個新的打亂的數組

    代碼實現

    function shufle(arr){
    var result = [],
        random;
    while(arr.length > 0){
        random = Math.floor(Math.random() * arr.length);
        result.push(arr[random])
        arr.splice(random, 1)
    }
    return result;
}
複製代碼

    這種算法的時間複雜度是O(n2)

參考連接 洗牌算法的js實現
參考連接 Fisher–Yates shuffle 洗牌算法

  1. 說一下你對事件委託和事件代理的理解？
    什麼是事件委託？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件，當咱們須要對不少元素添加事件的時候，能夠經過事件添加到他們的父節點二將時間委託給父節點來觸發處理函數

    爲何要使用事件委託？
    通常來講，dom須要有事件處理程序，咱們都會直接給它設置事件處理程序就行了，那若是是不少的dom須要添加事件處理呢？好比咱們這裏有100個li，每一個li都有相同的click事件，那麼咱們會用for循環的方法來遍歷全部的li，而後給他們添加事件，那麼這樣會存在什麼問題呢？
    在JavaScript中，添加到頁面上的事件處理程序的數量將直接關聯到頁面總體的運行性能，由於須要不斷的與dom節點進行交互，訪問dom的次數越多，引發瀏覽器重繪與重排的次數就越多，就會延長整個頁面交互就緒時間，這就是爲何性能優化的主要思想是減小dom操做的緣由，若是使用事件委託，就會將全部的操做放到js程序裏面，與dom的操做就只須要交互一次，這樣就能大大的減小與dom的交互次數，提升性能
    每一個函數都是一個對象，是對象就會佔用內存，內存佔用率就越大，天然性能就差了，好比上面的100個li，就要佔用100個內存空間，若是是1000個，10000個呢，若是使用事件委託，那麼咱們就能夠只對它的父級這一個對象（若是隻有一個父級）進行操做，這樣咱們就須要一個內存空間就夠了，是否是省了不少，天然性能就會更好

    事件委託的原理？
    事件委託是利用事件的冒泡機制來實現的，何爲事件冒泡呢？這裏介紹下瀏覽器dom事件處理的過程，dom2.0模型將事件流程分爲三個階段：事件捕獲階段，事件目標階段，事件冒泡階段。
    事件捕獲：當某個元素觸發某個事件，頂層對象document就會發出一個事件流，隨着dom樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素，在這個過程當中，事件相應的監聽函數是不會被觸發的
    事件目標：當到達目標元素以後，執行目標元素該事件相應的處理函數，若是沒有綁定監聽函數，那就不執行
    事件冒泡：從目標元素開始，往頂層元素傳播，途中若是有節點綁定了相應的事件處理函數，這些函數都會被一次觸發，若是想阻止事件冒泡，可使用event.stopPropgation()或者event.cancelBubble=true來阻止事件的冒泡傳播

    事件委託怎麼實現：
    Event對象提供了一個屬性叫target，能夠返回事件的目標節點，咱們稱爲事件源，也就是說，target就能夠表示爲當前事件操做的dom，可是不是真正操做的dom，固然，這個是有兼容性的，標準瀏覽器用event.target，IE瀏覽器用event.srcElement，此時知識獲取了當前節點的位置，並不知道是什麼節點名稱，這裏咱們用nodeName來獲取具體是什麼標籤名，這個返回的是一個大寫的，通常轉化爲小寫再進行比較
    若是你想將事件委託給父元素來處理，但每一個子元素的事件內容又不相同時，這裏咱們能夠給每一個子元素添加一個惟一的key來做標識，而後在父元素中對其進行分別的處理

    const list = document.querySelector('#list) const lists = list.querySelector('#list > li')
for(let i=0; i<lists.length; i++){
    lists[i].dataset.key = 'list-' + i
}
list.addEventListener('click',function(e){
    const event = e || window.event
    const target = event.target || event.srcElement  
    if(target.nodeName.toLocaleLowerCase() === 'li'){
        switch(target.dataset.key){
            case 'list-1':
                do something-1
                break
            case 'list-2':
                do something-2
                break
            ...
            default:
                do something-3
                break
        }
    }
})  
複製代碼

參考連接 JavaScrip事件代理和委託
參考連接 JS的事件委託和事件代理詳解

  1. 說一下你對css重繪和重排的理解，兩個有什麼不一樣？
    這一題考的實際上是網頁性能的問題，咱們先理解下對網頁性能產生影響到因素，瞭解下網頁是怎麼生成的

    網頁生成的過程，大體能夠分爲五步：

    • html代碼轉化爲dom
    • css代碼轉化爲cssom
    • 結合dom和cssom，生成一棵渲染樹（包含每一個節點的視覺信息）
    • 生成佈局layout，即將全部的渲染樹的節點進行平面合成
    • 將佈局繪製paint在屏幕上

    在這五步裏面，第一步和第三步都很是快耗時的是第四步和第五步
    其中生成佈局flow和繪製paint這兩步，合稱爲渲染render

    重繪和重排
    網頁生成的時候，至少會渲染一次，用戶訪問的過程當中，還會不斷的從新渲染
    如下三種狀況，會致使網頁從新渲染

    • 修改dom
    • 修改樣式表
    • 用戶事件

    從新渲染，就須要從新生成佈局和從新繪製，前者叫作重排reflow，後者交貨重繪repaint
    須要注意的是，重繪不必定須要重排，好比改變某個網頁元素的顏色，就只會觸發重繪，不會觸發重排，由於佈局沒有改變，可是，重排必定會致使重繪，好比改變一個網頁元素的位置，就會同時觸發重排和重繪，由於佈局改變了

    對於性能的影響
    重繪和重排會不斷觸發，這是不可避免的，可是，他們是很是耗費資源的，是致使網頁性能低下根本緣由
    要提升網頁性能，就是要下降重排和重繪的頻率和成本，儘可能少觸發從新渲染

    • 通常來講，樣式的寫操做以後，若是有下面這些屬性的讀操做，都會引起瀏覽器當即從新渲染
      • offsetTop/offsetLeft/offsetWidth/offsetHeight
      • scrollTop/scrollLeft/scrollWidth/scrollHeight
      • clientTop/clientLeft/clientWidth/clientHeight
      • getComputeStyle()
    • 因此，從性能角度考慮，儘可能不要把讀操做和寫操做，放在一個語句裏，通常的規則是
      • 樣式表越簡單，重繪和重排就越快
      • 重排和重繪的dom層級越高，成本就越高
      • table元素的重繪和重排成本，要高於div元素

    提升性能的九個技巧

    • dom的多個讀操做（或者多個寫操做），應該放在一塊兒，不要兩個讀操做之間，加入一個寫操做
    • 若是某個樣式是經過重排獲得的，那麼最好緩存結果，避免下一次用到的時候，瀏覽器又要重排
    • 不要一條條的改變樣式，而是要經過改變class，或者csstext屬性，一次性的改變樣式
    • 儘可能使用離線dom，而不是真正的網頁dom，來改變元素樣式，好比，使用cloneNode()方法，在克隆的節點上進行操做，而後再用克隆的節點替換原始節點
    • 先將原素設爲display：none(須要一次重排和重繪)，而後對這個節點進行100次操做，最後再恢復顯示(須要一次重排和重繪)，這樣一來，你就用兩次從新渲染，取代了可能高達100次的從新渲染
    • position屬性爲absolute或fixed的元素，重排的開銷會比較小，由於用考慮他對其餘元素的影響
    • 只有必要的時候，纔會將元素的display屬性設爲課件，由於不可見的元素不影響重排和重繪，另外visibility：hidden的元素只會對重繪有影響，不會影響重排
    • 使用虛擬dom的腳本庫，如react
    • 使用window.requestAnimationFrame()，window.requestIdleCallback()這兩個方法調節從新渲染

參考連接 網頁性能管理詳解

由於懶而不想寫的部分

  1. ajax原生實現
  2. ajax readyState值理解
  3. Event loop事件循環理解
  4. js事件循環機制
  5. react+redux理解
  6. js執行順序
  7. 強緩存和協商緩存
  8. http緩存機制
  9. http緩存小結

大概就這些吧，從年後初八面試到如今，磕磕碰碰花了挺多精力的，前段時間過了騰訊三面，讓我等hr電話，欣喜若狂的覺得能進鵝廠了，等了一個多禮拜，杳無音信，處處找人問，獲得的結果是等四月中下旬的校招再通知我面試，瞬間一盆冷水澆下來，我基礎比較差，算法功底也不強，自知夠不上大廠的門，認了，本身本事不夠，怨不得別人，這段時間在v2ex這個社區收穫挺多的，寫篇本身的面經給你們看看，各位都是大佬，有什麼寫錯的地方，多多指教，不喜勿噴，謝謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程