摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問(wèn)題我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。這種方式主要解決了淺談前端中的過(guò)早優(yōu)化問(wèn)題過(guò)早優(yōu)化是萬(wàn)惡之源。

Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁(yè)面的內(nèi)容，這就是單頁(yè)應(yīng)用。在一個(gè)單頁(yè)應(yīng)用中，往往只有一個(gè) html 文件，然后根據(jù)訪問(wèn)的 url 來(lái)匹配對(duì)應(yīng)的路由腳本，動(dòng)態(tài)地渲染頁(yè)面內(nèi)容。單頁(yè)應(yīng)用在優(yōu)化了用戶體驗(yàn)的同時(shí)，也給我們帶來(lái)了許多問(wèn)題，例如 S…

內(nèi)容說(shuō)明本文不是關(guān)于瀏覽器渲染的底層原理或前端優(yōu)化具體細(xì)節(jié)的講解，而是關(guān)于瀏覽器對(duì)頁(yè)面的渲染——這一過(guò)程的描述及其背后原理的解釋。這是因?yàn)榍岸藘?yōu)化是一個(gè)非常龐大且零散的知識(shí)集合，一篇文章如果要寫(xiě)優(yōu)化的具體方法恐怕只能做一些有限的列舉。然而…

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

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

在瀏覽器渲染過(guò)程與性能優(yōu)化一文中（建議先去看一下這篇文章再來(lái)閱讀本文），我們了解與認(rèn)識(shí)了瀏覽器的關(guān)鍵渲染路徑以及如何優(yōu)化頁(yè)面的加載速度。在本文中，我們主要關(guān)注的是如何提高瀏覽器的渲染性能（瀏覽器進(jìn)行布局計(jì)算、繪制像素等操作）與效率。 很多網(wǎng)頁(yè)都使用了看起來(lái)效果非常酷炫的動(dòng)畫(huà)與用…

一直以來(lái)，無(wú)論是web還是iOS、android的應(yīng)用中，為了提升應(yīng)用的加載等待這段時(shí)間的用戶感知體驗(yàn)，各種奇門(mén)遁甲之術(shù)層出不窮。其中，菊花圖以及由它衍生各種加載動(dòng)畫(huà)是一個(gè)非常大的流派，如下圖所示： 在很多的應(yīng)用的交互中，這種菊花的加載的設(shè)計(jì)已然要一統(tǒng)江湖了。 不過(guò)，現(xiàn)在對(duì)于加…

現(xiàn)在你很可能會(huì)遇到不止一個(gè)響應(yīng)遲鈍的 app 或加載緩慢的頁(yè)面。已經(jīng)是 2017 年了，我們當(dāng)然希望一切變的很快，但我們?nèi)匀粫?huì)體驗(yàn)到惱人的延時(shí)。怎么會(huì)這樣呢？難道我們的網(wǎng)絡(luò)連接不是逐年變快的么？我們的瀏覽器性能不是也變的更好？我們將在下文中討論這些。 事實(shí)上，瀏覽器和引擎越來(lái)越…

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

我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。不過(guò)在我前端工作的生涯中一直以為前端就是寫(xiě)寫(xiě)頁(yè)面，寫(xiě)寫(xiě)交互，就已經(jīng)很了不起，這種沒(méi)有志向的想法發(fā)導(dǎo)致我日后的工作一直處于瓶頸。做人嘛總要有夢(mèng)想嘛，不然跟一條咸魚(yú)有什么區(qū)別。最近我一直在關(guān)于前端優(yōu)化的問(wèn)題，原來(lái)…

在這個(gè)前端用戶體驗(yàn)越來(lái)越重要的時(shí)代，你的頁(yè)面稍微有點(diǎn)卡頓，都難以挽留用戶。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。今天，就來(lái)談一談那些前端性能優(yōu)化的加載技術(shù)，利用這些技術(shù)可以很好地提高網(wǎng)站的響應(yīng)速度和用戶體驗(yàn)。 頁(yè)面渲染 在理解真正的優(yōu)化技術(shù)之前，我們需要…

