欢乐颂小说结局是什么,风凌天下

優(yōu)化小技巧，讓加載更快

發(fā)布者：君點(diǎn)科技時(shí)間：2019-05-22 16:45:57

當(dāng)你打開網(wǎng)站時(shí)，等待其加載內(nèi)容的時(shí)間，近半數(shù)人最多等3秒，如果網(wǎng)站不能在3秒內(nèi)加載完內(nèi)容，許多人會失去耐心甚至選擇離開，對任何行業(yè)來說，這都意味著損失大量業(yè)務(wù)和體驗(yàn)。

據(jù)統(tǒng)計(jì)，圖片內(nèi)容已經(jīng)占到了互聯(lián)網(wǎng)內(nèi)容總量的62%，也就是說超過一半的流量和時(shí)間都用來下載圖片。從性能優(yōu)化的角度看，圖片也絕對是優(yōu)化的熱點(diǎn)和重點(diǎn)之一

何為性能優(yōu)化

性能優(yōu)化（Optimize），簡而言之，就是在不影響系統(tǒng)運(yùn)行正確性的前提下，使之運(yùn)行地更快，完成特定功能所需的時(shí)間更短。

性能優(yōu)化的目的

對Web端產(chǎn)品來說：

從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)更及時(shí)，能夠給用戶提供更為良好的體驗(yàn)；
從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求提升服務(wù)器性能、減小流量，能夠節(jié)省可觀的成本。

總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)多的資源。

1. 圖片

1：了解圖片格式；2：盡量減少圖片數(shù)量；3：圖片大小的優(yōu)化

2. iconfont

iconfont，矢量圖標(biāo)庫，把圖標(biāo)處理成字體來顯示在屏幕上，同樣瀏覽器也會將其視為字體進(jìn)行抗鋸齒處理，有時(shí)效果并沒有想象中的那么清晰銳利（相對于純圖片效果還是相當(dāng)可人的）。iconfont，作為字體，其位置和大小也會受 css屬性的影響，同時(shí)為了得到最大范圍的瀏覽器支持，需要生成 TTF、WOFF、EOT、SVG 四種字體格式，這些問題阿里UX矢量庫就可以完成。

矢量圖標(biāo)庫除了對產(chǎn)品整體的性能提升外，對跨部門協(xié)作起到了資源與信息同步的作用，也可以作為項(xiàng)目資源備份，方便產(chǎn)品以后維護(hù)使用

矢量圖標(biāo)庫在「移動(dòng)端」的應(yīng)用，有多項(xiàng)超過位圖的高級特性，這些特性所帶來的好處會影響你的設(shè)計(jì)工作流，以及產(chǎn)品的最終品質(zhì)。移動(dòng)端的設(shè)計(jì)變的越來越復(fù)雜，原因在于多樣的屏幕尺寸與不同的分辨率。對于可縮放的自適應(yīng)設(shè)計(jì)來講，Icon fonts 是一種驚人的解決方案：

可縮放性（Scalability）：基于字體的 icon 是與分辨率無關(guān)并能縮放到任何想要程度的技術(shù)，而不需要考慮retina，HDPI，XHDPI等等屏幕，渲染時(shí)會根據(jù)目標(biāo)設(shè)備自動(dòng)調(diào)整。
尺寸（Size）：icon 使用 icon font 時(shí)，你不需要根據(jù)不同設(shè)備準(zhǔn)備不同的圖片，你的 APP 只需要在啟動(dòng)時(shí)加載一次 icon font 文件即可。
可維護(hù)性（Maintainability）：通過管理字體文件你可以很自然的組織你的 icon 集合，任意的進(jìn)行修改或擴(kuò)展，而你僅需要維護(hù)這個(gè)單一的字體文件。
靈活性（Flexibility）：操縱 icon fonts，改變顏色，大小，僅僅幾行代碼就可以在瞬間改變外觀。
可交互性（Interactivity）：由于靈活性以及能夠通過代碼方便的操縱，你能輕松的在不同狀態(tài)顯示對應(yīng)的不同效果，創(chuàng)建動(dòng)畫。
編輯 : 3年2班程遠(yuǎn)
作者 : 51UED
閱讀本文需 12 分鐘
數(shù)字性能管理平臺 Dynatrace 研究，當(dāng)你打開網(wǎng)站時(shí)，等待其加載內(nèi)容的時(shí)間，近半數(shù)人最多等3秒，如果網(wǎng)站不能在3秒內(nèi)加載完內(nèi)容，許多人會失去耐心甚至選擇離開，對任何行業(yè)來說，這都意味著損失大量業(yè)務(wù)和體驗(yàn)。

