3：面試總結

時間 2019-12-07

原文原文鏈接

1.瀏覽器的運行原理

瀏覽器的渲染機制通常分爲如下幾個步驟
1.處理 HTML 並構建 DOM 樹。
2.處理 CSS 構建 CSSOM 樹。
3.將 DOM 與 CSSOM 合併成一個渲染樹。
4.根據渲染樹來佈局，計算每一個節點的位置。
5.調用 GPU 繪製，合成圖層，顯示在屏幕上。
複製代碼

2.如何提升CSS性能?CSS優化、提升性能提高總彙

主要表現爲： 加載性能 （主要是從減小文件體積，減小阻塞加載，提升併發方面入手），選擇器性能，渲染性能，可維護性。
一、儘可能將樣式寫在單獨的css文件裏面，在head元素中引用
(1)內容和樣式分離，易於管理和維護
(2)減小頁面體積
(3)css文件能夠被緩存、重用，維護成本下降
二、不使用@import  
若是你使用@import屬性引入css的話,當用戶瀏覽的網速較慢時,他會看到一個沒有風格樣式的頁面,而後隨着CSS文件被下載完成才能夠看到應有的風格
三、避免使用複雜的選擇器，層級越少越好  
項目的模塊愈來愈多，功能愈來愈複雜，咱們寫的CSS選擇器會內套多層，愈來愈複雜。建議選擇器的嵌套最好不要超過三層，簡潔的選擇器不只能夠減小css文件大小，提升頁面的加載性能，瀏覽器解析時也會更加高效，也會提升開發人員的開發效率，下降了維護成本。
四、精簡頁面的樣式文件，去掉不用的樣式  
(1)樣式文件偏大，影響加載速度
(2)瀏覽器會進行多餘的樣式匹配，影響渲染時間。
根據當前頁面須要的css去合併那些當前頁面用到的CSS文件， 合併成一個文件有一個優勢：樣式文件會被瀏覽器緩存，進入到其餘頁面樣式文件不用再去下載。
五、利用CSS繼承減小代碼量  
咱們知道有一部分CSS代碼是能夠繼承的，若是父元素已經設置了該樣式，子元素就不須要去設置該樣式，這個也是提升性能的行之有效的方法。
六、慎重使用高性能屬性：浮動、定位；  
一方面，浮動的種種複雜的佈局規則註定了它是一種試探性局部 reflow 式的佈局算法。瀏覽器須要花費不少精力來處理它。另外一方面，浮動元素的佈局牽涉到的因素更多。在同一佈局空間中，全部浮動元素均存在於「靜態層」之上的「浮動層」，不只浮動層中的多個浮動元素會相互影響，浮動元素與靜態層也有互動。
七、css樣式前綴
標準化各類瀏覽器前綴，帶瀏覽器前綴的在前，標準的在後
八、css屬性值 
屬性值爲0時，不加單位
屬性值爲浮點數0.**時，能夠省略小數點前的0 
複製代碼

3.手機端怎麼優化

4.事件監聽的幾種經常使用方法

5.性能優化

詳解：yuchengkai.cn/docs/fronte…css

6.懶加載

1.圖片進入可視區以後請求圖片資源；
2.對於電商等圖片不少，頁面很長的業務場景適用；
3.減小無效資源的加載；
4.併發加載的資源過多會阻塞js的加載，影響網站的正常使用；
懶加載就是將不關鍵的資源延後加載。

懶加載的原理就是隻加載自定義區域（一般是可視區域，但也能夠是即將進入可視區域）內須要加載的東西。對於圖片來講，先設置圖片標籤的 src 屬性爲一張佔位圖，將真實的圖片資源放入一個自定義屬性中，當進入自定義區域時，就將自定義屬性替換爲 src 屬性，這樣圖片就會去下載資源，實現了圖片懶加載。

懶加載不只能夠用於圖片，也可使用在別的資源上。好比進入可視區域纔開始播放視頻等等。
複製代碼

代碼顯示html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>懶加載</title>
    <style>
        * {
            margin: 0;
        }
        .images-list{
            text-align: center;
        }
        .image-item {
            display: block;
            margin: 0 auto;
            margin-bottom: 50px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="images-list">
        <img src="" class="image-item" lazyload="true"
            data-original="https://img11.360buyimg.com/babel/s190x210_jfs/t1/67382/7/737/7499/5cef7cdcE7e558a19/20bf923d00519d1b.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img11.360buyimg.com/babel/s190x210_jfs/t1/37644/21/10456/7615/5cf0e744E4f1c0791/9099b47069899343.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img12.360buyimg.com/babel/s190x210_jfs/t1/33253/40/12868/28087/5cf4ba82Eeb1f20db/6269ad71b6c783ee.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img10.360buyimg.com/babel/s190x210_jfs/t1/46094/12/1361/6091/5cf12dabE8936db02/d715b9b23b05f6ef.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img11.360buyimg.com/babel/s190x210_jfs/t1/38402/3/7768/7973/5cf10a9dEcbf4ebe3/99bdf2f7bbcc4098.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img11.360buyimg.com/babel/s190x210_jfs/t1/53503/9/1235/8719/5cef7be0E45e8daa3/d5f7827394839f29.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img10.360buyimg.com/babel/s190x210_jfs/t1/61252/39/1085/6228/5cf51d68Ee6890774/4ac1a93e51b98396.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img12.360buyimg.com/babel/s190x210_jfs/t1/64182/40/699/8910/5cef37f5Eacf7aa07/e0e9f04f5e55efb0.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img12.360buyimg.com/babel/s190x210_jfs/t1/54510/8/1271/6158/5cef5bfbEede24168/4aa624bd9ada781f.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img11.360buyimg.com/babel/s190x210_jfs/t1/68844/9/755/10390/5cef6d16E17865545/819001724f67aa8f.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img11.360buyimg.com/babel/s190x210_jfs/t1/67382/7/737/7499/5cef7cdcE7e558a19/20bf923d00519d1b.png!q90!cc_190x210" />
        <img src="" class="image-item" lazyload="true"
            data-original="https://img10.360buyimg.com/babel/s190x210_jfs/t1/61252/39/1085/6228/5cf51d68Ee6890774/4ac1a93e51b98396.png!q90!cc_190x210" />
    </div>
    <script>
        var viewHeight = document.documentElement.clientHeight//獲取可視區高度
        function lazyload() {
            var eles = document.querySelectorAll('img[data-original][lazyload]');
            Array.prototype.forEach.call(eles, function (item, index) {
                var rect
                if (item.dataset.original === "")
                    return
                rect = item.getBoundingClientRect()// 用於得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    !function () {
                        var img = new Image()
                        img.src = item.dataset.original
                        img.onload = function () {
                            item.src = img.src
                        }
                        item.removeAttribute("data-original");//移除屬性，下次再也不遍歷
                        item.removeAttribute("lazyload");
                    }()
                }
            })
        }
        lazyload()//剛開始還沒滾動屏幕時，要先觸發一次函數，初始化首頁的頁面圖片
        document.addEventListener("scroll", lazyload);

    </script>
</body>

</html>
複製代碼

7.HTTP 和 HTTPS 的共同點和區別算法

1.https 協議須要到 ca 申請證書，通常免費證書較少，於是須要必定費用。
2.http 是超文本傳輸協議，信息是明文傳輸， https 則是具備安全性的ssl加密傳輸協議。
3.http 和 https 使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
4.http 的鏈接很簡單，是無狀態的； HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳輸、身份認證的網絡協議，比 http 協議安全。
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。