關(guān)于前端的性能優(yōu)化，每次提到這個(gè)詞大家都有很多idea。現(xiàn)在靜下來(lái)思考下我們用到的各種手段最終可以歸納為三步 這里主要是因?yàn)橐瓿梢徽麄€(gè)頁(yè)面的輸出后端需要處理很多個(gè)任務(wù)，我們可以將這些多個(gè)任務(wù)進(jìn)行分塊，誰(shuí)先完成誰(shuí)就先輸出，最終通過(guò)JS回填的方式輸出DOM節(jié)點(diǎn)。這種方式主要解決了…

過(guò)早優(yōu)化是萬(wàn)惡之源。 —— Donald Knuth 還記得大四的軟件優(yōu)化課上，課的主題雖然是關(guān)于各種優(yōu)化手段的，但老師講的第一門(mén)課的 PPT 里依舊給這句話留了獨(dú)立的一頁(yè)。在近期的工作中，我就碰到了不少因?yàn)椤斑^(guò)早優(yōu)化”帶來(lái)的麻煩。稍微整理了一下思緒，便有了這篇短文。

網(wǎng)絡(luò)速度很慢，但是有一些簡(jiǎn)單的策略可以使網(wǎng)站變快。其中之一就是 將關(guān)鍵的css內(nèi)聯(lián)插入到網(wǎng)頁(yè)的標(biāo)簽, 但是，如果您的網(wǎng)站包含數(shù)百頁(yè)，甚至更糟糕的是包含數(shù)百種不同的模板，那么你該怎么做呢？ 你不能手動(dòng)做這件事。

緩存的分類有很多種，CDN緩存、數(shù)據(jù)庫(kù)緩存、代理服務(wù)器緩存和瀏覽器緩存。本篇將來(lái)講解一下Web開(kāi)發(fā)中的瀏覽器緩存。這個(gè)在實(shí)際開(kāi)發(fā)環(huán)境中往往也會(huì)被問(wèn)到，或者使用到。如何去準(zhǔn)確認(rèn)清楚緩存的概念，是前端必須要去學(xué)習(xí)的。如果你喜歡我的文章，歡迎評(píng)論，歡迎Star~。歡迎關(guān)注我的gith…

大家都知道萬(wàn)維網(wǎng)的應(yīng)用層使用了HTTP協(xié)議，并且用瀏覽器作為入口訪問(wèn)網(wǎng)絡(luò)上的資源。用戶在使用瀏覽器訪問(wèn)一個(gè)網(wǎng)站時(shí)需要先通過(guò)HTTP協(xié)議向服務(wù)器發(fā)送請(qǐng)求，之后服務(wù)器返回HTML文件與響應(yīng)信息。這時(shí)，瀏覽器會(huì)根據(jù)HTML文件來(lái)進(jìn)行解析與渲染（該階段還包括向服務(wù)器請(qǐng)求非內(nèi)聯(lián)的CSS文…

該文章介紹了LINE內(nèi)web應(yīng)用「LINE漫畫(huà)」如何實(shí)現(xiàn)流暢的頁(yè)面切換。

PC端優(yōu)化的策略很多，如 YSlow（YSlow 是 Yahoo 發(fā)布的一款 Firefox 插件，現(xiàn) Chrome 也可安裝，可以對(duì)網(wǎng)站的頁(yè)面性能進(jìn)行分析，提出對(duì)該頁(yè)面性能優(yōu)化的建議）原則，或者 Chrome 自帶的 Audits 等，總結(jié)起來(lái)主要包括網(wǎng)絡(luò)加載類、頁(yè)面渲染類、…

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

我們?yōu)槭裁葱枰P(guān)注站點(diǎn)的性能，性能為什么如此重要呢？如今任何互聯(lián)網(wǎng)產(chǎn)品首先重要的都是流量，流量最終會(huì)轉(zhuǎn)換為商業(yè)價(jià)值。所以在互聯(lián)網(wǎng)產(chǎn)品中，流量、轉(zhuǎn)化率和留存率基本上是產(chǎn)品經(jīng)理或者業(yè)務(wù)非常關(guān)注的幾個(gè)因素，而性能則會(huì)直接影響到用戶的轉(zhuǎn)化和留存（在一定階段之后影響較大，產(chǎn)品初期功能的因…

