前端優化 - 收藏集 - 掘金

如何提高頁面渲染效率 - 前端 - 掘金
Web頁面的性能 咱們天天都會瀏覽不少的Web頁面，使用不少基於Web的應用。這些站點看起來既不同，用途也都各有不一樣，有在線視頻，Social Media，新聞，郵件客戶端，在線存儲，甚至圖形編輯，地理信息系統等等。雖然有着各類各樣的不一樣，可是相同的是，他們...

前端優化不徹底指南 - 前端 - 掘金
篇幅可能有點長，我想先聊一聊閱讀的方式，我但願你閱讀的時候，可以把我看成你的競爭對手，你的夢想是超越我。你想超越我，就得了解我懂什麼對吧，好，開始閱讀~ ~ 哈哈哈 ~ ~ ~ 歷時144000000毫秒出山的前端優化篇，若你問我有什麼感悟？那我告訴你，看到毫...

使用 Service worker 實現加速 / 離線訪問靜態 blog 網站 - 前端 - 掘金
做者：Google 開發技術專家 (GDE) 楊波 (Alpha) 如今很流行基於 GitHub page 和 markdown 的靜態 blog，很是適合技術的思惟和習慣，針對不一樣的...

用 webpack 實現持久化緩存 - 前端 - 掘金
什麼是持久化緩存？ 緩存（cache）一直是前端性能優化的重頭戲，利用好靜態資源的緩存機制，可使咱們的 web 應用更加快速和穩定。僅僅簡單的資源緩存是不夠的，咱們還要爲不斷更新的資源作持久化緩存（Lon...

如何減少 PNG 圖片大小 - Android - 掘金
原文連接 : Reducing PNG file Size 原文做者 : Colt McAnlis 譯者 : rogero0o 在谷歌工做的一個優點就是我能夠看到不少的 ...

(譯) 關於漸進式 Web 應用，你應該知道的一切 - 前端 - 掘金
演示 下載 漸進式 Web 應用是利用現代瀏覽器的特性，能夠添加到主屏幕上，表現得像原生應用程序同樣的 Web 應用程序。 本教程將用實例和一個演示應用程序，一步一步向你展現關於漸進式 Web 應用程序你應該知道的一切。爲了避免從零開始，咱們打算用咱們最近作過的...

基於 Webpack 的應用包體尺寸優化 - 前端 - 掘金
基於 Webpack 的應用包體尺寸優化翻譯自Optimising-Your-Application-Bundle-Size-With-Webpack,從屬於筆者的 Web 前端入門與最佳實踐 中的 React 入門與最佳實踐系列。筆...

關於 HTML 中 meta 標籤的理解和總結 - 前端 - 掘金
以前學習前端中，對meta標籤的瞭解僅僅只是這一句。 " title="" data-original-title="複製"> ...

localStorage 的黑科技 - js 和 css 緩存機制 - 前端 - 掘金
1、發現黑科技的原由 今天在微信公衆號看到一篇技術博文，想用印象筆記收藏，因此發送了文章連接到pc上。而後習慣性地打開控制檯，看看源碼，想了解下最近微信用了什麼新技術。 呵呵，如下勾起了我偵探的慾望。頁面加載後的異常點就是隻加...

將 React 應用優化到 60fps - 前端 - 掘金
將 React 應用優化到 60fps翻譯自React at 60fps，從屬於Web 前端入門與工程實踐。 做爲 DOM 的抽象，React 天然也遵循了著名的抽象漏洞定理（詳見2016-個人前端之路:工具化與工程化），引入 React 導...

bowl - 輕量級的前端資源緩存加載器 - 前端 - 掘金
如今單頁應用愈來愈多，前端能作的事也愈來愈多，但隨之而來的問題是一個單頁應用的 CSS 和 JavaScript 代碼的體積也愈來愈大。應用每次初始化的時候都要加載這些龐大的資源，雖然瀏覽器有本身的緩存機制，但首先它並不必定靠譜，其次即便緩存有效，每次加載資源...

一個微信面試題引起的血案 --(譯) 什麼阻塞了 DOM？ - 掘金
譯者注：昨天一篇工做僅一年的前端工程師面試幾個大廠的文章 （1月前端面試記） 在掘金火爆起來。一方面你們以爲做者太厲害了，工做近一年，能力居然這麼強（大叔我表示慚愧），另外一方面幾個微信面試題引發不少討論。其中我比較感興趣的一個題目是關於JavaScript和C...

