原创 淺談React的diff算法和key屬性
React快速的致勝法寶是虛擬DOM及其高效的diff算法。 可以無需擔心性能問題而“隨時”刷新整個頁面，虛擬DOM可以確保只對界面上真正變化的部分進行實際的DOM操作。雖然在實際開發中，基本無需關心虛擬DOM是如何運作的，但理解其運行機
2020-06-13 01:48:11
原创 淺談translate屬性與相對定位、絕對定位的區別
水平垂直居中的實現方式有多種，請見：http://blog.csdn.net/zhouziyu2011/article/details/53514416 在支持 CSS3 屬性的現代瀏覽器當中，可以利用CSS3的translate屬性實
2020-06-13 01:48:11
2
原创 淺談HTTP的Content-Type
Content-Type，內容類型，用於定義文件的類型和網頁的編碼，決定瀏覽器將以什麼形式、什麼編碼讀取這個文件。 文件擴展名和Content-Type往往有一定的對應關係，如： ① .js：application/javascript
2020-02-24 08:09:29
1
原创 淺談前端性能優化（三）——將CSS文件放在頂部
CSS文件放置在head中和放在body底部，對CSS本身的下載時間不會有影響，但對頁面的呈現有非常大的影響，與用戶體驗密切相關。 CSS文件放在頂部的原理： 1) CSS的下載是按照其在文檔中出現的順序進行的，所以很容易想到將不需立
2020-02-24 08:09:29
1
原创 淺談Vue的單向綁定和雙向綁定
1、單向綁定 單向數據綁定的實現思路： ① 所有數據只有一份 ② 一旦數據變化，就去更新頁面(只有data-->DOM，沒有DOM-->data) ③ 若用戶在頁面上做了更新，就手動收集(雙向綁定是自動收集)，合併到原有的數據中。 <!D
2020-02-24 08:09:29
原创 淺談前端性能優化（九）——DNS解析優化
1、DNS緩存 DNS查詢過程大約消耗20毫秒，在DNS查詢過程中，瀏覽器什麼都不會做，保持空白。如果DNS查詢很多，網頁性能會受到很大影響，因此需要用到DNS緩存。 不同瀏覽器的緩存機制不同： IE對DNS記錄默認的緩存時間爲30分鐘
2020-02-24 08:09:29
原创 淺談前端性能優化（一）——Expires和Cache-Control
前端性能優化中，減少HTTP請求可以提高頁面的響應速度。 瀏覽器在第一次訪問頁面時向服務器請求資源，並緩存起來，下次再訪問時會判斷在緩存中是否已有該資源且有沒有更新過，如果已有該資源且未更新過，則直接從瀏覽器緩存中讀取。原理：通過HTTP
2020-02-24 08:09:29
1
原创 淺談前端性能優化（四）——將script放在底部
script的兩個屬性——async和defer： ① 沒有defer或async，瀏覽器會立即加載並執行指定的JS腳本，不等待後續文檔元素，讀到JS腳本就加載並執行。 ② 有async，加載後續文檔元素的過程將和JS的加載與執行並行進行
2020-02-24 08:09:29
原创 淺談前端性能優化（六）——CDN內容分發網絡
有關CDN的介紹請見：http://blog.csdn.net/zhouziyu2011/article/details/60962103 1、CDN CDN是一組分佈在多個不同地理位置的Web服務器，用於更加有效地向用戶發佈內容，在
2020-02-24 08:09:29
原创 淺談前端性能優化（八）——cookie優化
cookie存儲在客戶端，伴隨着HTTP請求在瀏覽器和服務器之間傳遞。除了key-value外，cookie還有max-age，path，domain和httponly屬性。 httponly屬性標識一個客戶端JavaScript能否操作
2020-02-24 08:09:29
原创 淺談MVC、MVP和MVVM架構
1、MVC架構 MVC（Model-View-Controller）是最常見的軟件架構之一，應用十分廣泛。 1) 軟件可以分成三個部分： ① 視圖（View）：用戶界面。 ② 控制器（Controller）：業務邏輯。 ③ 模型（Mode
2020-02-24 08:09:29
原创 淺談打開網頁速度慢的原因和解決方法
1、原因一：http請求次數太多 解決：減少http請求次數 ① 圖片地圖：把多張圖片整合到一張圖片中，以位置定位超鏈接。 ② CSS Sprites合併圖片，通過指定CSS的backgroud-image和backgroud-posit
2020-02-24 08:09:29
原创 淺談前端性能優化（七）——圖像優化
1、常用的圖像類型 1) gif: 適用於動畫效果。 2) jpg: 使用有損壓縮，將圖片的每個像素分解成8*8的柵格，然後對每個柵格的數據進行壓縮處理，通過特殊的算法用附近的顏色填充柵格。用戶可以設置質量級別，從0到100，數字越小，圖
2020-02-24 08:09:29
原创 淺談前端性能優化（二）——對HTTP傳輸進行壓縮
1、前端性能優化的一點： 對js、css、圖片等進行壓縮，儘可能減小文件的大小，減少文件下載的時間，從而減少網頁響應的時間。 2、前端性能優化的另一點： 對HTTP傳輸進行壓縮，即在js，css、圖片等資源已經壓縮的基礎上（其實，文件
2020-02-24 08:09:29
原创 淺談前端性能優化（五）——減少HTTP請求數
1、圖片地圖 圖片地圖允許在一個圖片上關聯多個URL，目標URL取決於用戶單擊的圖片上的位置。 1) 優點： 把多張圖片整合到一張圖片中，雖然文件的總體大小不變，但可以減少HTTP請求數。 2) 使用條件： 只有在圖片的所有組成部分在頁面
2020-02-24 08:09:29