前端性能優化

時間 2019-11-06

原文原文鏈接

優化向：單頁應用多路由預渲染指南

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

javascript

瀏覽器的渲染：過程與原理

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

css

JavaScript性能優化技巧：概述

在這篇文章中，涵蓋了不少普遍而又多變的環境。咱們將盡可能堅持「使用工具，而不是規則」的原則，把JS的流行詞彙保持在最低限度。因爲咱們沒法在2000字的文章中涵蓋與 JS 性能表現相關的全部內容，因此請確保你閱讀文中提到的引用資料，並在以後你本身進行了相應的研究。

html

從Chrome源碼看瀏覽器如何加載資源

對瀏覽器加載資源有不少不肯定性，例如： css/font的資源的優化級會比img高，資源的優化級是怎麼肯定的呢？
資源優先級又是如何影響加載的前後順序的？
有幾種狀況可能會致使資源被阻止加載？
經過源碼能夠找到答案。這次源碼解讀基於Chromium 64。

前端

瀏覽器性能優化-渲染性能

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

java

使用 Skeleton Screen 提高用戶感知體驗

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

android

[[V8]找出可能影響性能的代碼（模式）](https://juejin.im/entry/59f95...

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

git

「前端那些事兒」② 極限性能優化

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

github

談談關於前端的緩存的問題

咱們都知道對頁面進行緩存可以有利於減小請求發送，從而達到對頁面的優化。不過在我前端工做的生涯中一直覺得前端就是寫寫頁面，寫寫交互，就已經很了不得，這種沒有志向的想法發致使我往後的工做一直處於瓶頸。作人嘛總要有夢想嘛，否則跟一條鹹魚有什麼區別。最近我一直在關於前端優化的問題，原來…

web

前端性能優化之加載技術

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

ajax

[[web前端性能優化]性能優化只有三步，你瞭解嗎](https://juejin.im/entry/5a201...

關於前端的性能優化，每次提到這個詞你們都有不少idea。如今靜下來思考下咱們用到的各類手段最終能夠概括爲三步這裏主要是由於要完成一整個頁面的輸出後端須要處理不少個任務，咱們能夠將這些多個任務進行分塊，誰先完成誰就先輸出，最終經過JS回填的方式輸出DOM節點。這種方式主要解決了…

淺談前端中的過早優化問題

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

什麼是關鍵 CSS ？

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

瀏覽器緩存篇

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

瀏覽器渲染過程與性能優化

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

LINE漫畫：經過Page Stack實現流暢的頁面切換

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

分享17點PC瀏覽器前端優化策略——網絡加載篇

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

JS中圖片壓縮的通常方法

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

前端感官性能的衡量和優化實踐

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

如何打造一個全滿分網站

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

圖片加載優化

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

[[譯]JavaScript 的時間消耗](https://juejin.im/entry/5a23e...

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

懶加載和預加載

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

網頁性能分析不徹底指南

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

Web 性能優化 - TCP

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

認識Skeleton Screen【屏幕加載骨架】

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

Web前端性能優化——如何有效提高靜態文件的加載速度

Web 前端性能優化 : 如何有效提高靜態文件的加載速度

此文總結了筆者在Web靜態資源方面的一些優化經驗。用戶在訪問網頁時，最直觀的感覺就是頁面內容出來的速度，咱們要作的優化工做，也主要是爲了這個目標。那麼爲了提升頁面加載（或者渲染）速度呢？通常來講有三個方面：一、代碼邏輯：優秀的代碼邏輯結構能夠有效減小渲染頁面使用的內存和…

前端性能優化之 DOM 篇

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

Web靜態資源緩存及優化

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

瀏覽器緩存篇

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

前端感官性能的衡量和優化實踐

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

前端性能JQuery篇之選擇器優化

JQuery有很是多的選取節點的方法，可是採用這些方法選取節點時所影響到的性能是徹底不同的，用更合適的選擇器去選取節點，是使用JQuery時優化瀏覽器性能的一個可考慮方向。首先，咱們的創建一個有着複雜樣式的無序列表。咱們採用選取循環50000次的無序列表中的一個方法，來測…

使用合適的設計模式一步步優化前端代碼

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

CSS 寫做建議和性能優化小結

WebP 在減小圖片體積和流量上的效果如何？—— WebP 技術實踐分享

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

前端性能優化之圖片篇

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

javascript性能優化技巧 - 緩存與函數重載實戰

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

服務端渲染 vs 客戶端渲染

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

鳥瞰前端 , 再論性能優化

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

[[譯] 網絡現狀：性能提高指南](https://juejin.im/entry/59c4b...

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

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。