原创 WEB性能(2)--UDP
一、UDP介紹 1980年8月，緊隨TCP/IP之後，UDP（User Datagram Protocol，用戶數據報協議）被加入了核心網絡協議套件。UDP的主要功能和亮點並不在於它引入了什麼特性，而在於它忽略的那些特性。UDP一
2020-06-21 21:26:01
原创 HTTPS詳細介紹
一、爲什麼要HTTPS HTTP協議因爲其輕、小、快、簡單，所以在全世界普及開來，各種應用都離不開它。但是隨着業務複雜度的提高，HTTP的這些優點逐漸成爲了短板。所以就開始各種打補丁，比如因爲HTTP是無狀態的協議，所以爲了管理狀
2020-06-21 21:26:00
原创 WEB性能(6)--經典最佳實踐
經典最佳實踐 1. 減少DNS查找 每一次主機名解析都需要一次網絡往返，從而增加請求的延遲時間，同時還會阻塞後續的請求。 2. 重用TCP連接 儘可能使用持久連接，以消除TCP握手和慢啓動延遲。 3. 減少HTTP重定向 HTTP
2020-06-21 20:48:57
原创 async/await 的錯誤捕獲
文章目錄一、案發現場二、嘗試捕獲它1. 踹一腳2. then()三、有沒有更好的方式 一、案發現場 爲了更好的說明，舉一個很常見的例子： function getData(data) { return new Promise(
2020-06-21 20:48:57
原创 Webkit底層原理(3)--HTML解釋器
1. 解釋過程 HTML解釋器的工作就是將從網絡或本地磁盤獲取的HTML網頁和資源從字節流解釋成DOM樹結構。如下圖： 圖中將這一過程描述得很清晰：首先是字節流，經過解碼之後是字符流，然後通過詞法分析器會被解釋成詞語（Token
2020-06-21 20:48:57
原创 WEB性能(4)--HTTP 1.x
一、HTTP 1.x介紹 HTTP 1.0的優化策略非常簡單，就一句話：升級到HTTP 1.1！ 改進HTTP的性能是HTTP 1.1工作組的重要目標，後來HTTP1.1頁引入了大量增強性能的特性： 持久化連接以支持連接重用；
2020-06-21 20:48:57
原创 WEB性能(7)--XMLHttpRequest
一、XMLHttpRequest XMLHttpRequest（XHR）是瀏覽器層面的API，可以讓開發人員通過JavaScript實現數據傳輸。XHR是在Internet Explorer 5 中首次亮相的，後來成爲AJAX（A
2020-06-21 20:48:57
原创 Webkit底層原理(2)--資源加載和網絡棧
資源加載和網絡棧 使用網絡棧下載網頁和網頁中的資源是渲染引擎工作的第一步，也是非常耗時間的一步。 一、Webkit資源加載機制 1. 資源 網頁本身就是一種資源，例如圖片、視頻等。HTML支持的資源主要有以下類型： HTML：
2020-06-21 20:48:57
原创 前端工程化--Vue-CLI自動生成頁面
文章目錄背景自動生成頁面一、生成表格頁1. 編輯配置文件2. 按照配置文件生成頁面`.vue`文件3. 添加路由二、生成空白頁 背景 我們的項目是基於vue-cli搭建的，每次需要新加一個頁面需要操作以下步驟： 在views文
2020-06-21 20:48:57
原创 WEB性能(1)--TCP
一、TCP介紹 因特網有兩個核心協議：IP和TCP。IP，即Internet Protocol（因特網協議），負責聯網主機之間的路由選擇和尋址；TCP，即Transmission Control Protocol（傳輸控制協議），
2020-06-21 20:48:57
原创 Webkit底層原理(1)--Webkit架構和模塊
一、Webkit架構 Webkit的一個顯著的特徵就是它支持不同的瀏覽器，因爲不同瀏覽器的需求不同，所以在Webkit中，一些代碼可以共享，但是另一部分是不同的，這些不同的部分稱爲Webkit移植（Ports）。Webkit的整體
2020-06-21 20:48:57
原创 WEB性能(3)--TLS
一、傳輸層安全（TLS）介紹 SSL（Secure Sockets Layer，安全套接層）協議最初是網景公司爲了保障網上交易安全而開發的，SSL協議在直接位於TCP上一層的應用層被實現。SSL不會影響上層協議（HTTP），但能夠
2020-06-21 20:48:57
原创 Webkit底層原理(4)--DOM事件機制和Shadow DOM
一、DOM事件機制 1. 事件的工作過程 事件在工作過程中使用兩個主體，第一個是事件（event），第二個是事件目標（EventTarget）。每個事件都有屬性來標記該事件的事件目標。當事件到達事件目標的時候，在這個目標上註冊的監
2020-06-21 20:48:57
1
原创 WEB性能(5)--HTTP 2.0介紹
一、HTTP 2.0介紹 HTTP2.0可以讓我們的應用更快、更簡單、更健壯！HTTP2.0把很多以前我們針對HTTP1.1想出來的歪招都一筆勾銷，把解決那些問題的方案都內置在了傳輸層中。 HTTP2.0的目的就是通過支持請求與相
2020-06-21 20:48:57
原创 Webkit底層原理(5)--CSS解釋器和樣式佈局
從整個網頁的加載和渲染過程來看，CSS解釋器和規則匹配處於DOM樹建立之後，RenderObject樹（下一篇文章會介紹）建立之前，CSS解釋器解釋後的結果會保存起來，然後RenderObject樹基於該結果進行規則匹配和佈局計算
2020-06-21 20:48:57