PostCSS-css必備

ostcss越來越重要了，經(jīng)常可以看到它的身影，比如面試，論壇。本篇文章是小編參考多方資料以及官網(wǎng)總結(jié)出來的，不喜勿噴，喜歡多多支持，謝謝！
另外 React Redux ES6 Webpack...... 更多干貨在個(gè)人主頁中查看

什么是postcss

postcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動(dòng)補(bǔ)全瀏覽器前綴

3 . 自動(dòng)把px代為轉(zhuǎn)換成rem（rem不熟悉的，點(diǎn)這）

4 . css 代碼壓縮等等

postcss 只是一個(gè)工具，本身不會(huì)對css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer 就是其一。

與 less sass 的區(qū)別

less sass 是預(yù)處理器，用來支持?jǐn)U充css語法。

postcss 既不是預(yù)處理器也不是后處理器，其功能比較廣泛，而且重要的一點(diǎn)是，postcss可以和less/sass結(jié)合使用

關(guān)于取舍

雖然可以結(jié)合less/sass使用，但是它們還是有很多重復(fù)功能，用其中一個(gè)基本就 ok 了。

以下是個(gè)人的總結(jié)：

postcss 鼓勵(lì)開發(fā)者使用規(guī)范的CSS原生語法編寫源代碼，支持未來的css語法，就像babel支持ES6。
less、sass 擴(kuò)展了原生的東西，它把css作為一個(gè)子集，但這不好保持向后兼容。

總體來說區(qū)別不大，看個(gè)人喜好吧

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

npm install postcss-loader –save-dev

2 . webpack配置

一般與其他loader配合使用，下面*標(biāo)部分才是postcss用到的

配合時(shí)注意loader的順序（從下面開始加載）

3 . postcss配置

項(xiàng)目根目錄新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前綴補(bǔ)全，全自動(dòng)的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個(gè)版本的css語法【關(guān)于語法另一篇文章會(huì)單獨(dú)講】

安裝：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px轉(zhuǎn)換成rem

安裝：

cnpm install postcss-pxtorem --save-dev

配置項(xiàng)：

特殊技巧:不轉(zhuǎn)換成rem

px檢測區(qū)分大小寫，也就是說Px/PX/pX不會(huì)被轉(zhuǎn)換，可以用這個(gè)方式避免轉(zhuǎn)換成rem

下篇：cssnext，下一代css

【關(guān)注一下不迷路】

html css html css javascript html javascript css javascript css

比于早些年前后端代碼緊密耦合、后端工程師還得寫前端代碼的時(shí)代，如今已發(fā)展到前后端分離，這種開發(fā)方式大大提升了前后端項(xiàng)目的可維護(hù)性與開發(fā)效率，讓前后端工程師關(guān)注于自己的主業(yè)。然而在帶來便利的同時(shí)，也帶來了一些弊端，比如首屏渲染時(shí)間(FCP)因?yàn)槭灼列枰埱蟾鄡?nèi)容，比原來多了更多HTTP的往返時(shí)間(RTT)，這造成了白屏，如果白屏?xí)r間過長，用戶體驗(yàn)會(huì)大打折扣，如果用戶網(wǎng)速差，則FCP會(huì)更長。

1. FCP優(yōu)化

在 Google 提出的以用戶為中心的四個(gè)頁面性能衡量指標(biāo)中，F(xiàn)P/FCP可能是開發(fā)者們最熟悉的了

為了優(yōu)化首屏渲染時(shí)間這個(gè)指標(biāo)，減少白屏?xí)r間，前端仔們想了很多辦法：

加速或減少HTTP請求損耗：使用CDN加載公用庫，使用強(qiáng)緩存和協(xié)商緩存，使用域名收斂，小圖片使用Base64代替，使用Get請求代替Post請求，設(shè)置 Access-Control-Max-Age 減少預(yù)檢請求，頁面內(nèi)跳轉(zhuǎn)其他域名或請求其他域名的資源時(shí)使用瀏覽器prefetch預(yù)解析等；
延遲加載：非重要的庫、非首屏圖片延遲加載，SPA的組件懶加載等；
減少請求內(nèi)容的體積：開啟服務(wù)器Gzip壓縮，JS、CSS文件壓縮合并，減少cookies大小，SSR直接輸出渲染后的HTML等；
瀏覽器渲染原理：優(yōu)化關(guān)鍵渲染路徑，盡可能減少阻塞渲染的JS、CSS；
優(yōu)化用戶等待體驗(yàn)：白屏使用加載進(jìn)度條、菊花圖、骨架屏代替等；

這里要介紹的就是優(yōu)化用戶等待體驗(yàn)的骨架屏，它可以被視為是原來加載菊花圖的一種升級版，結(jié)合傳統(tǒng)的首屏優(yōu)化方法對應(yīng)用進(jìn)行優(yōu)化可以達(dá)到不錯(cuò)的效果。