HTTP Archieve 統(tǒng)計(jì)，圖片內(nèi)容已經(jīng)占到了互聯(lián)網(wǎng)內(nèi)容總量的62%，也就是說超過一半的流量和時(shí)間都用來下載圖片。從性能優(yōu)化的角度看，圖片也絕對是優(yōu)化的熱點(diǎn)和重點(diǎn)之一，Google PageSpeed 或者 Yahoo 的14條性能優(yōu)化規(guī)則無不把圖片優(yōu)化作為重要的優(yōu)化手段。

我們負(fù)責(zé)的產(chǎn)品，大部分面向的是 Web端企業(yè)級用戶，由于行業(yè)的原因，我們實(shí)際用戶的電腦和網(wǎng)絡(luò)環(huán)境，遠(yuǎn)沒有大數(shù)據(jù)統(tǒng)計(jì)中電腦設(shè)備的良好性能，而且大多數(shù)企業(yè)電腦設(shè)備更新?lián)Q代周期長，致使大多員工用的電腦老舊性能差，為了讓產(chǎn)品運(yùn)行使用流暢，產(chǎn)品自身性能的重要性不言而喻，作為產(chǎn)品設(shè)計(jì)師我們?nèi)绾卧诓挥绊懴到y(tǒng)運(yùn)行正確性的前提下，使之運(yùn)行更快，如何能兼得美麗與才華而又不失用戶體驗(yàn)？

文章目錄
何為性能優(yōu)化
性能優(yōu)化的目的
我們是如何進(jìn)行性能優(yōu)化的
何為性能優(yōu)化

性能優(yōu)化（Optimize），簡而言之，就是在不影響系統(tǒng)運(yùn)行正確性的前提下，使之運(yùn)行地更快，完成特定功能所需的時(shí)間更短。

性能優(yōu)化的目的

對Web端產(chǎn)品來說：
從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)更及時(shí)，能夠給用戶提供更為良好的體驗(yàn)；
從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求提升服務(wù)器性能、減小流量，能夠節(jié)省可觀的成本。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)多的資源。

我們是如何進(jìn)行性能優(yōu)化的

1. 圖片

了解圖片格式

圖片格式多種多樣，其自身的優(yōu)缺點(diǎn)決定了使用場景及環(huán)境，在什么情況下采用何種圖片格式，是我們進(jìn)行的第一步，首先從了解他們?nèi)胧帧?/p>
我們對常用的圖片格式做了簡單的對比總結(jié)：

盡量減少圖片數(shù)量

之前的 web 圖片調(diào)用方式是一張一張調(diào)用，這樣會增加服務(wù)器的請求次數(shù)，降低界面響應(yīng)速度，推薦使用下面兩種方法來優(yōu)化圖片：

CSS Sprites，是一種網(wǎng)頁圖片應(yīng)用處理方式，是把產(chǎn)品相關(guān)圖片整合到一張圖片文件中，這樣載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來，這是減少圖像請求的有效方法。通過 CSS 的 background-image和background-position 屬性來顯示圖片的不同部分，合并后的圖片會比單個(gè)分離的圖片總和要小，好處在于能夠在網(wǎng)頁加載圖片時(shí)減少對服務(wù)器的請求次數(shù)，降低服務(wù)器儲存和請求壓力，同時(shí)提高了頁面的加載速度。缺點(diǎn)是維護(hù)的時(shí)候比較復(fù)雜。