使用自記憶函數提升頁面性能 - 前端 - 掘金
當你真正想要提升頁面性能，你會發現你的代碼和屎沒兩樣。 自記憶函數這個名字聽起來有點奇怪，這只是人們給它取的一個名字罷了。 在JavaScript中，函數是第一型對象，因此它能夠擁有本身的屬性，咱們就能夠利用這一點來進行數據的緩存。 ...

PWA 漸進式實踐 (3) - 用戶體驗 & 性能（97 分） - 前端 - 掘金
爲了讓咱們的網站能達到更高的評分（咦，爲何變成刷分了），咱們最後須要進行用戶體驗和性能的優化。 頁面加載性能 咱們須要儘量把其餘全部頁面作成異步的，如： function getSubmitCase(nextState, callback)...

PWA 漸進式實踐 (2) - Service Worker - 前端 - 掘金
做爲 PWA 的象徵之一，咱們首先作的，就是加上 Service Worker。 添加 Service Worker Service worker是一個註冊在指定源和路徑下的事件驅動worker。它採用JavaScript控制...

PWA 漸進式實踐 (1) - Lighthouse in Action - 前端 - 掘金
不知道你們還記不記得以前的四篇 PWA 系列翻譯： 知乎專欄 知乎專欄 知乎專欄 知乎專欄 不過這畢竟是老外他們本身的實踐，並且相對來講是從科普角度來描述了 PWA 的...

(譯) 前端 2017 性能優化清單 - 前端 - 掘金
@(By Vitaly Friedman 譯 陳威特)[前端, 性能] 原文 你已經在使用漸進式啓動了嗎？那麼React 和 Ang...

移動 web 1 像素邊框 瞧瞧大公司是怎麼作的 - 設計 - 掘金
移動端 web 項目愈來愈多，要求也愈來愈高，好多設計師都發現了，大家前端實現的邊線爲何是糊的，根本不是 1 像素，好吧，我只能找參考，要麼征服設計，要麼征服本身。...

教你在微信中給 Vue 單頁應用動態設置標題 - 前端 - 掘金
前言 因爲Vue React Angular等框架出來的應用都是SPA(single-page-application),因此就沒有所謂的頁面 都是router而網頁的標題 隨着路由的改變而改變 也就成了一個需求 ...

Mars - 騰訊移動 Web 前端知識庫 - 前端 - 掘金
面向億萬用戶級的移動端Web解決方案： 代碼結構規範 字體設置最佳實踐 ...

vue-lazy-render: 延遲渲染大組件，加強頁面切換流暢度 - 掘金
最近用element來作項目，在開發的過程當中，忽然發現頁面的操做和切換在數據量大的時候至關卡，後來提了個issue,在furybean解答後才知道，我每一個單元格都加了tooltip，會生成大量的節點，形成頁面操做卡頓。後來將tooltip去掉，操做流暢多了。 ...

移動 Web 滾動性能優化: Passive event listeners - 前端 - 掘金
移動 Web 滾動性能優化: Passive event listeners 今年的 Google I/O 已通過去一段時間了，大部分人都關注了一些新產品的發佈，好比 Allo 和 Duo、Android N、Daydream、Android Studio、F...

使用 gulp 生成 sprites 圖片和樣式表 - 前端 - 掘金
CSS Sprites指的是網頁圖片的一種處理技巧，廣泛使用於各大類型的網站上面，基本上隨便打開一個網頁，查看資源，你都會看到相似的圖片。 一般是一些體積很小，不常更換的圖片，目的很簡單，減小HTTP請求次數。 也經常使用來製做按鈕切換狀態。 古老的作法在學gu...

網頁圖片優化和性能分析 - 工具資源 - 掘金
圖片優化 理想的網頁應該在1秒內打開。而在頁面的總體大小中，圖片每每是所佔比例最大的一部分。優化圖片不只能夠加快頁面顯示，還能下降移動網絡的流量費用。原圖產生的 PNG、JPEG、GIF 和 SVG 圖片通常都有很大的壓縮餘地。SVG 中每每有不少編輯工具帶來...

你真的懂 JavaScript 的正則嗎？ - 掘金
本文內容主要出處爲《JavaScript權威指南》(第六版)，筆者只是在搬磚的同時整理思路，有誤望及時指出，感謝！ 定義正則表達式 概述 對於正則表達式的概念咱們就很少費口舌了...在JavaScript中使用正則表達式進行模式匹配離不開RegExp對象，...

