N頁面作為一個入口頁面，對頁面加載速度有著極高的要求。同時，N頁面內部卻又有著非常復雜的功能與交互。N頁面的一版上線時，頁面引用的js文件有3個，一共40-50k（壓縮&Gzip之后）。頁面onload時間在1.3秒。1.3秒的load時間，相比較絕大多數網站來說都是一個不錯的數值。但老板一句話“怎么這個頁面打開這么慢”，立刻像是給我們的后背安了一枚定時炸彈。性能優化成了N頁面下一步工作的重中之重。

    老板重視頁面速度，對于Web前端開發人員來說其實是件幸事，這表明你將有更豐富的時間和資源去實踐Web性能優化這一課題，不用被翻來覆去的產品升級需求所打擾。那么對于N頁面，我們做了哪些實踐：

一、濟南seo常規優化手段包括：

    CSS置頂，JS置底。

    靜態資源外聯、合并、壓縮。

    圖片優化。（Png使用pngcrush；Gif使用gifsicle；Jpeg使用jpegtran）

    圖片延遲加載。（主要針對首屏外的圖片。）

    使用CSS Sprite，首屏圖片全部合到一張圖上。

    靜態文件上CDN。（靜態文件的下載能提速20%左右。）

    靜態文件設置強緩存。（命中強緩存82.4%；命中若緩存3.4%；未命中緩存14.2%。）

    HTML壓縮。（Gzip后減少%5。）

二、增強型手段：

    基礎庫定制。（用代碼分析代碼，自動打包被使用到的方法作為基礎庫，使基礎庫從原來的壓縮后25K減小為9.8K，減小了61%）

    頁面數據存儲優化。（從原來的直接寫json形式的script，變為將json隱藏在textarea中，初始化或用到的時候才去提取并進行解析。）

    首屏CSS檢測。（對首屏用到的CSS進行檢測，將不屬于首屏的CSS代碼單獨打包并移到首屏之外進行延遲加載）

    js按需加載。（在后面做重點介紹）

三、監控& 測量

    性能優化重要的工作不是優化而是監控。這個道理很簡單：沒有監控體系就沒辦法衡量性能優化的效果，那么你所做的任何工作都是盲目的。我們對性能的監控是從多個維度展