Opacity，設(shè)置 div元素的不透明級別，通過透明度的處理，且在不影響用戶體驗(yàn)和設(shè)計(jì)的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態(tài)，從而減少圖片的使用和網(wǎng)絡(luò)請求。

缺點(diǎn)是 IE8 及以下瀏覽器不支持此屬性。

圖片大小的優(yōu)化

目前正在使用的圖片優(yōu)化壓縮工具「智圖」→http://zhitu.isux.us/

騰訊的智圖工具推出不久，但實(shí)測效果很好，而且提供了 Gulp 的自動(dòng)化支持。提高用戶在線壓縮圖片，智能轉(zhuǎn)換圖片格式，在線生成 webP 格式圖片等功能，壓縮率穩(wěn)定在30%左右（處理帶半透明的 png圖片效果更佳）。

詳細(xì)的介紹和使用方法：《騰訊出品！方便好用的免費(fèi)圖片壓縮工具「智圖」（可導(dǎo)出WebP）》

ImageOptim（Mac）→https://imageoptim.com/

Mac 平臺下非常贊的圖片優(yōu)化工具，只需要把需要優(yōu)化的圖片拖拽進(jìn) ImageOptim，就能夠完成對圖片的優(yōu)化。設(shè)置選擇的也很豐富，目前支持 JPG 和 PNG 的優(yōu)化。這是我在寫文章時(shí)最常用到的工具，把網(wǎng)站用到的圖片拖進(jìn)去，優(yōu)化就完成了。

以微平臺首頁界面為例

如果使用圖片的方法，把所用圖片整合一張圖存儲為 png格式，并直接應(yīng)用。

將原圖（4.03MB），用「智圖」優(yōu)化壓縮并保持最高品質(zhì)，大小為40.4KB，壓縮了100倍，優(yōu)化效果明顯。

2. iconfont

iconfont，矢量圖標(biāo)庫，把圖標(biāo)處理成字體來顯示在屏幕上，同樣瀏覽器也會將其視為字體進(jìn)行抗鋸齒處理，有時(shí)效果并沒有想象中的那么清晰銳利（相對于純圖片效果還是相當(dāng)可人的）。iconfont，作為字體，其位置和大小也會受 css屬性的影響，同時(shí)為了得到最大范圍的瀏覽器支持，需要生成 TTF、WOFF、EOT、SVG 四種字體格式，這些問題阿里UX矢量庫就可以完成。

矢量圖標(biāo)庫除了對產(chǎn)品整體的性能提升外，對跨部門協(xié)作起到了資源與信息同步的作用，也可以作為項(xiàng)目資源備份，方便產(chǎn)品以后維護(hù)使用。

詳細(xì)使用方法：《重大更新！阿里媽媽矢量圖標(biāo)平臺iconfont+全新上線！》

如果是自己畫的 svg 想用 font 的類型引入到網(wǎng)頁中可用以下的方法。

首先在 Iconfont 阿里巴巴矢量圖標(biāo)庫上面將你需要的圖標(biāo)點(diǎn)擊購物車按鈕加入「暫存架」。

選擇完所有要用的圖標(biāo)后「存儲為項(xiàng)目」，給它命名。然后在「圖標(biāo)管理」-「圖標(biāo)應(yīng)用項(xiàng)目」中找到這個(gè)項(xiàng)目，獲取在線鏈接，把里面的代碼復(fù)制到 CSS 中。

在 HTML 中需要使用到圖標(biāo)時(shí)，使用 iconfont 類名。

<i></i>

里面寫上你想用的圖標(biāo)下面的 Unicode：

然后你可以通過控制 iconfont 類的屬性改變圖標(biāo)的樣式，比如：

.iconfont{

font-family:”iconfont”;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

padding-left:20px

}

就可以在頁面中引用和修改了。

