* 請(qǐng)說(shuō)出靜態(tài)資源請(qǐng)求的優(yōu)化措施？是否用過(guò)“雪碧圖”和iconfont？

不知名網(wǎng)友發(fā)布于2019-08-30 11:25 / 2070人閱讀

摘要：減少請(qǐng)求合并打包小圖標(biāo)等用代替作為單個(gè)節(jié)點(diǎn)使用，可以設(shè)置大小顏色等，非常便利。前后端分離項(xiàng)目，不論是還是，都有相應(yīng)的工具包。不過(guò)，大部分前端對(duì)應(yīng)該陌生一些，為了實(shí)踐技術(shù)，用熟悉的即可，真正的項(xiàng)目部署，有專業(yè)的實(shí)施人員來(lái)搞使用緩存

減少HTTP請(qǐng)求

CSS/JS 合并打包
小圖標(biāo)等用iconfont代替：作為單個(gè)DOM節(jié)點(diǎn)使用，可以設(shè)置大小、顏色等，非常便利。個(gè)人建議前端來(lái)維護(hù)這個(gè)字體包，每次有新增的圖標(biāo)，讓設(shè)計(jì)師給我們對(duì)應(yīng)的svg文件即可，前端自己去 icomoon.io/ 這個(gè)網(wǎng)站，導(dǎo)入原來(lái)的selection.json文件，增量生成新的css，無(wú)比方便。之前，我一直以為iconfont只能是單色的呢，其實(shí)也可以是多色的，svg里面多一些path而已，設(shè)計(jì)師會(huì)搞定的。生成字體后，前端正常引用即可（引用的時(shí)候，多色字體會(huì)多一些標(biāo)簽）
使用base64格式的圖片：有些小圖片，可能色彩比較復(fù)雜，這個(gè)時(shí)候再用iconfont就有點(diǎn)不合適了，此時(shí)可以將其轉(zhuǎn)化為base64格式（不能緩存），直接嵌在src中，比如webpack的url-loader設(shè)置limit參數(shù)即可

減少靜態(tài)資源的體積
壓縮靜態(tài)資源：合并打包的js、css文件體積一般會(huì)比較大，一些圖片也會(huì)比較大，這個(gè)時(shí)候必須要壓縮處理。前后端分離項(xiàng)目，不論是gulp還是webpack，都有相應(yīng)的工具包。針對(duì)個(gè)別圖片，有時(shí)候也可以多帶帶拿出來(lái)處理，我個(gè)人經(jīng)常使用這個(gè)網(wǎng)站 tinypng.com/ 在線壓縮
編寫高效率的CSS：涉及到代碼層面的優(yōu)化比較多也比較細(xì)，不同水平的技術(shù)人員寫出來(lái)的肯定不一樣，這里不做進(jìn)一步的分析。但是為什么要把CSS拿出來(lái)說(shuō)一說(shuō)呢？因?yàn)楝F(xiàn)在項(xiàng)目里面基本上都在使用CSS預(yù)處理器，Less、SaaS、Stylus等等，這導(dǎo)致了某些初級(jí)前端的濫用：嵌套5、6層，甚者能達(dá)到7、8層，嚇?biāo)纻€(gè)人！嵌套這么深，影響瀏覽器查找選擇器的速度不說(shuō)，這也一定程度上產(chǎn)出了很多冗余的字節(jié)，這個(gè)要改、要提醒，一般建議嵌套3層即可。關(guān)于編寫高效率的CSS，推薦一篇文章，《Writing efficient CSS selectors》
服務(wù)端開(kāi)啟gzip壓縮：大招，最近剛知曉，真是太牛逼了，一般的css、js文件能壓縮60、70%，當(dāng)然，這個(gè)比率可以設(shè)定的。前后端分離，如果前端部署用node、express作服務(wù)器的話，使用中間件compression即可開(kāi)啟gzip壓縮：

// server.js
var express = require("express");
var compress = require("compression");
var app = express();
app.use(compress());復(fù)制代碼
對(duì)于一般的SPA項(xiàng)目，如果node服務(wù)器的作用比較簡(jiǎn)單，比如只是做個(gè)接口轉(zhuǎn)發(fā)之類的，很多人更傾向用Nginx作服務(wù)器，Nginx在轉(zhuǎn)發(fā)接口、壓縮、緩存等功能上更勝一籌。不過(guò)，大部分前端對(duì)Nginx應(yīng)該陌生一些，為了實(shí)踐技術(shù)，用熟悉的node即可，真正的項(xiàng)目部署，有專業(yè)的實(shí)施人員來(lái)搞

使用緩存