回覆列表
  • 1 # 使用者6769579981144

    就像正常的下載檔案一樣。把服務的js檔案下載下來,然後在本地瀏覽器執行。

    另外你需要補充一下瀏覽器載入、解析、渲染的一些知識。複製一下我之前整理的筆記。

    瀏覽器載入

    載入過程 當瀏覽器獲得一個html檔案時,會”自上而下“載入,並在載入過程中進行解析渲染。 載入過程中遇到外部css檔案,瀏覽器另外發出一個請求,來獲取css檔案。 遇到圖片資源,瀏覽器也會另外發出一個請求,來獲取圖片資源。這是非同步請求,並不會影響html文件進行載入。 但是當文件載入過程中遇到js檔案,html文件會掛起渲染(載入解析渲染同步)的執行緒,不僅要等待文件中js檔案載入完畢,還要等待解析執行完畢,才可以恢復html文件的渲染執行緒。載入外聯js和css的阻塞情況

    一個不太嚴謹但方便記憶的口訣:JS 全阻塞,CSS 半阻塞

    JS 會阻塞後續 DOM 解析以及其它資源(如 CSS,JS 或圖片資源)的載入。CSS不阻塞DOM的載入和解析(它只阻塞DOM的渲染呈現。這裡談載入),不會阻塞其它資源(如圖片)的載入,但是會阻塞 後續JS 檔案的執行(原因之一是,js執行程式碼可能會依賴到css樣式。css只阻塞執行而不阻塞js的載入)。鑑於上面的特性,當css後面存在js的時候,css會間接地阻塞js後面資源的載入(css阻塞js,js阻塞其他資源 )。現代瀏覽器會進行 prefetch 最佳化,瀏覽器在獲得 html 文件之後會對頁面上引用的資源進行提前下載

    外聯js檔案使用defer屬性和asyn可以達到非同步非阻塞載入的效果,由於現代瀏覽器都存在 prefetch,所以 defer, async 可能並沒有太多的用途,可以作為了解擴充套件知識,僅僅將指令碼檔案放到 body 底部(但還是在之前)就可以起到很不錯的最佳化效果(遵循先解析再渲染再執行script這個順序)。當把js放在最後的時候,其實瀏覽器將自動忽略標籤,從而自動在最後的最後補上。

    瀏覽器解析

    1、瀏覽器透過請求的 URL 進行域名解析,向伺服器發起請求,接收檔案(HTML、CSS、JS、Images等等)。2、HTML 檔案載入後,開始構建 DOM Tree(DOM樹)3、CSS 樣式檔案載入後,開始解析和構建 CSS Rule Tree4、Javascript 指令碼檔案載入後, 透過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree

    瀏覽器渲染

    1、瀏覽器引擎透過 DOM Tree 和 CSS Rule Tree 構建 Rendering Tree(渲染樹)2、佈局階段——在螢幕上繪製渲染樹中的所有節點的幾何屬性,比如: 位置,寬高,大小等等,這個過程稱為 Flow 或 Layout 。3、繪製元素——繪製所有節點的可視屬性。4、合併渲染層——把以上繪製的所有圖層(類似於PhotoShop中的“圖層”)合併,最終輸出一張圖片

    其中的階段3、4可稱之為Paint

    Repaint和Reflow

    當用戶在瀏覽網頁時進行互動或透過 js 指令碼改變頁面結構時,以上的部分操作有可能重複執行,此過程稱為 Repaint 或 Reflow。

    Repaint

    當元素改變的時候,將不會影響元素在頁面當中的位置(比如 background-color, border-color, visibility),瀏覽器僅僅會應用新的樣式重繪此元素,此過程稱為 Repaint。

    Reflow

    當元素改變的時候,將會影響文件內容或結構,或元素位置,此過程稱為 Reflow。( HTML 使用的是 flow based layout ,也就是流式佈局,所以,如果某元件的幾何尺寸發生了變化,需要重新佈局,也就叫 Reflow。)

    Reflow 的成本比 Repaint 的成本高得多的多。我們應當儘量避免Reflow。

    如何最佳化瀏覽器渲染過程

    1、建立有效的 HTML 和 CSS ,不要忘記指定文件編碼,比如。2、CSS 樣式應該包含在 中, Javascript 指令碼出現在末尾。3、減少 CSS 巢狀層級和選擇適當的選擇器,可參考 如何提升 CSS 選擇器效能。4、不要透過 JS 逐條修改 DOM 的樣式,提前定義好 CSS 的 Class 進行操作。5、儘量減少將 DOM 節點屬性值放在迴圈當中,會導致大量讀寫此屬性值。6、儘可能的為產生動畫的 HTML 元素使用 fixed 或 absolute 的 position ,那麼修改他們的 CSS 是不會 Reflow 的。

  • 中秋節和大豐收的關聯?
  • 兩個電阻並聯,總電阻會變大還是變小?