整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。
周末連續(xù)兩天給大家講了面向?qū)ο缶幊痰闹饕匦浴阜庋b」和「繼承」，如果你期待今天繼續(xù)講「多態(tài)」這個(gè)特性，可能你要失望了，今天并沒有「多態(tài)」，而是教你如何優(yōu)化網(wǎng)頁加載速度，我就是這么不按規(guī)矩出牌，哈哈。
周末在家宅著，刷了不少的網(wǎng)頁，發(fā)現(xiàn)很多網(wǎng)站都沒有優(yōu)化它的加載速度，有時(shí)打開一個(gè)網(wǎng)頁要等待10來秒才能加載完成，雖然網(wǎng)頁內(nèi)容很不錯(cuò)，但是給我的第一印象就是慢，不能忍啊！
其實(shí)有很多簡(jiǎn)單粗暴，又很有療效的優(yōu)化方法，我覺得有必要給各位產(chǎn)品經(jīng)理分享一下，好讓你們?nèi)ザ酱唛_發(fā)哥哥優(yōu)化，改善一下網(wǎng)頁的加載體驗(yàn)～
首先，我們來看下網(wǎng)頁的加載流程。打開一個(gè)網(wǎng)頁，會(huì)先拉取一個(gè)html頁面，然后瀏覽器解析了這個(gè)html頁面后，會(huì)根據(jù)頁面的內(nèi)容，去拉取javascript、css和圖片文件，最終根據(jù)這些文件，將頁面渲染出來。
我們可以看到，影響一個(gè)網(wǎng)頁展示速度的主要因素不是網(wǎng)頁本身，而是它依賴的一些其它文件。如果優(yōu)化了這些資源的加載速度，那么網(wǎng)頁展示的速度也就上去了。
有哪些簡(jiǎn)單粗暴的方法呢？讓我來一一列舉：
一個(gè)網(wǎng)頁中，圖片資源的大小占比是最多的，而且單個(gè)的文件的大小也很可觀。因此，在保證圖片質(zhì)量不變的情況下，盡可能的使用高壓縮率的圖片格式，圖片格式可以按照這個(gè)優(yōu)先級(jí)選擇webp > jpeg > png > bmp。同時(shí)也要根據(jù)圖片展示尺寸來拉取大小最為匹配的圖片資源，不要沒事就把原圖拉下來使用。以前我就遇到過這種情況，一個(gè)196*196大小區(qū)域展示的圖片，它的文件竟然達(dá)到了幾兆，最后才發(fā)現(xiàn)把1960*1960分辨率的原圖拉下來了。
大部分瀏覽器在發(fā)出請(qǐng)求時(shí)，會(huì)帶上這個(gè)標(biāo)記「Accept-Encoding: gzip, deflate」，表示這個(gè)瀏覽器可以接受以gzip壓縮方式傳輸數(shù)據(jù)，如果你的網(wǎng)頁服務(wù)器也支持gzip壓縮數(shù)據(jù)，那么數(shù)據(jù)以gzip方式傳輸時(shí)，會(huì)減少70～80%的流量。
同一個(gè)站點(diǎn)下面的不同頁面，往往都會(huì)復(fù)用一部分資源文件，如果把這些資源文件設(shè)置為可緩存的，那么在刷新或者跳轉(zhuǎn)到另一個(gè)頁面時(shí)，都無須再從網(wǎng)絡(luò)拉取相關(guān)資源，這樣就大大加快了網(wǎng)頁的加載速度。
有的網(wǎng)站對(duì)于不同的終端制作了不同的頁面，比如說在手機(jī)上訪問微博，會(huì)從weibo.com重定向至weibo.cn，每一次重定向都會(huì)導(dǎo)致瀏覽器重新發(fā)起請(qǐng)求，延長(zhǎng)加載時(shí)間。對(duì)于這種情況，應(yīng)該盡可能使用響應(yīng)式設(shè)計(jì)，一個(gè)weibo.com站點(diǎn)覆蓋至所有終端。
CDN是一種靜態(tài)內(nèi)容分發(fā)網(wǎng)絡(luò)，它在每個(gè)省，甚至每個(gè)城市都部署有自己的服務(wù)器，用于分發(fā)這些靜態(tài)內(nèi)容，那么當(dāng)某個(gè)城市的用戶要拉取某個(gè)資源時(shí)，他會(huì)首選從本地的CDN服務(wù)器上拉取，這樣可以保證他最快速的獲得該資源。據(jù)磚家統(tǒng)計(jì)，網(wǎng)絡(luò)資源中有70%的是靜態(tài)資源。這就意味著，有70%的內(nèi)容產(chǎn)生后是不會(huì)變化，那么將它們?nèi)糠旁贑DN上面，可以提升這70%的資源的下載速度。
很多人喜歡把不同的圖片掛在不同當(dāng)域名下，比如說圖片A掛在a.pm-teacher.com，圖片B掛在b.pm-teacher.com。當(dāng)一個(gè)網(wǎng)頁同時(shí)使用圖片A和圖片B時(shí)，瀏覽器需要查詢兩個(gè)域名，要知道，每次解析域名都是會(huì)浪費(fèi)時(shí)間的，所以盡可能的將全部圖片放在一個(gè)域名下。
這里說的壓縮和第2點(diǎn)并不重復(fù)，上面提到的壓縮是不改變文件內(nèi)容的壓縮。而css和js中有大量的空格和變量命名（如hello="hello word";），如果將這些空格去除，并用簡(jiǎn)單的字母來代換變量名（如a="hello word";），那么這些css和js原文件的大小也會(huì)縮小，這樣也對(duì)加快拉取速度是有幫助的。
不知道你有沒有看出來，上面提到的優(yōu)化方案的核心就3點(diǎn)：減少請(qǐng)求數(shù)、減少資源大小、找最快的服務(wù)器。如果你是一個(gè)網(wǎng)站的產(chǎn)品經(jīng)理，快去找你們的開發(fā)確認(rèn)是否有做過類似的優(yōu)化吧。
給產(chǎn)品經(jīng)理講技術(shù)，微信公眾號(hào)（pm_teacher），人人都是產(chǎn)品經(jīng)理專欄作家。資深程序猿，專注客戶端開發(fā)若干年，對(duì)前端、后臺(tái)技術(shù)略懂，熱衷于對(duì)新的科技領(lǐng)域的探索。
ello，各位小伙伴，今天廣州藍(lán)景跟大家分享前端技術(shù)干貨，頁面加載速度問題。
首先我們都討厭加載緩慢的頁面！
要知道加載時(shí)間每增加1秒（0-5秒之間），網(wǎng)站轉(zhuǎn)化率就會(huì)平均下降4.42%。頁面加載時(shí)間的前五秒對(duì)轉(zhuǎn)化率的影響最大。
幸運(yùn)的是，我們可以通過優(yōu)化HTML和CSS文件來提高網(wǎng)站的頁面加載速度，而無需花費(fèi)昂貴的服務(wù)器資源！
注：本文將僅關(guān)注如何使用HTML和CSS文件來提高頁面加載速度。
延遲加載
延遲加載是一種縮短關(guān)鍵渲染路徑長(zhǎng)度的策略，從而減少頁面加載時(shí)間。
a） 拆分CSS文件
盡量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上執(zhí)行。
<!-- 加載和解析整個(gè)sytles.css文件會(huì)阻塞主瀏覽器渲染 -->
<link rel="stylesheet" href="styles.css" />對(duì)于打印媒體，可以使用：
<!-- 加載和解析print.css時(shí)不會(huì)阻塞渲染，只會(huì)在打印模式加載該樣式 -->
<link rel="stylesheet" href="print.css" media="print" />對(duì)于移動(dòng)設(shè)備屏幕，可以使用：
<!-- 只會(huì)在移動(dòng)設(shè)備這樣的小屏幕下才會(huì)加載和解析該樣式 -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />對(duì)于平板電腦屏幕，可以使用：
<!-- 不會(huì)在大屏幕上加載和解析該樣式 -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" />對(duì)于移動(dòng)屏幕橫屏或豎屏，也可以使用不同的CSS文件：
<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />通過將CSS分離成多個(gè)文件，主文件（在本例中為styles.css）變得小多了，從而減少了渲染被阻塞的時(shí)間，大大提高了頁面加載速度。
b） CSS的font-display屬性
font-display屬性應(yīng)用于@font-face規(guī)則，定義瀏覽器如何加載和顯示字體文件，從而允許在字體加載或加載失敗時(shí)以回退字體顯示文本。這可以通過使文本可見取代空白屏幕來提高性能，但代價(jià)是閃爍無樣式的文本。
@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}c） HTML文件中的圖片懶加載
使用loading="lazy"，以便僅在需要時(shí)加載圖像。這將大大降低頁面加載速度。
<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />2. 選擇正確的圖片格式
.webp格式的圖片被推薦作為網(wǎng)絡(luò)的圖片格式標(biāo)準(zhǔn)。
WebP無損圖片在尺寸方面比PNG小26%。WebP有損圖片比同等SSIM質(zhì)量指數(shù)下的同類JPEG圖片小25-34%。動(dòng)畫WebP圖片支持有損、無損和透明，與GIF和APNG相比，可以提供更小的尺寸。
下圖是WebP與PNG圖片格式對(duì)比：
下圖是WebP與JPEG圖片格式對(duì)比：
所有這些測(cè)試都可以證明，即使是有損壓縮，webp圖片的壓縮率也更高，因此大大減少了頁面加載時(shí)間！
你還可以嘗試另一種圖片格式.avif，在少數(shù)情況下比.webp更好，但由于該格式比較新（2019年發(fā)布），因此還沒有多少瀏覽器支持.avif格式！
使用<picture>元素
a） 可用于針對(duì)不同的media條件裁剪或修改圖片（例如，在較小的顯示器上加載大圖片的縮略版本）。
b）在不支持webp格式的情況下提供替代圖片格式。
c）通過為查看器加載最合適的圖片來節(jié)省帶寬并加快頁面加載時(shí)間。
如果為高DPI顯示器提供更高分辨率的圖像版本，請(qǐng)改用<img>元素上的srcset。這允許瀏覽器在數(shù)據(jù)保存模式下選擇低分辨率版本，并且你不必編寫顯式media條件。
<picture>
<source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
<source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
<source srcset="my-logo-narrow.webp" type="image/webp" />
<img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>3. 渲染圖像
由于圖像是異步加載的，并在第一次繪制后繼續(xù)加載，如果在加載之前未定義其尺寸，則可能會(huì)導(dǎo)致重排到頁面內(nèi)容。例如，文本因加載圖像而被推下頁面。因此，設(shè)置width和高h(yuǎn)eight屬性至關(guān)重要，以便瀏覽器可以在布局中為它們保留空間。
對(duì)于任何background-image，設(shè)置background-color值很重要，以便在下載圖像之前，覆蓋的內(nèi)容保持可讀。
4. 壓縮HTML和CSS文件
壓縮指的是從代碼中刪除所有不必要的字符以減小尺寸。刪除的是不需要的空格字符，如空格、換行符、制表符等以及注釋。
使用壓縮工具，如CodeBeautify，CSS Minifier等來縮小HTML和CSS文件。有助于為網(wǎng)站提供更快的頁面加載速度。
在響應(yīng)式布局逐漸成為主流的今天，網(wǎng)頁或者app的流式布局已經(jīng)不算是一個(gè)新鮮的詞匯了。今天我要講的一個(gè)內(nèi)容也是跟頁面流式布局有關(guān)，如何讓你的網(wǎng)頁實(shí)現(xiàn)完美的縮放？
我們可以很快速的寫出一個(gè)響應(yīng)式布局的頁面，首先看一下效果圖。
網(wǎng)頁布局
其中html部分的代碼如下：
html部分代碼
css中的item代碼為：
css代碼
通過以上代碼，完成上述的流式布局后，在我們改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行縮放。
But，你以為這就是我們想要的結(jié)果嗎？
當(dāng)然不是！在改變?yōu)g覽器窗口大小時(shí)，我們發(fā)現(xiàn)雖然div的寬度是進(jìn)行了縮放，但是高度卻沒變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。
縮放后寬高比
從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結(jié)果。
我們需要達(dá)到的效果是在改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行等比例的縮放。
首先，可以使用Javascript代碼去實(shí)現(xiàn)，這是沒有問題的。但是綁定Javascript的onresize事件，在拖拽時(shí)可能會(huì)出卡頓現(xiàn)象，體驗(yàn)不是很好。
接下來我們通過CSS來實(shí)現(xiàn)以上的效果。
使用的核心屬性是我們平時(shí)并不太注意的padding-bottom。
padding-bottom有一個(gè)很容易讓人忽略的特性是，當(dāng)取值為百分比形式時(shí)，其百分比的基數(shù)是父元素的寬度，而不是高度。
因此我們可以在不用給父元素設(shè)置高度的時(shí)候，就可以通過padding-bottom屬性確定當(dāng)前元素的高度。我們的做法如下。
將元素的height屬性設(shè)為0，通過padding-bottom屬性確定元素高度。
設(shè)置合理的padding-bottom值，例如上述的例子中，在寬度為21%時(shí)，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%
修改后的CSS代碼如下。
修改后的CSS
修改后，我們?cè)俅握{(diào)整瀏覽器窗口的大小，就會(huì)發(fā)現(xiàn)div是等比例的進(jìn)行縮放，完美達(dá)到了我們的要求。
修改后等比例縮放
在這里，可能會(huì)有人有疑問如果設(shè)置overflow:hidden;那么里面的文字會(huì)不會(huì)因?yàn)槌^height，就會(huì)被隱藏了？
答案是不會(huì)的，根據(jù)CSS2.1的規(guī)范，overflow只會(huì)對(duì)處于padding外面的內(nèi)容生效，即只有超出了 padding區(qū)域的內(nèi)容才會(huì)被overflow屬性隱藏掉。而在設(shè)置padding-bottom后，實(shí)際已經(jīng)決定了元素的height屬性，因此overflow:hidden;不會(huì)生效。
今天這篇文章主要講解了利用CSS完成頁面等比例縮放的最簡(jiǎn)單方式，你學(xué)會(huì)了嗎？
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