2. 骨架屏

骨架屏可以理解為是當(dāng)數(shù)據(jù)還未加載進(jìn)來前，頁面的一個(gè)空白版本，一個(gè)簡單的關(guān)鍵渲染路徑。可以看一下下面Facebook的骨架屏實(shí)現(xiàn)，可以看到在頁面完全渲染完成之前，用戶會(huì)看到一個(gè)樣式簡單，描繪了當(dāng)前頁面的大致框架的骨架屏頁面，然后骨架屏中各個(gè)占位部分被實(shí)際資源完全替換，這個(gè)過程中用戶會(huì)覺得內(nèi)容正在逐漸加載即將呈現(xiàn)，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢。

可以看一下下面的示例圖，第一個(gè)為骨架屏，第二個(gè)為菊花圖，第三個(gè)為無優(yōu)化，可以看到相比于傳統(tǒng)的菊花圖會(huì)在感官上覺得內(nèi)容出現(xiàn)的流暢而不突兀，體驗(yàn)更加優(yōu)良。

如今這項(xiàng)技術(shù)已經(jīng)在Facebook、Google、支付寶、餓了么、簡書、新浪微博、知乎、美團(tuán)、領(lǐng)英等公司的產(chǎn)品中被廣泛的使用。在論壇和社區(qū)也都有不少文章討論骨架屏的實(shí)現(xiàn)和使用場景等。

3. 生成骨架屏的方法

生成骨架屏的方式主要有：

手寫HTML、CSS的方式為目標(biāo)頁定制骨架屏做法可以參考<Vue頁面骨架屏注入實(shí)踐>，主要思路就是使用 vue-server-renderer 這個(gè)本來用于服務(wù)端渲染的插件，用來把我們寫的.vue文件處理為HTML，插入到頁面模板的掛載點(diǎn)中，完成骨架屏的注入。這種方式不甚文明，如果頁面樣式改變了，還得改一遍骨架屏，增加了維護(hù)成本。骨架屏的樣式實(shí)現(xiàn)參考 CodePen
使用圖片作為骨架屏；簡單暴力，讓UI同學(xué)花點(diǎn)功夫吧哈哈；小米商城的移動(dòng)端頁面采用的就是這個(gè)方法，它是使用了一個(gè)Base64的圖片來作為骨架屏。
自動(dòng)生成并自動(dòng)插入靜態(tài)骨架屏這種方法跟第一種方法類似，不過是自動(dòng)生成骨架屏，可以關(guān)注下餓了么開源的插件 page-skeleton-webpack-plugin ，它根據(jù)項(xiàng)目中不同的路由頁面生成相應(yīng)的骨架屏頁面，并將骨架屏頁面通過 webpack 打包到對應(yīng)的靜態(tài)路由頁面中，不過要注意的是這個(gè)插件目前只支持history方式的路由，不支持hash方式，且目前只支持首頁的骨架屏，并沒有組件級的局部骨架屏實(shí)現(xiàn)，作者說以后會(huì)有計(jì)劃實(shí)現(xiàn)(issue9)。

另外還有個(gè)插件 vue-skeleton-webpack-plugin，它將插入骨架屏的方式由手動(dòng)改為自動(dòng)，原理在構(gòu)建時(shí)使用 Vue 預(yù)渲染功能，將骨架屏組件的渲染結(jié)果 HTML 片段插入 HTML 頁面模版的掛載點(diǎn)中，將樣式內(nèi)聯(lián)到 head 標(biāo)簽中。這個(gè)插件可以給單頁面的不同路由設(shè)置不同的骨架屏，也可以給多頁面設(shè)置，同時(shí)為了開發(fā)時(shí)調(diào)試方便，會(huì)將骨架屏作為路由寫入router中，可謂是相當(dāng)體貼了。

vue-skeleton-webpack-plugin的具體使用參考 vue-style-codebase，主要關(guān)注build目錄的幾個(gè)文件，線上Demo 在Chrome的DevTools中把network的網(wǎng)速調(diào)為Gast 3G / Slow 3G就能看到效果了~

鏈接文章：

https://juejin.im/post/5b79a2786fb9a01a18267362

聊聊圖片預(yù)加載：提升用戶體驗(yàn)與性能的秘密武器

**引言：**

在Web前端開發(fā)中，圖片資源的加載速度直接影響著用戶體驗(yàn)和頁面性能。尤其是在涉及到大量圖片展示的網(wǎng)站或應(yīng)用中，圖片預(yù)加載作為一種優(yōu)化手段顯得尤為重要。本文將詳細(xì)介紹圖片預(yù)加載的原理、應(yīng)用場景、實(shí)現(xiàn)方法以及相關(guān)注意事項(xiàng)，并通過具體的HTML+JS代碼實(shí)例，讓你深入了解如何運(yùn)用預(yù)加載技術(shù)改善用戶的瀏覽體驗(yàn)。