作為一個(gè)全棧互聯(lián)網(wǎng)工程師，我們的目標(biāo)決不僅僅滿足于功能的實(shí)現(xiàn)，而且要包括性能、安全、易用性等等各方面的考量。那么是否有一些可以公開(kāi)評(píng)測(cè)的標(biāo)準(zhǔn)，使我們能夠準(zhǔn)確地知道目前我們網(wǎng)站的質(zhì)量水平在全行業(yè)中處于什么樣的水平呢？隨著技術(shù)水平的不斷進(jìn)步，網(wǎng)站評(píng)測(cè)方面的各種工具也在不斷演進(jìn)。
工…

圖片是界面顯示效果很重要的組成部分，圖片加載關(guān)系到用戶體驗(yàn)、應(yīng)用性能，優(yōu)化圖片加載的常用策略為：預(yù)加載和懶加載。

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

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

經(jīng)常能在博客或者論壇上看到很多有關(guān)前端性能優(yōu)化的文章，但是卻很少看到如何分析一個(gè)網(wǎng)頁(yè)的性能的文章。到底什么樣的指標(biāo)（或者說(shuō)是標(biāo)準(zhǔn)）代表這個(gè)網(wǎng)頁(yè)性能好或者不好，通過(guò)什么方式來(lái)得到這些指標(biāo)呢？因此，本文來(lái)講述下如何分析一個(gè)網(wǎng)頁(yè)的性能的好與差。本文用到的工具：chrome瀏覽器。下面…

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

一直以來(lái)，無(wú)論是web還是iOS、android的應(yīng)用中，為了提升應(yīng)用的加載等待這段時(shí)間的用戶感知體驗(yàn)，各種奇門(mén)遁甲之術(shù)層出不窮。其中，菊花圖以及由它衍生各種加載動(dòng)畫(huà)是一個(gè)非常大的流派，如下圖所示： 在很多的應(yīng)用的交互中，這種菊花的加載的設(shè)計(jì)已然要一統(tǒng)江湖了。 不過(guò)，現(xiàn)在對(duì)于加…

此文總結(jié)了筆者在Web靜態(tài)資源方面的一些優(yōu)化經(jīng)驗(yàn)。 用戶在訪問(wèn)網(wǎng)頁(yè)時(shí)， 最直觀的感受就是頁(yè)面內(nèi)容出來(lái)的速度，我們要做的優(yōu)化工作， 也主要是為了這個(gè)目標(biāo)。那么為了提高頁(yè)面加載（或者渲染）速度呢？一般來(lái)說(shuō)有三個(gè)方面： 1、代碼邏輯：優(yōu)秀的代碼邏輯結(jié)構(gòu)可以有效減少渲染頁(yè)面使用的內(nèi)存和…

前端性能優(yōu)化，不止于前端。

服務(wù)器上靜態(tài)資源更新時(shí)請(qǐng)求服務(wù)器最新資源，加載又飛快。 靜態(tài)資源加載速度引出了我們今天的主題，因?yàn)樽钪苯拥姆绞骄褪菍㈧o態(tài)資源進(jìn)行緩存。頁(yè)面渲染速度建立在資源加載速度之上，但不同資源類型的加載順序和時(shí)機(jī)也會(huì)對(duì)其產(chǎn)生影響，所以也留給了我們更多的優(yōu)化空間。 當(dāng)然除了速度，緩存還有另外…

在前端開(kāi)發(fā)中，緩存有利于加快網(wǎng)頁(yè)的加載速度，同時(shí)緩存能夠被反復(fù)利用，所以可以減少流量和帶寬的開(kāi)銷。

如今任何互聯(lián)網(wǎng)產(chǎn)品首先重要的都是流量，流量最終會(huì)轉(zhuǎn)換為商業(yè)價(jià)值。所以在互聯(lián)網(wǎng)產(chǎn)品中，流量、轉(zhuǎn)化率和留存率基本上是產(chǎn)品經(jīng)理或者業(yè)務(wù)非常關(guān)注的幾個(gè)因素，而性能則會(huì)直接影響到用戶的轉(zhuǎn)化和留存。

