摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。

Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一個 html 文件，然后根據訪問的 url 來匹配對應的路由腳本，動態地渲染頁面內容。單頁應用在優化了用戶體驗的同時，也給我們帶來了許多問題，例如 S…

內容說明本文不是關于瀏覽器渲染的底層原理或前端優化具體細節的講解，而是關于瀏覽器對頁面的渲染——這一過程的描述及其背后原理的解釋。這是因為前端優化是一個非常龐大且零散的知識集合，一篇文章如果要寫優化的具體方法恐怕只能做一些有限的列舉。然而…

在這篇文章中，涵蓋了很多廣泛而又多變的環境。我們將盡量堅持“使用工具，而不是規則”的原則，把JS的流行詞匯保持在最低限度。由于我們無法在2000字的文章中涵蓋與 JS 性能表現相關的所有內容，所以請確保你閱讀文中提到的引用資料，并在之后你自己進行了相應的研究。

對瀏覽器加載資源有很多不確定性，例如： css/font的資源的優化級會比img高，資源的優化級是怎么確定的呢？
資源優先級又是如何影響加載的先后順序的？
有幾種情況可能會導致資源被阻止加載？
通過源碼可以找到答案。此次源碼解讀基于Chromium 64。

在瀏覽器渲染過程與性能優化一文中（建議先去看一下這篇文章再來閱讀本文），我們了解與認識了瀏覽器的關鍵渲染路徑以及如何優化頁面的加載速度。在本文中，我們主要關注的是如何提高瀏覽器的渲染性能（瀏覽器進行布局計算、繪制像素等操作）與效率。 很多網頁都使用了看起來效果非常酷炫的動畫與用…

一直以來，無論是web還是iOS、android的應用中，為了提升應用的加載等待這段時間的用戶感知體驗，各種奇門遁甲之術層出不窮。其中，菊花圖以及由它衍生各種加載動畫是一個非常大的流派，如下圖所示： 在很多的應用的交互中，這種菊花的加載的設計已然要一統江湖了。 不過，現在對于加…

現在你很可能會遇到不止一個響應遲鈍的 app 或加載緩慢的頁面。已經是 2017 年了，我們當然希望一切變的很快，但我們仍然會體驗到惱人的延時。怎么會這樣呢？難道我們的網絡連接不是逐年變快的么？我們的瀏覽器性能不是也變的更好？我們將在下文中討論這些。 事實上，瀏覽器和引擎越來越…

然而前端優化策略卻是一件老生常談的問題，百度一把大量的博文，曾拜讀過張成文大大的《現代前端技術解析》，關于前端知識體系與架構思維的一本書，里面有一章講到前端優化策略，前人總結的較為全面，自知能補充的內容也不多，索性添添簡簡做一個優化速查列表，以便后期回讀，同大家分享。 PC端優…

我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。不過在我前端工作的生涯中一直以為前端就是寫寫頁面，寫寫交互，就已經很了不起，這種沒有志向的想法發導致我日后的工作一直處于瓶頸。做人嘛總要有夢想嘛，不然跟一條咸魚有什么區別。最近我一直在關于前端優化的問題，原來…

在這個前端用戶體驗越來越重要的時代，你的頁面稍微有點卡頓，都難以挽留用戶。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。今天，就來談一談那些前端性能優化的加載技術，利用這些技術可以很好地提高網站的響應速度和用戶體驗。 頁面渲染 在理解真正的優化技術之前，我們需要…

關于前端的性能優化，每次提到這個詞大家都有很多idea。現在靜下來思考下我們用到的各種手段最終可以歸納為三步 這里主要是因為要完成一整個頁面的輸出后端需要處理很多個任務，我們可以將這些多個任務進行分塊，誰先完成誰就先輸出，最終通過JS回填的方式輸出DOM節點。這種方式主要解決了…

過早優化是萬惡之源。 —— Donald Knuth 還記得大四的軟件優化課上，課的主題雖然是關于各種優化手段的，但老師講的第一門課的 PPT 里依舊給這句話留了獨立的一頁。在近期的工作中，我就碰到了不少因為“過早優化”帶來的麻煩。稍微整理了一下思緒，便有了這篇短文。

網絡速度很慢，但是有一些簡單的策略可以使網站變快。其中之一就是 將關鍵的css內聯插入到網頁的標簽, 但是，如果您的網站包含數百頁，甚至更糟糕的是包含數百種不同的模板，那么你該怎么做呢？ 你不能手動做這件事。

