原创 前端性能優化-知識體系

前端性能優化這件事情上, 我認爲他是20%的理論, 加上至少80%的實踐, 甚至很多理論本身也都是我們具體的業務場景中實踐出來的。前端技術日新月異, 性能方案永遠都在更迭, 所以一定要形成自己的學習思路。 從一道面試題說起 從輸入U

原创 JavaScript 中的異步模式

JavaScript 中的各種異步模式 Callback 我們知道在 JavaScript 中,函數是一等公民,當一個函數傳入另外一個函數當作參數時,我們就可以把這個函數叫做 Callback 函數。而這裏的「另外一個函數」也有一個常見的

原创 DOM 優化原理

DOM 爲什麼這麼慢 因爲收了“過路費” 把 DOM 和 JavaScript 各自想象成一個島嶼,它們之間用收費橋樑連接。——《高性能 JavaScript》 JS 是很快的,在 JS 中修改 DOM 對象也是很快的。在JS的世界裏

原创 事件的節流與防抖

// 節流函數1 function throttle (fn, interval) { // last 上次觸發回調的時間 let last = 0; return function () {

原创 webpack究竟解決了什麼

webpack最初的目標就是實現前端項目的木塊化, 也就是說他所解決的問題是如何在前端項目中高效的管理和維護項目中的每一個資源。 如果要搞明白webpack, 就必須先對他想要解決的問題或者目標有一個充分的認識, 帶着問題再去理解他的很多

原创 webpack是怎樣運行的

同步加載 新建src/index.js console.log("hello world"); 新建webpack配置文件webpack.config.js const path = require('path'); const My

原创 字體提取

【說明】 遊戲中經常需要用到各種字體,但是網上下載的TTF字體文件最小也有好幾兆,要是遊戲中需要用到幾種字體,那簡直不能忍。 通常情況下,我們會用BMFont代替TTF字體,BMFont也有着很多的優勢,但是缺點也很明顯,每次修改都要美工

原创 JavaScript的環境模型

環境模型這個概念它用於解釋Scheme的函數計算規則 環境是什麼 環境在計算過程中必不可少, 因爲他決定了計算表達式的上下文。 可以這樣認爲, 表達式本省在語言裏毫無意義, 表達式的意義取決於他計算時所在的環境。 JavaScript

原创 圖片優化——質量與性能的博弈

就圖片這塊來說, 與其說是在做優化, 不如說實在做權衡。因爲我們要做的事情, 就是去壓縮圖片的體積。但是這個操作, 是以犧牲一部分成像質量爲代價的。因此我們的主要任務, 是儘可能的去尋求一個質量與性能之間的平衡點。 不同業務場景下的圖片方

原创 ES6詳解

let和const let a=12; let a=5; alert(a); // Uncaught SyntaxError: Identifier 'a' has already been declared const

原创 JavaScript是如何工作的(二)

對於任何一個程序員來說, 最關注的兩個問題無非就是:時間複雜度和空間複雜度。第一部分介紹了V8爲改進JavaScript執行時間所做的速度提升和優化, 第二部分則將着重介紹內存管理方面 內存堆 每當你在 JavaScript 程序中定

原创 關於正向代理與反向代理

用中文說人話的方式, 正向代理應該叫客戶端代理, 他代理的是客戶端的請求, 反向代理應該叫服務端代理, 他代理的是服務端的服務。 Forward Proxy(正向代理) 最經典的應用就是:我是一個國內用戶,我訪問不了google,但是我

原创 首屏優化實踐——lazy-load

首先新建一個空項目,目錄結構如下: 我們在 index.html 中,爲這些圖片預置 img 標籤: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

原创 前端路由原理解析和實現

什麼是前端路由? 路由的概念來源於服務端,在服務端中路由描述的是 URL 與處理函數之間的映射關係。 在 Web 前端單頁應用 SPA(Single Page Application)中,路由描述的是 URL 與 UI 之間的映射關係,這

原创 瀏覽器緩存機制介紹與緩存策略剖析

緩存可以減少網絡IO消耗,提高訪問速度。瀏覽器緩存是一種操作簡單,效果顯著的前端性能優化手段。對於這個操作的必要性,Chrome官方給出的解釋更具有說服力 通過網絡獲取內容即速度緩慢,又開銷巨大。較大的響應需要在客戶端與服務器之間進行多