瀏覽器加載過程

時間 2019-11-13

原文原文鏈接

Q1:瀏覽器加載過程？
Q2：加載時候容易遇到哪些問題？產生的緣由？如何解決？

A1：
1.用戶訪問網頁，DNS服務器（域名解析系統）會根據用戶提供的域名查找對應的IP地址，找到後，系統會向對應IP地址的網絡服務器發送一個http請求。（解析域名成ip，發送請求）
2.網絡服務器解析請求，併發送請求給數據庫服務器。（解析請求，發送數據庫請求）
3.數據庫服務器將請求的資源返回給網絡服務器，網絡服務器解析數據，並生成html文件，放入http response中，返回給瀏覽器。（返回一個response）
4.瀏覽器解析 http response。
5.下載html文件，以及html文件內包含的外部引用文件，及文件內涉及的圖片或者多媒體文件。（下載文件）

訪問服務器端可能遭遇的問題：
網絡服務器沒法獲取數據庫服務器返回的資源文件（http response 404），或者因爲併發緣由暫時沒法處理用戶的http請求（http response 500）

A2：
1.阻塞現象：在頁面中咱們一般會引用外部文件，而瀏覽器在解析HTML頁面是從上到下依次解析、渲染，若是<head>中引用了一個a.js文件，而這個文件很大或  者有問題，須要2秒加載，那麼瀏覽器會中止渲染頁面（此時是白屏顯示，就是頁面啥都沒有），2秒後加載完成纔會繼續渲染。
緣由：JS有可能會修改DOM，最爲經典的document.write，這意味着，在JS執行完成前，後續全部資源的下載多是沒有必要的，這是js阻塞後續資源下載的根本緣由。
辦法：能夠將外部引用的js文件放在</body>前。
緣由：可能會有 var width = $('#id').width()，這意味着，js代碼執行前，瀏覽器必須保證css文件已下載和解析完成。這也是css阻塞後續js的根本緣由。
辦法：當js文件不須要依賴css文件時，能夠將js文件放在頭部css的前面

優化方法：
1.現代瀏覽器存在 prefetch 優化，瀏覽器會另外開啓線程，提早下載js、css文件，須要注意的是，預加載js並不會改變dom結構，他將這個工做留給主加載。
2.預加載網頁，利用空餘時間來提早加載該網頁的後續網頁。<link rel="prefetch" href="http://">
3.爲js腳本添加defer屬性，使得瀏覽器不等js腳本加載執行完，就加載後面的圖片。既然圖片資源都已經加載出來了，就不要在js內寫document.write啦。
<script defer="true" src="JavaScript.js" type="text/javascript"/>
4.不要在外部調用的js文件中調用運行時間較長的函數，若是必定要用，能夠使用setTimeout函數

END:要了解遊戲規則，以及漏洞

參考文章連接：1.http://www.jianshu.com/p/e141d1543143
                     2.http://www.cnblogs.com/soundcode/p/5767812.html
                     3.http://www.ruanyifeng.com/blog/2014/10/event-loop.htmljavascript

相關標籤/搜索

每日一句

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