網路層面：此時通過該ip就會訪問到對應的區域網然後通過交換機，再到路由器再到到主幹網路最後到服務端
服務端：controller層接收到資料，在model層做資料互動（會拿db和redis中的資料），最後通過view層到網路，然後通過網路層面最後到瀏覽器中進行render
從上面的請求過程中，就可以得到下面的優化點：
下面就是從上面的優化點而衍生出的一些優化方案
通過這個名稱我們就可以很容易的知道，其所涉及到的效能優化點為：
壓縮方式：
nodejs提供的html-minifier工具
後端模板引擎渲染壓縮
html壓縮概述：html壓縮在壓縮的量上可能不會很大，從而可能會覺得其優化不能帶來很大直觀上效能的改變，但是需要注意的是如果乙個**訪問的量如果很多，那麼這樣的優化方式所存在就是必然的。可以概述為一句常用的話為量變而達到質變
css壓縮方式
使用html-minifier對html中的css進行壓縮
使用clean-css對css進行壓縮
js壓縮和混亂實現方式
使用html-minifier對html中的js進行壓縮
使用uglifyjs2對js進行壓縮
js壓縮概述：js壓縮除了在效能優化上的作用外，其在保護**上也達到了一定的作用，因為**的可讀性很差從而在一定程度上增加了**的安全性
對於檔案合併主要從合併請求與不合併請求兩方面看：
檔案與檔案之間有插入上的請求，會增加n - 1個網路延遲
受丟包問題影響更加嚴重
經過的**伺服器可能隨時會被斷開
採用合併請求的方式
首屏渲染：頁面在渲染的過程中會等js檔案載入完成之後渲染，渲染頁面由於js檔案過多而導致載入速度變慢
快取失效問題：將多個js檔案合併為乙個時，如果其中乙個js檔案改變會導致該檔案的改變，從而會導致之前快取的內容失效
公共庫的合併
不同頁面之間的合併
其他(看具體的業務場景)
使用構建工具進行檔案合併，如webpack等構建工具
png8：採用256色（即2^8）其支援透明處理，存在的特點為顏色支援小但其所消耗的資源相對較少
png32：採用2^8儲存顏色值，支援的色彩豐富度多也支援透明色的處理
減少**的http請求數量
當載入不出時，會出現頁面上所有需要該的部分都顯示不出，影響渲染效果
當修改時，重新拼接等，有的需要重新進行裁剪，在維護上不方面
使用向量圖：使用svg進行向量圖的繪製，如使用iconfont解決icon問題
使用webp格式的：webp優勢體現在其具有更優的影象資料壓縮演算法，能帶來更小的體積；同時具備有損和無損的壓縮模式、alpha透明以及動畫的特性，在jpeg和png上的轉化效果非常優秀和穩定
的懶載入
作用：減少無效資源的載入，增強頁面的效能，有更好的互動體驗
懶載入的實現方案：
採用原生js實現
使用lazyload外掛程式
的預載入首先需要了解的就是整個瀏覽器在渲染過程中是怎樣乙個過程，其渲染過程如下：
拿到html文件
解析html生成乙個dom樹，解析css生成乙個css樹
將dom樹與css樹結合渲染生成乙個render樹
layout(回流)：根據生成的render樹，進行回流，得到節點的幾何資訊
painting(重繪)：根據render樹以及回流得到幾何資訊，從而得到節點的絕對畫素
display：將畫素發給gpu經過計算最終展示在頁面
css載入是否會阻塞js載入
js的載入是否會影響後續的js執行
css載入是否會影響頁面的渲染
順序執行、併發載入
css阻塞
js阻塞
css效能與js之間的關係
在這兩者之間存在著一定的關係，即css效能會讓js執行變慢，造成這個的原因是因為在頻繁的出現回流與重繪時，會導致ui頻繁渲染，最終導致js執行變慢回流
重繪
基於重繪與回流優化
對於該部分首先需要理解新建dom過程：
從這裡的優化點可知，如果要將重繪、回流限制在單獨的圖層中需要知道的就是怎樣去建立乙個圖層，在chrome中建立圖層的條件如下：
基於重繪與回流的優化點：
對於從快取方面來優化頁面就需要知道以下兩點：
localstorage、cookie、sessionstorage以及indedb的概念及應用
理解pwa和service worker的應用
作用：
cookie儲存的限制：
解決方式：cdn網域名稱和主站的網域名稱要分開
其具有以下的幾個特點：
其具有以下特點：
該分級快取的順序依次為：
200狀態(form cache)：這一層由expires/cache-control控制
expires(http1.0版本有效)，是絕對時間
cache-control(http1.1版本有效)，相對時間
優先順序：當兩者都存在時，cache-control覆蓋expires只要沒失效，瀏覽器只訪問自己的快取
304狀態：該層由last-modified/etag控制，當下一層失效時或者這使用者重新重新整理時，瀏覽器就會傳送請求到服務端，如果服務端沒有變化就返回304，此時瀏覽器就會使用快取中的內容
檔案的內容為hash值，
etag——>response header,if-none-match——>request header
檔案內容為時間
last-modified ——>response header,if-modified-since——>request header
其存在的缺點：1. 某些服務端不能獲取精確的修改時間；2. 存在檔案時間修改了，檔案內容沒變的情況
可靠：在沒有網路的環境中也能提供基本的頁面訪問，而不是會出現"未連線到網際網路"的頁面
快速：針對網頁渲染以及網路資料訪問有較好的優化
融入：應用可以被新增到手機桌面，並且和普通應用一樣有全屏、推送的特性
service woker生命週期：
no service worker到installing
如果安裝成功就進入啟用狀態，否則則報乙個error
進入啟用狀態之後就直接進入idle（整合開發環境）
最後idle狀態也可以進入到terminated或者是fetch/message，兩者之間可以互換
在有前端框架時，在客戶端首屏渲染時，會有延遲，如以vue框架寫的專案會進行如下過程
載入vue.js
進行vue相關邏輯的執行
載入html
多層次的優化方案:
學習理解vue-ssr的原理和應用
vue-ssr應用：
因而從中我們可以做一些事情，例如將一些內容放在伺服器端去進行處理直接給渲染成html模板，這樣利用服務端的計算能力來處理，從而來提公升頁面的效能
前端效能優化 快取優化
控制瀏覽器強快取主要靠兩個響應頭部欄位來實現 expires和cache control，瀏覽器在訪問靜態資源時，會首先判斷該資源是否做了強快取。如果發現是強快取並且快取還在有效期內，那就不會去傳送http請求，而直接使用本地的快取 這個快取可能來自於記憶體，也可能來自本地磁碟空間 其中expire...
前端效能優化 資源優化
資源優化方向壓縮和合併，目的是減少http請求數量 減少請求資源大小。css js檔案合併原則 1 若干小檔案可以嘗試合併 2 無衝突，服務相同模組 3 不是為了優化合併而合併，按需合併，讓使用者更早看到和使用功能為主。1 選擇合適格式的，了解jpg png svg webp gif等格式的特點，j...
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...