整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
日，CyberArk安全研究員Eviatar Gerzi發現Windows終端和基于Chrome的網頁瀏覽器上存在多個高危DoS（拒絕服務）漏洞。
Gerzi在2003年的一個通過修改窗口標題執行代碼的舊安全公告（https://marc.info/?l=bugtraq&m=104612710031920&q=p3）嘗試了各種潛在的濫用途徑，并發現了一種在PuTTY上誘導快速窗口標題更改的方法。
這種非典型的攻擊方式導致測試設備進入一種被稱為“白屏死機”的狀態，除了鼠標光標外，屏幕上所有的應用程序界面都凍結了（失去響應）。
研究人員對存在類似漏洞的本地應用程序的實施攻擊后，導致程序調用過多的操作系統內核，系統立即進入白屏死機狀態。
被濫用的函數是“SetWindowText”，可用于更改指定窗口標題欄的文本。
需要注意的是，這個簡單的攻擊技巧可以導致大量“無辜”應用程序也一并被拖入白屏死機狀態，而擺脫白屏死機狀態的唯一方法是重新啟動計算機。
研究人員還發現，“SetWindowText”并不是唯一導致白屏死機的手段，在其中一個案例中，研究人員測試了MobaXterm終端，令我驚訝的是它沒有使用SetWindowText函數來更改窗口標題，而是使用了一個名為GdipDrawString的函數。
在這種情況下，有趣的是GdipDrawString并沒有像SetWindowText那樣導致整個計算機失去響應。它只影響了最終崩潰的應用程序。
Gerzi確認以下Windows終端受到白屏死機漏洞的影響：
主流瀏覽器未能幸免
意識到幾乎所有的GUI圖形界面應用程序都使用SetWindowText函數，研究人員嘗試了針對Chrome等流行的網絡瀏覽器的攻擊。
研究人員創建了一個HTML文件，該文件會導致標題在無限循環中快速變化，從而迫使瀏覽器凍結。
結果Edge、Torch、Maxthon、Opera和Vivaldi等所有基于Chromium的主流瀏覽器，全部中招，失去響應，而Firefox和Internet Explorer雖然沒有癱瘓，但性能也受到了影響。
由于現代瀏覽器都是基于沙盒技術，因此濫用SetWindowText函數并不會影響到底層操作系統，讓整個系統白屏死機。但是，當研究者嘗試在虛擬機內進行瀏覽器攻擊時，會出現資源耗盡問題，導致虛擬化系統顯示“藍屏死機”。
廠商回應：不是漏洞
研究人員指出，除了實驗已經驗證的Windows終端模擬器和主流瀏覽器以外，任何使用SetWindowText或GdipDrawString函數的應用程序都可能受此攻擊影響。
有些應用例外，例如Slack。像Slack這樣的應用程序在函數調用上具有速率限制器，因此它們能夠抵御這種DoS攻擊。
Gerzi聯系了受影響的供應商并收到以下回復：
雖然谷歌和微軟都否認白屏死機是漏洞，但是安全研究人員指出，可以通過在遠程服務器上創建惡意文件并從在存在漏洞的終端中打開來遠程觸發攻擊。
、首先說說瀏覽器的加載流程：
(1) 用戶在地址欄中打開一個URL，瀏覽器首先會尋找該URL所在服務器，通過DNS服務器查詢瀏覽器會獲
得該URL所在網站的IP地址，然后向該地址發起請求，連接到服務器；
(2) 建立連接后，向服務器發送http請求，請求對應的HTML文檔；
(3) 解析HTML文檔，目的是知道該頁面需要哪些資源以及生成DOM樹；生成DOM樹和獲取到相應需要的
資源文件同時進行；解析HTML文檔時，一旦發現一個標簽，就會根據標簽的要求分配對指定的資源進行下載，當DOM樹生成后，DOMContentLoaded事件被觸發；
理論上瀏覽器并行下載頁面所需要的資源會帶來更好的性能體驗！
(4) Onload事件，當解析完成后，生成了DOM樹，所有頁面需要的資源文件都已經成功下載和執行后，
瀏覽器會發出Onload事件并回調HTML文檔中的onload函數。
2、對于優化頁面速度的必要性：
頁面的打開速度對于網站的優化有極大的意義，如果打開一個頁面長時間處于白屏狀態，如果超過5s，暴脾氣
的我是會直接關閉這個網頁；或者是頁面加載出來了，但是比較慢，頁面顯示不完整，標簽一直在轉圈，頁面處于不可交互狀態，這也是一種很不好的體驗；
一個頁面的打開速度快不快，可以用兩個指標來描述，一個是ready時間，一個是load時間，chrome控制臺可以看到；
一共是加載了19.2KB，ready時間是133ms，load時間是147ms；
3、分點介紹優化策略：
(1) 避免head標簽js堵塞：
所有放在head標簽里面的js和css都會堵塞渲染；如果這些css和js需要加載很久的話，那么頁面就空白了；
[html] view plain copy
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
用google的cdn加載一個jQuery文件是訪問不了的，所以標簽一直在轉圈，頁面沒有任何顯示；
有兩種解決辦法，第一種是把script放到body后面，這也是很多網站采取的方法。第二種是給script加defer或者async的屬性，一旦script是defer或者async延遲的，那么這個script將會異步加載，但不會馬上執行，會在readystatechange變為Interactive后按順序依次執行；
兩者相同點：
加載文件時不阻塞頁面渲染
對于inline的script無效
使用這兩個屬性的腳本中不能調用document.write方法
有腳本的onload的事件回調
兩者不同點：
async下，js一旦下載好了就會執行，所以很有可能不是按照原本的順序來執行的。如果js前后有依賴性，用async，就很有可能出錯。
如果一個script加了defer屬性，即使放在head里面，它也會在html頁面解析完畢之后再去執行，也就是類似于把這個script放在了頁面底部。
(2) 減少head里面的css資源：
css必須放在head標簽里面，如果放在body里面會造成對layout好的dom進行重排造成頁面閃爍；但是一旦
放在head標簽里面又會堵塞頁面渲染；所以要盡可能的減小css體積；
例：不要放太多base64在css里面，webpack構建工具常常會配置圖片體積小于多少的直接轉換成base64加載，這
里是挺影響性能的，一個是不能用到緩存機制，另一個就是加大了css的體積；個人建議上線項目直接把圖片用cdn托
管；
在這里給大家推薦一個前端交流學習qun，想要學習的朋友可以加入進來，免費帶你入門。前面是554，中間是224，后面是926.
(3)延遲加載圖片：
對于很多網站來說，圖片汪汪是占用最多流量和帶寬的資源；
[html] view plain copy
<span style="font-size:18px;"><body>
<img id="imgTest" src="about:blank" data-src="1.gif" />
</body>
<script type="text/javascript">
window.onload=function(){
$("#imgTest").attr("src",$("#imgTest").data("src"));
}
</script></span>
這里沒有直接給src路徑，而是在頁面加載完成后用js操作src，減少了頁面加載圖片的時間，首先把整個頁面結構呈現給用戶；惰性加載圖片也是差不多；當用戶滑動頁面到一定高度時（監聽scroll事件），再動態的依次對圖片進行處理；
(4) 壓縮和緩存：
壓縮就不說了；緩存會在后續文章中具體寫一個demo，持續更新；
(5) DNS解析優化：
DNS查詢需要花費大量時間來返回一個主機名的IP地址；
在我們的網站中，可能會加載到很多個域的東西，比如引入了百度地圖啊之類的sdk和一些自己的子域名服務；第一次打開網站時要做很多次DNS查找；DNS預讀取能夠加快網頁打開時間；
[html] view plain copy
<link rel="dns-prefection" >
在head中寫上幾個link標簽，對標簽中的地址提前解析DNS，這個解析是并行發生的，不會堵塞頁面渲染；
還有非常多的頁面優化技巧，html別嵌套太多層，加重頁面layout的壓力；css選擇器的合理運用，減少匹配的計算量；js中別濫用閉包，會加深作用域鏈，增加變量查找時間；減少http請求之類的等等；
我是一名前端開發程序員，自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學和進階中的小伙伴
前端資料獲取方式：
1.在你手機的右上角有【關注】選項，點擊關注！
2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信回復：【學習】
電腦已經設置好了關鍵詞自動回復，所以回復的時候請注意關鍵詞喲~
場詩
曲木為直終必彎，養狼當犬看家難； 墨染鸕鶿黑不久，粉刷烏鴉白不天。 蜜餞黃蓮終需苦，強摘瓜果不能甜； 好事總得善人做，哪有凡人做神仙。
前言
該篇文章會為您分享在前端性能優化中非常重要的一環-白屏時間，將從白屏時間的概念、重要性以及白屏的過程一一進行闡述，同時提供性能優化的策略與實踐。
一、概念
白屏時間：即用戶點擊一個鏈接或打開瀏覽器輸入URL地址后，從屏幕空白到顯示第一個畫面的時間。
白屏時間的長短將直接影響用戶對該網站的第一印象。
二、白屏時間的重要性
當用戶點開一個鏈接或者是直接在瀏覽器中輸入URL開始進行訪問時，就開始等待頁面的展示。頁面渲染的時間越短，用戶等待的時間就越短，用戶感知到頁面的速度就越快。這樣可以極大的提升用戶的體驗，減少用戶的跳出，提升頁面的留存率。
打開一個頁面就像你的女票召喚你一樣，你出現的越迅速，女票肯定會愈加欣喜！反之，你千呼萬喚始出來，那么你的女票很可能又要拋棄你了(為什么要對你說又呢? ...)
三、白屏是一個怎樣的過程呢？
讓我們一起來揭秘：從打開一個頁面，到頁面的畫面展示經歷了怎樣的過程！
1. DNS Lookup
DNS Lookup 即瀏覽器從DNS服務器中進行域名查詢。
瀏覽器會先對頁面進行域名解析，獲取到服務器的IP地址后，進而和服務器進行通信。
Tips: 通常在整個加載頁面的過程中，瀏覽器會多次進行DNS Lookup，包括頁面本身的域名查詢以及在解析HTML頁面時加載的JS、CSS、Image、Video等資源產生的域名查詢。
2. 建立TCP請求連接
瀏覽器和服務端TCP請求建立的過程，是基于TCP/IP，該協議由網絡層的IP和傳輸層的TCP組成。IP是每一臺互聯網設備在互聯網中的唯一地址。
TCP通過三次握手建立連接，并提供可靠的數據傳輸服務。
3. 服務端請求處理響應
在TCP連接建立后，Web服務器接受請求，開始進行處理，同時瀏覽器端開始等待服務器的處理響應。
Web服務器根據請求類型的不同，進行相應的處理。靜態資源如圖片、CSS文件、靜態HTML直接進行響應；如其他注冊的請求轉發給相應的應用服務器，進行如數據處理、緩存中取數據，將數據按照約定好的格式響應給瀏覽器。
在大型應用中，通常為分布式服務架構，應用服務器的處理有可能經過很多個系統的中間件，最終獲取到需要的數據
4. 客戶端下載、解析、渲染顯示頁面
在服務器返回數據后，客戶端瀏覽器接收數據，進行HTML下載、解析、渲染顯示。
瀏覽器下載HTML后，首先解析頭部代碼，進行樣式表下載，然后繼續向下解析HTML代碼，構建DOM樹，同時進行樣式下載。當DOM樹構建完成后，立即開始構造CSSOM樹。理想情況下，樣式表下載速度夠快，DOM樹和CSSOM樹進入一個并行的過程，當兩棵樹構建完畢，構建渲染樹，然后進行繪制。
Tips:瀏覽器安全解析策略對解析HTML造成的影響：
一定要合理放置JS代碼！！！
四、白屏-性能優化
至此，我們已經了解了從瀏覽器在打開一個鏈接開始，到屏幕展示的過程-白屏時間的歷程，那這對每個環節中發生的事情，我們可以有針對性的進行相關的優化。
1. DNS解析優化
針對DNS Lookup環節，我們可以針對性的進行DNS解析優化。
2. TCP網絡鏈路優化
針對網絡鏈路的優化，好像除了花錢沒有什么更好的方式！
3. 服務端處理優化
服務端的處理優化，是一個非常龐大的話題，會涉及到如Redis緩存、數據庫存儲優化或是系統內的各種中間件以及Gzip壓縮等...
4. 瀏覽器下載、解析、渲染頁面優化
根據瀏覽器對頁面的下載、解析、渲染過程，可以考慮一下的優化處理：
聲明
本文為胡哥拜讀周濤明、張榮華、張新兵幾位大佬所著《大型網站性能優化實戰》一書并結合自身經驗所得，愿對諸位小伙伴有所幫助。手動微笑.gif
后記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公眾號，可與胡哥繼續深入交流呦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