JQuery有非常多的選取節(jié)點(diǎn)的方法，但是采用這些方法選取節(jié)點(diǎn)時(shí)所影響到的性能是完全不一樣的，用更合適的選擇器去選取節(jié)點(diǎn)，是使用JQuery時(shí)優(yōu)化瀏覽器性能的一個(gè)可考慮方向。 首先，我們的建立一個(gè)有著復(fù)雜樣式的無(wú)序列表。 我們采用選取循環(huán)50000次的無(wú)序列表中的一個(gè)方法，來(lái)測(cè)…

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

不論是 PC 還是移動(dòng)端，圖片一直占據(jù)著頁(yè)面流量的大頭，在圖片的大小和質(zhì)量之間如何權(quán)衡，成為了長(zhǎng)期困擾開(kāi)發(fā)者們的問(wèn)題。而 WebP 技術(shù)的出現(xiàn)，為解決該問(wèn)題提供了好的方案。本文將為大家詳細(xì)介紹 WebP 技術(shù)，同時(shí)也會(huì)分享該技術(shù)在 MIP 項(xiàng)目)中的實(shí)踐。 WebP 是由 Go…

前端性能優(yōu)化，不止于前端。

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

服務(wù)端渲染，客戶端渲染，同構(gòu)

1.0時(shí)代沒(méi)什么說(shuō)的，html、css打天下的時(shí)代，那個(gè)時(shí)候你會(huì)用js開(kāi)發(fā)個(gè)計(jì)算器就牛逼到不行。2.0時(shí)代是最好的時(shí)代，新技術(shù)、新思想蓬勃發(fā)展，堪稱前端的工業(yè)革命，前端人員的地位得到了充分認(rèn)可，門(mén)檻也有一定的提升。前端性能優(yōu)化的涉及點(diǎn)從服務(wù)器到協(xié)議再到宿主環(huán)境本身都要有比較深刻…

互聯(lián)網(wǎng)正在爆發(fā)式地增長(zhǎng)，我們創(chuàng)建的 Web 平臺(tái)也是如此。我們通常都沒(méi)有考慮到用戶網(wǎng)絡(luò)的連通性和使用情景。即使是萬(wàn)維網(wǎng)現(xiàn)狀的一瞥，也可以看出我們還沒(méi)有建立起同理心和對(duì)形勢(shì)變化的認(rèn)知，更不用說(shuō)對(duì)性能的考慮了。 地球上 74 億人口中，只有 46% 的人能夠上網(wǎng)，平均網(wǎng)絡(luò)速度為 7…

瀏覽器自上而下讀取html文檔（此過(guò)程叫html parser），當(dāng)發(fā)現(xiàn)style.css文件時(shí)，瀏覽器parser停下來(lái)去搞css，等style.css下載并解析完畢，瀏覽器繼續(xù)parser。緊接著發(fā)現(xiàn)header.js， 于是html parser又停了，瀏覽器下載并執(zhí)行完…

對(duì)于前端的性能話題，從來(lái)都沒(méi)有斷絕過(guò)。因?yàn)檫@個(gè)東西沒(méi)有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開(kāi)發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們的用戶，同時(shí)也影響著產(chǎn)品本身。前端發(fā)展以來(lái)，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。這些內(nèi)容復(fù)雜繁多，往往容易被…

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

互聯(lián)網(wǎng)發(fā)展非常迅速，所以我們創(chuàng)造了Web平臺(tái)。通常我們會(huì)忽視連通性等問(wèn)題，但用戶們卻不會(huì)視而不見(jiàn)。一瞥萬(wàn)維網(wǎng)的現(xiàn)狀，可以發(fā)現(xiàn)我們并沒(méi)有用同情心、變通意識(shí)去構(gòu)建它，更不要說(shuō)性能了。
所以，今天的Web是什么狀態(tài)呢？
在這個(gè)星球上的74億人中，只有46％可以上網(wǎng)。平均網(wǎng)絡(luò)速度上限為…

對(duì)于一個(gè)網(wǎng)站如果希望抓住用戶，網(wǎng)站的速度以及穩(wěn)定性是首當(dāng)其沖的。
從各式各樣的前端監(jiān)控平臺(tái)中，你都可以獲得頁(yè)面很多的性能指標(biāo)。本文將介紹幾個(gè)幾個(gè)比較關(guān)鍵的指標(biāo)，并給出相應(yīng)的優(yōu)化思路。