原创 CDN的緩存與回源機制解析
CDN（Content Delivery Network, 內容分發網絡）指的是一組分佈在各個地區的服務器。這些服務器存儲着數據的副本， 因此服務器可以根據哪些服務器與用戶距離更近， 來滿足數據的請求。 CDN提供快速服務， 較少受高流
2019-06-10 19:49:06
原创 webpack性能調優與Gzip原理
從上一章可以看出， 我們輸入URL到顯示頁面這個過程中，涉及到的網絡層面有三個主要過程： DNS解析 TCP連接 HTTP請求/響應 對於DNS解析和TCP連接兩個步驟，我們前端可以做的努力非常有限。相比之下， HTTP連接這一層面的優化
2019-06-10 19:49:06
原创 本地存儲——從 Cookie 到 Web Storage、IndexedDB
故事的開始：從 Cookie 說起 Cookie 的本職工作並非本地存儲，而是“維持狀態”。 在 Web 開發的早期，人們亟需解決的一個問題就是狀態管理的問題：HTTP 協議是一個無狀態協議，服務器接收客戶端的請求，返回一個響應，故事到此
2019-06-10 19:49:06
原创 服務端渲染
服務端渲染的探索與實踐 服務端渲染（SSR）近兩年炒得很火熱，相信各位同學對這個名詞多少有所耳聞。本節我們將圍繞“是什麼”（服務端渲染的運行機制）、“爲什麼”（服務端渲染解決了什麼性能問題 ）、“怎麼做”（服務端渲染的應用實例與使用場景）
2019-06-10 19:49:06
原创 Event Loop 與異步更新策略
Vue 和React都實現了異步更新策略。雖然實現的方式不盡相同， 但都達到了減少DOM操作 避免過度渲染的目的。通過研究框架的運行機制， 其設計思路將深化我們對DOM優化的理解， 拓寬我們對DOM實踐的認知。 Event Loop
2019-06-10 19:49:06
7
原创 瀏覽器背後的運行機制
瀏覽器的心 瀏覽器的心， 說的就是瀏覽器的內核。在研究瀏覽器微觀運行機制之前， 我們首先要對瀏覽器內核有一個宏觀的把握。 許多工程師因爲業務需要， 免不了需要去處理不同瀏覽器下代碼渲染結果的差異性。這些差異性正是因爲瀏覽器內核的不同而導致
2019-06-10 19:49:06
原创 Chrome Devtools Performance使用指南
運行時性能表現（runtime performance）指的是當你的頁面在瀏覽器運行時的性能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎麼用Chrome DevTools Performance功能去分析運行時性能表現。在RA
2019-06-10 19:49:06
1
原创 JavaScript 究竟是如何工作的？（一）
什麼是 V8？JavaScript運行的背後發生了什麼？ 1.編程語言是如何工作的？ 在開始講解 JavaScript 之前，我們首先要理解任意一門編程語言的基本工作方式。電腦是由微處理器構成的，我們通過書寫代碼來命令這臺小巧但功能強
2019-06-10 19:49:05
原创 InputStream InputStreamReader BufferedReader 區別及使用
InputStream OutputStream 區別 InputStream: 表示輸入字節流所有類的超類， 一般我們使用它的子類， 如FileInputStream等 public class InputStream { p
2019-05-11 06:20:14
1
原创 JAVA實現HTTP請求方式
get請求 public String sendGet(String httpurl) throws IOException { URL url = new URL(httpurl); HttpURLConnection
2019-05-10 05:30:44
原创 Typescript學習—基礎類型
// 布爾值 let isDone:boolean = false; // 數字 let decLiteral:number = 6; // 字符串 let name:string // name 報錯原因: 與DOM中的全局wi
2019-04-23 19:32:06
原创 瀏覽器緩存、 HTTP緩存（強制緩存、協商緩存），瀏覽器緩存和CDN的關係
CND的定義 CDN：Content Delivery Network/Content Ddistribute Network內容分發網絡 客戶端訪問網站的過程： 沒有CDN: 用戶在瀏覽器訪問欄中輸入要訪問的域名 瀏覽器想DNS服務器請
2019-04-16 18:06:01
原创 防抖函數、 節流函數
防抖函數 定義： 多次觸發事件後，事件處理函數只執行一次，並且是在觸發操作結束時執行 例：監聽頁面滾動， 滾動時不會觸發事件處理函數， 而是在滾動完成後一段時間， 觸發事件回調 // 代碼封裝 function debounce
2019-04-11 17:45:30
原创 第一個webpack應用
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body
2019-04-09 17:42:48