矢量圖標(biāo)庫在「移動(dòng)端」的應(yīng)用，有多項(xiàng)超過位圖的高級特性，這些特性所帶來的好處會影響你的設(shè)計(jì)工作流，以及產(chǎn)品的最終品質(zhì)。移動(dòng)端的設(shè)計(jì)變的越來越復(fù)雜，原因在于多樣的屏幕尺寸與不同的分辨率。對于可縮放的自適應(yīng)設(shè)計(jì)來講，Icon fonts 是一種驚人的解決方案：
可縮放性（Scalability）：基于字體的 icon 是與分辨率無關(guān)并能縮放到任何想要程度的技術(shù)，而不需要考慮retina，HDPI，XHDPI等等屏幕，渲染時(shí)會根據(jù)目標(biāo)設(shè)備自動(dòng)調(diào)整。
尺寸（Size）：icon 使用 icon font 時(shí)，你不需要根據(jù)不同設(shè)備準(zhǔn)備不同的圖片，你的 APP 只需要在啟動(dòng)時(shí)加載一次 icon font 文件即可。
可維護(hù)性（Maintainability）：通過管理字體文件你可以很自然的組織你的 icon 集合，任意的進(jìn)行修改或擴(kuò)展，而你僅需要維護(hù)這個(gè)單一的字體文件。
靈活性（Flexibility）：操縱 icon fonts，改變顏色，大小，僅僅幾行代碼就可以在瞬間改變外觀。
可交互性（Interactivity）：由于靈活性以及能夠通過代碼方便的操縱，你能輕松的在不同狀態(tài)顯示對應(yīng)的不同效果，創(chuàng)建動(dòng)畫。
3. CSS

Web的諸多樣式其實(shí)都是可以用 CSS 來實(shí)現(xiàn)，例如：圓角、漸變、陰影、簡單的幾何圖形等等，代碼畢竟屬于文本模式，請求資源小，加載和渲染速度都是圖片不可比擬的，因?yàn)槊恳粋€(gè)圖片的加載都需要一個(gè) http 的請求，而瀏覽器同一時(shí)間對同一域名下的請求是有一定數(shù)量限制，超過限制數(shù)目的請求會被阻塞，從而延長用戶的感知時(shí)間，因此減少請求次數(shù)，也就提高了頁面的呈現(xiàn)速度。

另外通過 css 實(shí)現(xiàn)，在任何屏幕上都可以顯示出良好視覺的效果，無需多分辨率、多端適配。若軟件具有的自定義外觀的功能，css 的優(yōu)勢就更加的強(qiáng)大，屬性修改一下就可以了。在后期維護(hù)時(shí)需要修改，比修改圖片要方便容易。

產(chǎn)品實(shí)際案例應(yīng)用——CSS

圓角、漸變、陰影、線條、背景等等，都由 css 來實(shí)現(xiàn)，通過css，實(shí)現(xiàn)全兼容的良好視覺效果，自適應(yīng)多分辨率
產(chǎn)品應(yīng)用

產(chǎn)品使用 iconfont + css + 圖片優(yōu)化。
圖片：Logo用智圖壓縮優(yōu)化。
iconfont ：單色圖標(biāo)使用 iconfont。例：返回、消息、設(shè)置、下拉、各模塊圖標(biāo)、各文件類型的圖標(biāo)、搜索、新建文件夾、上傳、刪除、文本、文件夾、下載、編輯、check box等。
CSS ：CSS樣式。例：圓角、背景、有色彩的圖片、甘特圖表、圓角按鈕、背景、輸入框、表格、隔行差色、圓角按鈕、線條等。
在產(chǎn)品設(shè)計(jì)過程中，慎重選擇設(shè)計(jì)方式，減少因徑向漸變、不規(guī)則漸變引起的必須使用大圖片元素的方法，避免用戶因?yàn)殚L時(shí)間的等待加載而煩躁或選擇離開，從而影響產(chǎn)品整體體驗(yàn)。

作為產(chǎn)品體驗(yàn)設(shè)計(jì)師必須為用戶著想，需要自己去真正使用、去運(yùn)行你設(shè)計(jì)的產(chǎn)品，將「用戶體驗(yàn)」意識貫穿整個(gè)產(chǎn)品環(huán)節(jié)。