緩存的分類有很多種，CDN緩存、數據庫緩存、代理服務器緩存和瀏覽器緩存。本篇將來講解一下Web開發中的瀏覽器緩存。這個在實際開發環境中往往也會被問到，或者使用到。如何去準確認清楚緩存的概念，是前端必須要去學習的。如果你喜歡我的文章，歡迎評論，歡迎Star~。歡迎關注我的gith…

大家都知道萬維網的應用層使用了HTTP協議，并且用瀏覽器作為入口訪問網絡上的資源。用戶在使用瀏覽器訪問一個網站時需要先通過HTTP協議向服務器發送請求，之后服務器返回HTML文件與響應信息。這時，瀏覽器會根據HTML文件來進行解析與渲染（該階段還包括向服務器請求非內聯的CSS文…

該文章介紹了LINE內web應用「LINE漫畫」如何實現流暢的頁面切換。

PC端優化的策略很多，如 YSlow（YSlow 是 Yahoo 發布的一款 Firefox 插件，現 Chrome 也可安裝，可以對網站的頁面性能進行分析，提出對該頁面性能優化的建議）原則，或者 Chrome 自帶的 Audits 等，總結起來主要包括網絡加載類、頁面渲染類、…

其中，file參數傳入一個File（Blob）類型文件；quality參數傳入一個0-1的number類型，表示圖片壓縮質量；fn為回調方法，包含一個Blob類型文件的參數。 這樣的話，圖片壓縮上傳就能輕松地搞定了，以上的8個方法我已經封裝好放到github上了，喜歡的話可以使…

我們為什么需要關注站點的性能，性能為什么如此重要呢？如今任何互聯網產品首先重要的都是流量，流量最終會轉換為商業價值。所以在互聯網產品中，流量、轉化率和留存率基本上是產品經理或者業務非常關注的幾個因素，而性能則會直接影響到用戶的轉化和留存（在一定階段之后影響較大，產品初期功能的因…

作為一個全棧互聯網工程師，我們的目標決不僅僅滿足于功能的實現，而且要包括性能、安全、易用性等等各方面的考量。那么是否有一些可以公開評測的標準，使我們能夠準確地知道目前我們網站的質量水平在全行業中處于什么樣的水平呢？隨著技術水平的不斷進步，網站評測方面的各種工具也在不斷演進。
工…

圖片是界面顯示效果很重要的組成部分，圖片加載關系到用戶體驗、應用性能，優化圖片加載的常用策略為：預加載和懶加載。

隨著我們的網站越來越依賴 JavaScript, 我們有時會(無意)用一些不易追蹤的方式來傳輸一些(耗時的)東西. 在這篇文章中, 我會介紹一些能讓你的網站在移動設備上快速加載且可交互的方式.

懶加載也就是延遲加載。
當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱占位圖），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
很多頁面，內容很豐富，頁…

經常能在博客或者論壇上看到很多有關前端性能優化的文章，但是卻很少看到如何分析一個網頁的性能的文章。到底什么樣的指標（或者說是標準）代表這個網頁性能好或者不好，通過什么方式來得到這些指標呢？因此，本文來講述下如何分析一個網頁的性能的好與差。本文用到的工具：chrome瀏覽器。下面…

TCP 負責在不可靠的傳輸信道之上提供可靠的抽象層，向應用層隱藏了大多數網絡通信的復雜性能，比如丟包重發、按需發送、擁塞控制及避免、數據完整，等等。采用 TCP 數據流可以確保發送的所有字節能夠完整地被接收到，而且客戶端的順序也一樣。
但是 TCP 設計并未過多顧及時間，由此給…

一直以來，無論是web還是iOS、android的應用中，為了提升應用的加載等待這段時間的用戶感知體驗，各種奇門遁甲之術層出不窮。其中，菊花圖以及由它衍生各種加載動畫是一個非常大的流派，如下圖所示： 在很多的應用的交互中，這種菊花的加載的設計已然要一統江湖了。 不過，現在對于加…

此文總結了筆者在Web靜態資源方面的一些優化經驗。 用戶在訪問網頁時， 最直觀的感受就是頁面內容出來的速度，我們要做的優化工作， 也主要是為了這個目標。那么為了提高頁面加載（或者渲染）速度呢？一般來說有三個方面： 1、代碼邏輯：優秀的代碼邏輯結構可以有效減少渲染頁面使用的內存和…

前端性能優化，不止于前端。

