整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輸入U(xiǎn)RL到頁面加載的過程涉及多個步驟，包括**DNS解析、TCP連接、發(fā)送HTTP請求、服務(wù)器處理請求、瀏覽器解析渲染頁面以及斷開連接**。具體如下：
1. **DNS解析**：當(dāng)你在瀏覽器中輸入一個URL時，瀏覽器首先需要將域名轉(zhuǎn)換為IP地址。這個過程稱為DNS解析。DNS服務(wù)器負(fù)責(zé)將人類可讀的域名（如www.example.com）轉(zhuǎn)換為機(jī)器可讀的IP地址。
2. **TCP連接**：一旦瀏覽器獲得了目標(biāo)服務(wù)器的IP地址，它就會嘗試與服務(wù)器建立TCP連接。這個過程通常被稱為TCP三次握手，它確保了數(shù)據(jù)的可靠傳輸。
3. **發(fā)送HTTP請求**：TCP連接建立后，瀏覽器會向服務(wù)器發(fā)送一個HTTP請求，請求中包含了它想要獲取的資源（如HTML文件、圖片、CSS或JavaScript文件等）。
4. **服務(wù)器處理請求**：服務(wù)器接收到請求后，會根據(jù)請求的內(nèi)容進(jìn)行處理。這可能涉及到查詢數(shù)據(jù)庫、執(zhí)行服務(wù)器端腳本等操作。處理完成后，服務(wù)器會將請求的資源作為一個HTTP響應(yīng)返回給瀏覽器。
5. **瀏覽器解析渲染頁面**：瀏覽器接收到服務(wù)器返回的數(shù)據(jù)后，會開始解析HTML文檔，并根據(jù)HTML、CSS和JavaScript指令渲染頁面。這個過程涉及到構(gòu)建DOM樹、計(jì)算樣式、布局以及繪制頁面內(nèi)容等子步驟。
6. **斷開連接**：一旦頁面加載完成，瀏覽器和服務(wù)器之間的TCP連接通常會被關(guān)閉。這個過程稱為TCP四次揮手，它標(biāo)志著數(shù)據(jù)傳輸?shù)慕Y(jié)束。
覽器加載一個js腳本，會在devtools中留下各種痕跡，elements中的script元素，console中的日志，source中的代碼，network中的網(wǎng)絡(luò)請求等
這個比較簡單，插入js的時候設(shè)置好id，在js中刪掉自身就好了
<script id="xxx">
// todo
document.getElementById("xxx").remove();
</script>
對于引用js
<script id="xxx" src="a.js"></script>
// a.js
document.getElementById("xxx").remove()
對于動態(tài)加載的js也是一樣的
<script>
let e=document.createElement("script");
e.id="xxx";
e.src="a.js";
document.head.appendChild(e);
</script>
// a.js
document.getElementById("xxx").remove()
或者也可以這樣
<script>
let e=document.createElement("script");
e.src="a.js";
document.head.appendChild(e);
e.remove();
</script>
雖然看起來很奇怪，但a.js確實(shí)能執(zhí)行，似乎是加載a.js時阻塞了腳本執(zhí)行，執(zhí)行完a.js之后再remove
clear就好了
console.clear()
直接引用和動態(tài)加載都會在source中出現(xiàn)
<script src="a.js"></script>
<script>
let e=document.createElement("script");
e.src="a.js";
document.head.appendChild(e);
</script>
這樣都是不行的，經(jīng)過測試發(fā)現(xiàn)動態(tài)插入js代碼時不會被記錄在source中
<script>
fetch("a.js").then(resp=> {
return resp.text()
}).then(text=> {
let e=document.createElement("script");
e.innerHTML=text;
document.head.appendChild(e);
})
</script>
這樣a.js就不會出現(xiàn)在source里了
常規(guī)HTTP/WebSocket都會被記錄，無法繞過，但是WebRTC不會，WebRTC可以基于UDP/TCP傳輸，WebRTC提供createDataChannel API，可以用于傳輸文本，那么就可以實(shí)現(xiàn)network隱藏加載
考慮WebRTC需要傳遞offer和icecandidate，還是得通過HTTP/WebSocket傳輸，而且復(fù)雜網(wǎng)絡(luò)環(huán)境下還需要使用或部署STUN/TURN服務(wù)器，穩(wěn)定性有待考慮
WebRTC技術(shù)可以參考學(xué)習(xí)我最近看的幾篇文章透明日報(bào)20200801期
其他的方法我還沒有找到，技術(shù)不行就社會工程
一個思路是可以偽裝成其他流量混過去，比如png
<script>
fetch("a.png").then(resp=> {
return resp.text()
}).then(text=> {
let e=document.createElement("script");
e.innerHTML=text;
document.head.appendChild(e);
})
</script>
然后在delvtools里也看不出來
另外一個思路是devtools目前只在打開的時候記錄network數(shù)據(jù)，那么只要在devtools關(guān)閉的時候加載資源，打開就不加載，這樣就不會出現(xiàn)在network里了
新的問題又出現(xiàn)了，如何檢測devtools的狀態(tài)，網(wǎng)上已經(jīng)有不少公開技巧了
https://github.com/sindresorhus/devtools-detect
https://github.com/AEPKILL/devtools-detector
還可以在哪里找到加載和執(zhí)行痕跡呢
還有什么方法可以隱藏這些痕跡呢
如果你現(xiàn)在也想學(xué)習(xí)前端開發(fā)技術(shù)，在學(xué)習(xí)前端的過程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，你都可以申請加入我的Q群:前114中6649后671還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享，還有許多大廠面試真題。希望能夠?qū)δ銈冇兴鶐椭?/p>
站前端的用戶體驗(yàn)，決定了用戶是否想要繼續(xù)使用網(wǎng)站以及網(wǎng)站的其他功能，網(wǎng)站的用戶體驗(yàn)佳，可留住更多的用戶。除此之外，前端優(yōu)化得好，還可以為企業(yè)節(jié)約成本。那么我們應(yīng)該如何對我們前端的頁面進(jìn)行性能優(yōu)化呢？
前端性能優(yōu)化可以分為三個方面：接口訪問優(yōu)化、靜態(tài)資源優(yōu)化和頁面渲染速度優(yōu)化。
1.1、減少http請求，合理設(shè)置 HTTP緩存
http協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，每次發(fā)送http請求時，都需要建立連接、通信、斷開連接，在服務(wù)器端每個http都需要開啟獨(dú)立的線程去處理。所以盡量減少http請求，盡可能地提高訪問性能。
減少http請求的方法：
1.2、減少cookie傳輸
cookie 存在于 http 頭，在客戶端與服務(wù)器之間交換，盡可能地控制 cookie 的大小，cookie越小，響應(yīng)速度越快，減少 cookie 傳輸，響應(yīng)速度更快。
1.3、使用CDN提供靜態(tài)文件
使用 CDN 可以更快地在全球范圍內(nèi)獲取到你的靜態(tài)文件，加快網(wǎng)頁加載。
1.4、啟用 GZIP 壓縮
http 協(xié)議上 GZIP 編碼，是一種用來改進(jìn) web 應(yīng)用程序的。開啟 GZIP 后，服務(wù)器會把網(wǎng)頁內(nèi)容壓縮后傳輸，一般能壓縮到原大小40%，這樣網(wǎng)頁傳輸速度就更快了。GZIP 有兩大好處：一是減少存儲空間，二是通過網(wǎng)絡(luò)傳輸文件時，可以減少傳輸時間。
1.5、分域存放資源
HTTP 客戶端一般對同一個服務(wù)器的并發(fā)連接個數(shù)都是有限制的，通常最大并行連接為四了，剩下的會進(jìn)入等待隊(duì)列，等前邊的執(zhí)行完畢，等待的才會執(zhí)行。所以利用多域名主機(jī)存放資源，增加并行連接量，縮短資源加載時間。
1.6、減少頁面重定向
開啟 https 可以有效防范攻擊，保證用戶始終訪問到網(wǎng)站的加密連接，保護(hù)數(shù)據(jù)安全，同時省去 301/302 跳轉(zhuǎn)的時間，大大提升網(wǎng)站的安全系數(shù)和用戶體驗(yàn)。
如果在網(wǎng)站設(shè)置當(dāng)用戶訪問域名的時候強(qiáng)制 https 進(jìn)行 301 或者 302 跳轉(zhuǎn)，但是這個過程中，用到 HTTP 因此容易發(fā)生劫持，受到第三方的攻擊。所以盡可能使用https安全。
1.7、避免使用iframe
iframe 相當(dāng)于本頁面又嵌套了一個頁面，消耗性能，還要加載嵌套頁面的資源，所以更消耗時間。
1.8、借用瀏覽器緩存
ajax 請求到的數(shù)據(jù)，可以緩存到瀏覽器，下次使用的時候無需再次獲取，直接取緩存數(shù)據(jù)就可以。這個會根據(jù)具體的項(xiàng)目來做，比如常用的角色類型就會緩存，獲取到的普通數(shù)據(jù)為了保證實(shí)時性，不能使用緩存。
2.1、壓縮 html、css、js 等文件
刪除不必要的空格、注釋和中行，減少文件大小，顯著減少用戶下載時間，加快網(wǎng)頁加載速度。可以直接使用壓縮工具，可以自動刪除所有不必要內(nèi)容。
2.2、在 js 之前引用 css
這是一個小細(xì)節(jié)，js 執(zhí)行的時候會進(jìn)入阻塞，如果放入 js 之后加載，會等待 js 執(zhí)行完成之后才能加載 css，渲染頁面，此時就會出現(xiàn)布局錯亂。所以 css 文件需要非阻塞引入，以防DOM 花費(fèi)更多時間才能渲染。
2.3、非阻塞 js
js 會阻止 html 文檔的正常解析，當(dāng)解析器到達(dá) script 標(biāo)記時，它會停止解析并執(zhí)行腳本。所以我們經(jīng)常把 script 引入的 js，放到 html 中最底下。如果需要讓腳本位于頁面頂部，建議添加非阻塞屬性。經(jīng)常使用 defer 和 async 來異步加載js文件。
<!-- 使用defer -->
<script defer src="foo.js" ></script>
<!-- 使用async -->
<script async src="foo.js"></script>2.4、圖片壓縮
最常見的就是 css 雪碧，就是將很多很多的小圖標(biāo)放在一張圖片上，就稱為雪碧圖。雪碧圖最大優(yōu)點(diǎn)就是可以減少http請求，除此也能壓縮圖片文件大小。使用的時候，通過設(shè)置 background-position ，移動圖片的位置。除此之外，網(wǎng)站用到的大圖，也需要在保證圖片質(zhì)量前提下優(yōu)化到最小。
2.5、矢量圖替代位圖
矢量圖（SVG）往往比圖像小很多，縮放的時候不失真，這些圖像還可以通過 css 進(jìn)行動畫和修改，比位圖方便控制。可以的話，盡量用矢量圖多點(diǎn)。
2.6、js代碼相關(guān)優(yōu)化
3.1、懶加載
素材類的網(wǎng)站，頁面一屏展示很多圖片，而且圖片還不能失真，圖片加載太多，網(wǎng)頁加載慢得很，所以就引用懶加載，只加載可視區(qū)的圖片，避免加載可以能不需要或不必要的圖像。改善頁面的響應(yīng)時間。
3.2、避免響應(yīng)式布局
響應(yīng)式網(wǎng)站雖然能夠兼容所有終端設(shè)備，但是會出現(xiàn)隱藏部分無用內(nèi)容，浪費(fèi)帶寬，加載時間還長，頁面的渲染時間也長。想更多了解響應(yīng)式布局，請點(diǎn)擊《前端響應(yīng)式布局為什么是個坑？》。
3.3、設(shè)置大小，避免重繪
遇到 img 標(biāo)簽，會立馬發(fā)送一個 http 請求，下載圖片，頁面繼續(xù)向下渲染，等圖片加載成功了，發(fā)現(xiàn)圖片的寬高大小發(fā)生變化，影響后邊排版，所以頁面會重新再繪制一次這部分。所以盡可能設(shè)置圖片的大小。
3.4、減少DOM元素
解析 html 內(nèi)容，將標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)，之后再解析其他文件，DOM元素越少，也就是標(biāo)簽越少，文件轉(zhuǎn)化得越快，加載速度也就快了。
3.5、減少 Flash 的使用
flash 文件比較大，加載起來耗時。除此，flash 插件還需要運(yùn)行才能運(yùn)行，最主要有些瀏覽器flash插件馬上要下線了，建議盡量不用 flash。
3.6、文件順序
css文件放在最頂部，優(yōu)先渲染。js放在最底部，避免阻塞。
讓網(wǎng)頁如何加載更快，有好多的細(xì)節(jié)，還是要好好提升自己的技能~~~~~~~~~
點(diǎn)個關(guān)注！更多分享內(nèi)容。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