破解前端面試（80% 應聘者不及格系列）：從 DOM 提及 - 掘金
共 7384 字，讀完需 10 分鐘。本文爲《破解前端面試（80% 應聘者不及格系列）》文章的第二篇，包含 DOM、Event、瀏覽器端優化、數據結構和算法功底的考察。可能有同窗會問 DOM 有什麼好聊的，不就是節點的各類操做麼？DOM 是網頁構建的基石，熟練...

爲何 getElementsByTagName 比 querySelectorAll 方法快 - 前端 - 掘金
最近準備把JavaScript的許多原生API都研究一下，恰巧昨天在看querySelectorAll方法的時候看到了一篇文章Why is getElementsByTagName() faster than querySelectorAll()?，這篇文章解...

前端進階：透徹掌握 Promise 的使用，讀這篇就夠了 - 前端 - 掘金
Promise：高手必備 Promise的重要性我認爲我沒有必要多講，歸納起來講就是必須得掌握，並且還要掌握透徹。這篇文章的開頭，主要跟你們分析一下，爲何會有Promise出現。 在實...

發佈（Publish）/ 訂閱（Subscribe）模式 - 前端 - 掘金
簡稱pub/sub，pub/sub模式是咱們平時業務中常常會使用到的，sub會監聽一類消息來達到pub發佈的時候進行相應的邏輯處理 舉個例子，好比頁面上有個列表，當咱們點擊刷新的時候要更新列表，當咱們添加一個數據的數據的要更新列表，當咱們刪除一個...

HTML5 一些有用的 APIs - 前端 - 掘金
Animation Timing Window.requestAnimationFrame(callback)： 告訴瀏覽器但願執行一個動畫，讓瀏覽器在下一個動畫幀安排一次網頁重繪（相似於 setTimeout，可是更精確） ...

舉個小栗子來聊下性能優化 - 掘金
我向來是先實現功能再考慮優化，否則就本末倒置了。 網上有不少關於前端優化的帖子，最出名的應該是雅虎前端優化35條軍規了，但其實不少朋友看完就忘了，確實要記住這麼多條優化建議有困難。但你吸取這些優化建議後，你的潛意識就會慢慢養成優化的習慣，看到不完美的代碼你就...

移動端真機調試指南 - 前端 - 掘金
導語：隨着移動設備的普及以及微信龐大的用戶量，移動端的需求也隨之爆發式增加，平時咱們使用 Chrome 進行手機模擬頁面開發，但模擬終究是模擬，不可避免的仍是須要真機調試，下面就來說講幾種調試方案，但願能對你有所幫助。 系統自帶調試功能 ...

「前端」History API與瀏覽器歷史堆棧管理 - 掘金
本文由尚妝前端開發工程師欲休撰寫 本文發表於尚妝博客，歡迎訂閱！ 移動端開發在某些場景中有着特殊需求，如爲了提升用戶體驗和加快響應速度，經常在部分工程採用SPA架構。傳統的單頁應用基於url的hash值進行路由，這種實現不存在兼容性問題，可是缺點也有--針對...

JavaScript兩個變量交換值（不使用臨時變量） - 掘金
概要 本文主要描述，如何不使用中間值，將兩個變量的值進行交換。 前三種只適用於number類型的數值交換，第四和第五種適合其餘類型。 1、普通作法 var a = 1, b = 2, tmp; tmp = a; a = b; b = tmp...

實現一個快速排序 - 前端 - 掘金
快速排序 引自wikipedia 快速排序（英語：Quicksort），又稱劃分交換排序（partition-exchange sort），一種排序算法，最先由東尼·霍爾提出。在平均情況下，排序n個項目要Ο(n log n)次比較。在最壞情況下則須要...

移動端實踐 - video - 前端 - 掘金
提及video，相信你們並不陌生。對於作過視頻方面的小夥伴，特指前端方面的小夥伴，對它更是愛恨交加。由於，video使咱們很方便在移動端播放視頻，沒必要像PC端那樣須要安裝一個flash。 video很複雜嗎？不，它很簡單。要想使...