---

### **一、什么是圖片預(yù)加載？**

**標(biāo)題：未雨綢繆，提前加載的背后邏輯**

圖片預(yù)加載是指在用戶實(shí)際查看圖片之前，預(yù)先將圖片資源加載到瀏覽器緩存中。這樣當(dāng)用戶瀏覽到對應(yīng)位置時(shí)，圖片已經(jīng)處于可用狀態(tài)，從而避免了圖片加載導(dǎo)致的頁面空白或延遲現(xiàn)象，顯著提升了頁面的流暢性和整體性能。

---

### **二、圖片預(yù)加載的重要性**

**標(biāo)題：瞬間加載，用戶體驗(yàn)的飛躍**

1. **更快的視覺呈現(xiàn)**：預(yù)加載能夠確保圖片在用戶視線到達(dá)前就已經(jīng)準(zhǔn)備好，減少用戶等待圖片加載的時(shí)間，提供即視即所得的瀏覽體驗(yàn)。

2. **優(yōu)化頁面滾動(dòng)流暢性**：對于長頁面和圖片瀑布流等場景，預(yù)加載能夠消除滾屏?xí)r的圖片加載滯后問題，確保頁面滾動(dòng)過程平滑無阻。

3. **降低用戶跳出率**：快速加載的內(nèi)容能夠增加用戶留存，減少因等待時(shí)間過長而導(dǎo)致的用戶流失。

---

### **三、圖片預(yù)加載的實(shí)現(xiàn)方法**

**標(biāo)題：實(shí)戰(zhàn)演練，手把手教你實(shí)現(xiàn)預(yù)加載**

1. **HTML `<link rel="prefetch">` 方式**

```html

```

`rel="prefetch"` 屬性告訴瀏覽器在閑置時(shí)預(yù)先下載指定資源，適用于瀏覽器支持的情況下對將來可能訪問的資源進(jìn)行預(yù)加載。

2. **JavaScript 實(shí)現(xiàn)預(yù)加載**

```javascript

// 基礎(chǔ)圖片預(yù)加載函數(shù)

function preloadImages(urls) {

urls.forEach(function(url) {

var img=new Image();

img.src=url;

});

}

// 使用預(yù)加載函數(shù)

var imageUrls=['image1.jpg', 'image2.jpg'];

preloadImages(imageUrls);

```

上述JavaScript代碼中，我們通過創(chuàng)建新的`Image`對象并設(shè)置其`src`屬性為待加載圖片URL的方式實(shí)現(xiàn)預(yù)加載。當(dāng)瀏覽器解析到這一行代碼時(shí)，就會(huì)立即發(fā)送請求加載圖片資源。

3. **更進(jìn)階的預(yù)加載庫（如lozad.js）**

```html

<img

data-src="image.jpg"

class="lozad"

alt="Example Image"

```

Lozad.js是一個(gè)輕量級的懶加載庫，它能夠在圖片進(jìn)入可視區(qū)時(shí)才進(jìn)行加載，既實(shí)現(xiàn)了預(yù)加載的目的，又節(jié)省了帶寬和CPU資源。

---

### **四、圖片預(yù)加載的注意事項(xiàng)**

**標(biāo)題：謹(jǐn)慎而行，預(yù)加載的合理應(yīng)用**

1. **合理安排預(yù)加載數(shù)量**：過多的預(yù)加載可能導(dǎo)致帶寬占用過高，影響其他關(guān)鍵資源加載速度。

2. **判斷用戶網(wǎng)絡(luò)狀況**：在低速網(wǎng)絡(luò)環(huán)境下，避免無腦預(yù)加載，可采用動(dòng)態(tài)加載策略。

3. **隱私保護(hù)與資源優(yōu)化**：尊重用戶隱私，避免預(yù)加載無關(guān)緊要的資源，同時(shí)對圖片進(jìn)行壓縮和尺寸裁剪，減輕預(yù)加載負(fù)擔(dān)。

---

**結(jié)語：**

圖片預(yù)加載作為Web前端優(yōu)化的一項(xiàng)關(guān)鍵技術(shù)，巧妙運(yùn)用可以顯著提升用戶體驗(yàn)，降低用戶流失率。在實(shí)踐中，我們要根據(jù)具體項(xiàng)目需求和用戶場景，靈活選擇合適的預(yù)加載策略，做到既能加速頁面渲染，又能兼顧性能與資源優(yōu)化，達(dá)到提升網(wǎng)站整體表現(xiàn)的終極目標(biāo)。而不斷精進(jìn)和深化前端優(yōu)化技術(shù)，正是每一位前端開發(fā)者追求卓越的必由之路。

在線咨詢

上一篇：可愛的大白小黃人卡通PPT模板，萌神無敵，讓你一秒回
下一篇：CropperJs圖片裁剪案例及教程

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。