服務器上靜態資源更新時請求服務器最新資源，加載又飛快。 靜態資源加載速度引出了我們今天的主題，因為最直接的方式就是將靜態資源進行緩存。頁面渲染速度建立在資源加載速度之上，但不同資源類型的加載順序和時機也會對其產生影響，所以也留給了我們更多的優化空間。 當然除了速度，緩存還有另外…

在前端開發中，緩存有利于加快網頁的加載速度，同時緩存能夠被反復利用，所以可以減少流量和帶寬的開銷。

如今任何互聯網產品首先重要的都是流量，流量最終會轉換為商業價值。所以在互聯網產品中，流量、轉化率和留存率基本上是產品經理或者業務非常關注的幾個因素，而性能則會直接影響到用戶的轉化和留存。

JQuery有非常多的選取節點的方法，但是采用這些方法選取節點時所影響到的性能是完全不一樣的，用更合適的選擇器去選取節點，是使用JQuery時優化瀏覽器性能的一個可考慮方向。 首先，我們的建立一個有著復雜樣式的無序列表。 我們采用選取循環50000次的無序列表中的一個方法，來測…

現在業務迭代，需要我們在page.init()初始化代碼塊的最后增加一些功能，同時不影響原先的功能。按照正常的寫法，我們可能會像下面這樣寫： 這樣寫是可以解決我們的需求，但是這樣的代碼是具有侵略性的，我們不得不在原先的代碼的合適位置新增我們需要的代碼。但我們思考一個問題，如果我…

不論是 PC 還是移動端，圖片一直占據著頁面流量的大頭，在圖片的大小和質量之間如何權衡，成為了長期困擾開發者們的問題。而 WebP 技術的出現，為解決該問題提供了好的方案。本文將為大家詳細介紹 WebP 技術，同時也會分享該技術在 MIP 項目)中的實踐。 WebP 是由 Go…

前端性能優化，不止于前端。

所謂緩存，通俗點講就是把已經做過的事情結果先暫時存起來，下次再做同樣的事情，不用再重新去做，只要把之前的存的結果拿出來用即可，很明顯大大提升了效率。他的應用場景非常廣泛。如： 1、緩存ajax結果，大多數網站都會有產品推薦功能，比如按熱銷推薦，簡單低效的做法，每次點擊切換的時候…

服務端渲染，客戶端渲染，同構

1.0時代沒什么說的，html、css打天下的時代，那個時候你會用js開發個計算器就牛逼到不行。2.0時代是最好的時代，新技術、新思想蓬勃發展，堪稱前端的工業革命，前端人員的地位得到了充分認可，門檻也有一定的提升。前端性能優化的涉及點從服務器到協議再到宿主環境本身都要有比較深刻…

互聯網正在爆發式地增長，我們創建的 Web 平臺也是如此。我們通常都沒有考慮到用戶網絡的連通性和使用情景。即使是萬維網現狀的一瞥，也可以看出我們還沒有建立起同理心和對形勢變化的認知，更不用說對性能的考慮了。 地球上 74 億人口中，只有 46% 的人能夠上網，平均網絡速度為 7…

瀏覽器自上而下讀取html文檔（此過程叫html parser），當發現style.css文件時，瀏覽器parser停下來去搞css，等style.css下載并解析完畢，瀏覽器繼續parser。緊接著發現header.js， 于是html parser又停了，瀏覽器下載并執行完…

對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者，性能是我們關注的指標。它直接影響著我們的用戶，同時也影響著產品本身。前端發展以來，優化方式，琳瑯滿目，有雅虎軍規等。這些內容復雜繁多，往往容易被…

此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。
要研究圖片資源的加載和渲染，我們先要了解瀏覽器的工作原理。以Webkit引擎的工作流程為例： 從上圖可看出，瀏覽器加載一個HTML頁面后進行如下操作： 解析HTML —> …

互聯網發展非常迅速，所以我們創造了Web平臺。通常我們會忽視連通性等問題，但用戶們卻不會視而不見。一瞥萬維網的現狀，可以發現我們并沒有用同情心、變通意識去構建它，更不要說性能了。
所以，今天的Web是什么狀態呢？
在這個星球上的74億人中，只有46％可以上網。平均網絡速度上限為…

對于一個網站如果希望抓住用戶，網站的速度以及穩定性是首當其沖的。
從各式各樣的前端監控平臺中，你都可以獲得頁面很多的性能指標。本文將介紹幾個幾個比較關鍵的指標，并給出相應的優化思路。