Web運行環境總結

1. 頁面加載過程

1.1 加載一個資源的過程

在瀏覽器地址欄輸入URL

瀏覽器查看緩存(強緩存)

瀏覽器解析URL獲取協議，主機，端口，path

瀏覽器組裝一個HTTP（GET）請求報文

瀏覽器根據DNS服務器得要域名的IP地址

打開一個socket與目標IP地址，端口創建TCP連接

向這個IP的機器發送http/https請求

服務器收處處理並返回http請求

判斷協商緩存

服務器將響應報文經過TCP鏈接發送回瀏覽器

關閉TCP鏈接

瀏覽器檢查響應狀態嗎作出不一樣處理

若是資源可緩存，進行緩存

瀏覽器獲得返回的內容

1.2 瀏覽器渲染頁面的過程

根據HTML結構生成DOM Tree

根據CSS生成CSSOM

將DOM和CSSOM整合成RenderTree（渲染樹，比DOM樹多了樣式）

根據RenderTree開始渲染和展現

HTML解析器遇到沒有async和defer的script時，會執行並阻塞渲染 （js可能會改變dom結構）

瀏覽器在Document對象上觸發DOMContentLoaded事件

顯示頁面

圖片加載完畢

調用onload

1.3 爲何把css放在head中

在html渲染以前渲染css

若是css放在html元素後面，會先按沒有css的狀況渲染html，而後加載到css後再從新渲染html元素，這樣會損耗性能。

1.4 爲何要把js放在body的最下面

1.不會阻塞body中元素的渲染，能讓頁面更快出來

2.script能拿到全部的標籤

1.5 圖片

圖片是異步請求，不會影響dom樹的渲染

1.6 load,DOMContentLoaded

window.addEventListener('load',function(){
         //頁面資源所有加載完成，包括圖片視頻
        });

        document.addEventListener('DOMContentLoaded',function(){
         //DOM 渲染完便可執行，圖片視頻尚未加載完
        });

• DOMContentLoaded : dom結構化完成之後
• load：dom 結構化以及靜態資源所有加載完畢之後
• $(document).ready 底層是DOMContentLoaded函數
• $(window).load 底層是load函數
• $(function () {}) 是$(document).ready的縮寫

var show = console.log.bind(console);

        show('觀察腳本加載的順序')

        document.addEventListener("DOMContentLoaded", function () {
            show('DOMContentLoaded回調')
        }, false);

        window.addEventListener("load", function () {
            show('load事件回調')
        }, false);


        show('腳本解析一');


        $(document).ready(function () {
            show('$(document).ready')
        })
        
        // 測試加載
        $(function () {
            show('腳本解析二');
        })


        $(window).load(function () {
            show('$(document).load');
        });

        show('腳本解析三');

1.7 重排Reflow

DOM結構中的元素都有本身的盒子，這些都須要瀏覽器根據各類樣式來計算並根據計算結果來將元素放到他們該出現的位置，稱爲Reflow。

觸發reflow的條件：

1.增刪改dom節點

2.移動dom位置或者有動畫

3.修改css樣式

4.resize窗口或者滾動（移動端沒有該問題）

1.8 重繪Repaint

頁面要呈現的內容繪製在屏幕上。

DOM改動，CSS改動（判斷頁面呈現的內容有沒有發生變化）

1.9 避免relow和repaint

1.儘可能用class來修改樣式

若是要修改多個樣式，每一個樣式修改時都會出發reflow，能夠將這些樣式保存在一個class中，每次修改只reflow一次。

1. 將元素的position設置爲absolute和fixed可使元素從DOM樹結構中脫離出來獨立的存在，而瀏覽器在須要渲染時只須要渲染該元素以及位於該元素下方的元素，從而在某種程度上縮短瀏覽器渲染時間，這在當今愈來愈多的Javascript動畫方面尤爲值得考慮。
2. 不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局