騰訊 2016 公司代碼報告前端開發總結 - 前端 - 掘金
2016年騰訊公司代碼報告已經正式發佈，記錄下開發過程當中遇到的問題，以及一些使用過的東西。查看請微信掃碼： 騰訊2016公司代碼報告前端篇 ...

Javascript 高性能動畫與頁面渲染 - 前端 - 掘金
No setTimeout, No setInterval 若是你不得不使用setTimeout或者setInterval來實現動畫，那麼緣由只能是你須要精確的控制動畫。但我認爲至少在如今這個時間點，高級瀏覽器、甚至手機瀏覽器的普及程度足夠讓你有理由有條件在實...

從一道面試題的進階，到「我可能看了假源碼」 - 前端 - 掘金
今天想談談一道前端面試題，我作面試官的時候常常喜歡用它來考察面試者的基礎是否紮實，以及邏輯、思惟能力和臨場表現，題目是：「模擬實現ES5中原生bind函數」。也許這道題目已經再也不新鮮，部分讀者也會有思路來解答。社區上關於原生bind的研究也不少，好比用它來實現...

瀏覽器，加載，解析，渲染 - 前端 - 掘金
昨天爲了 瞭解瀏覽器是怎麼處理（.html、.css、.js）這些文件，我看了網上的好多資料，這好多資料中，有不少是經過轉載、或是轉載後加之本身的理解，可是由於本身對專業的詞彙理解很差，還有一些做者將不一樣瀏覽器的處理過程混着說，總之，看完了，仍是有不少疑慮的地...

javascript array js 緩存算法，數組去重、數組隨機抽取、字母串轉數字，數字轉字符串 - 前端 - 掘金
前言 由於平時在寫代碼的過程當中，有些算法會常常重複寫，好比數組去重、數組抽取隨機值等！雖然這些不是很難的邏輯，可是每次剛開始遇到需求的時候，仍是須要琢磨一些時間才能想出來，因此此文檔把這些常見算法的思想記錄下...

《高性能 JavaScript》讀書筆記 - 前端 - 掘金
入手《高性能JavaScript》一週後，終於斷斷續續看完了。簡要說說感覺，就是這本書很是薄，很是容易看，認真看的話其實兩三個小時就能翻一遍了。這篇文章也是做爲一篇閱讀筆記，用來記錄我在閱讀過程當中的一些理解與感悟。 乍一...

網易和淘寶移動 WEB 適配方案再分析 - 前端 - 掘金
最近把移動WEB適配相關的問題梳理了一遍，學習了幾篇文章，其中 從網易與淘寶的font-size思考前端設計稿與工做流 - 流雲諸葛 - 博客園 分析了網易和淘寶對移動WEB適配問題的解決方案，乾貨很多，可是一些概念和思路不是很清晰。我在這裏結...

JavaScript 中的多線程 -- Web Worker - 前端 - 掘金
Web Worker 介紹 Web Worker爲Web內容在後臺線程中運行腳本提供了一種簡單的方法。線程能夠執行任務而不干擾用戶界面。此外，他們可使用XMLHttpRequest執...

前端基礎進階：詳細圖解 JavaScript 內存空間 - 前端 - 掘金
JS棧內存與堆內存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 由於JavaScript具備自動垃圾回收機制，因此對於前端開發來講，內存...

JS 中常見排序算法詳解 - 前端 - 掘金
本文將詳細介紹在JavaScript中算法的用法，配合動圖生動形象的讓你以最快的方法學習算法的原理以及在需求場景中的用途。 有句話怎麼說來着： 雷鋒推倒雷峯塔，Java implement...

localStorage 的黑科技 - js 和 css 緩存機制 - 前端 - 掘金
1、發現黑科技的原由 今天在微信公衆號看到一篇技術博文，想用印象筆記收藏，因此發送了文章連接到pc上。而後習慣性地打開控制檯，看看源碼，想了解下最近微信用了什麼新技術。 呵呵，如下勾起了我偵探的慾望。頁面加載後的異常點就是隻加...

一個微信面試題引起的血案 --(譯) 什麼阻塞了 DOM？ - 掘金譯者注：昨天一篇工做僅一年的前端工程師面試幾個大廠的文章 （1月前端面試記） 在掘金火爆起來。一方面你們以爲做者太厲害了，工做近一年，能力居然這麼強（大叔我表示慚愧），另外一方面幾個微信面試題引發不少討論。其中我比較感興趣的一個題目是關於JavaScript和C...