通過貼近業(yè)務(wù)和產(chǎn)品運(yùn)營團(tuán)隊(duì)深入的交流，有助于我們盡快融入一個(gè)不熟悉的領(lǐng)域，同時(shí)可以閱讀一些專業(yè)行業(yè)網(wǎng)站上關(guān)于進(jìn)口業(yè)務(wù)的文章，了解大盤的背景。在進(jìn)口業(yè)務(wù)中通過背景的挖掘，我們發(fā)現(xiàn)在商品和供應(yīng)鏈層面上，進(jìn)口有一些特有的特征與其他業(yè)務(wù)不同，差異的地方其實(shí)往往就是用戶的痛點(diǎn)和后面我們發(fā)力的機(jī)會(huì)點(diǎn)。
Part-time Clouds 是一款兼職信息平臺(tái)，你可以在此尋找合適的兼職工作。這款A(yù)pp使用起來十分簡單，不用登錄注冊即可直接可以進(jìn)入主頁，主頁展示了大量兼職信息，你可以根據(jù)需求收藏職位、查看詳情，或一鍵撥打聯(lián)系電話，其中還有詳細(xì)的職業(yè)分類頁面。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
1.vue的生命周期，主要的介紹官網(wǎng)（https://cn.vuejs.org/v2/api/）上都有。
主要說的是created和mounted。之前在寫項(xiàng)目的過程中，需要對DOM節(jié)點(diǎn)進(jìn)行操作（但是在vue里面盡量不要獲取節(jié)點(diǎn)進(jìn)行操作。vue主要是對數(shù)據(jù)進(jìn)行操作），在created里面這些操作并不能實(shí)現(xiàn)，但是在mounted里面是可以的。
主要原因就是：created是vm實(shí)例已經(jīng)創(chuàng)建但是未完成掛載，而mounted已經(jīng)部分完成掛載，這么說的原因是，mounted不承諾所有的子組件都會(huì)被掛載，如果你希望等到的是整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 替換掉mounted.
$nextTick是下次DOM更新循環(huán)結(jié)束之后執(zhí)行的回調(diào)函數(shù)。
2.vue里點(diǎn)擊按鈕，彈框的實(shí)現(xiàn)。
通過在父組件上綁定一個(gè)show，type為boolean，在子組件用props接收傳過來的show值，show值為true時(shí)彈出框顯示，false時(shí)不顯示。
父組件：
子組件：
3.v-show與v-if的區(qū)別？
v-if與v-show都屬于條件渲染，意思就是根據(jù)不同的條件使用不同的模板。
在vue中，v-show只是簡單的修改了樣式，DOM節(jié)點(diǎn)是真實(shí)存在的，只是隱藏了。
v-if是真實(shí)的條件渲染，值為false是不編譯不渲染，當(dāng)值為true時(shí)，才開始編譯。
每個(gè)人都應(yīng)該遵守一定的重要規(guī)則，特別是那些從事產(chǎn)品設(shè)計(jì)的人。而許多設(shè)計(jì)師卻日復(fù)一日地在設(shè)計(jì)中違反規(guī)則，而這是絕對不利于他們的設(shè)計(jì)的。在本文中，我將解釋什么是設(shè)計(jì)中的重要規(guī)則，以及它對產(chǎn)品和服務(wù)中意味著什么。我還將在組織管理、協(xié)作和總體性能方面提出這一現(xiàn)象存在的可能含義。在這篇文章中我所要討論的心理現(xiàn)象被稱為米勒法則。我不是要告訴你什么是米勒法則，而是要引導(dǎo)你如何參加測試，以獲得更具有沉浸性的學(xué)習(xí)效果。
移動(dòng)端的UI設(shè)計(jì)有其獨(dú)有的一套設(shè)計(jì)規(guī)則和約束。新技術(shù)的不斷加入促進(jìn)了移動(dòng)平臺(tái)的快速增長，而移動(dòng)端的UI設(shè)計(jì)也和傳統(tǒng)的平面海報(bào)/網(wǎng)頁設(shè)計(jì)不太一樣。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
下載地址：https://v3.bootcss.com/
1. 下載Bootstrap
進(jìn)入后下載這個(gè)標(biāo)題的Bootstrap
下載完成后，將所需的css,js復(fù)制到工程中即可
2. 拷貝官方的模塊文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 頁面添加組件
<button type="button" class="btn btn-primary">（首選項(xiàng)）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后將二者結(jié)合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的結(jié)果如下：
Left Middle Right
至此你就可以簡單的用前端框架做出美觀的界面了！
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
html 靜態(tài)頁面中引用外部頁面沒那么方便，主要方法有：
這個(gè)地方src="js/head.js"的路徑是你head.js文件的路徑
以后無論在哪個(gè)頁面，想調(diào)用該頭部文件，直接插入head.js文件即可
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
asp語言和PHP語言
使用框架來實(shí)現(xiàn)
使用.js腳本來實(shí)現(xiàn)
Behavior的download方式
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
今天寫css時(shí)發(fā)現(xiàn)，圖片加起來剛好是900px的三張圖片，不能在一個(gè)900px寬容器放下，因?yàn)閳D片之間有間隔，我猜是瀏覽器把兩個(gè)img標(biāo)簽之間的空格當(dāng)成了空白節(jié)點(diǎn)。
在網(wǎng)上找到了幾個(gè)不錯(cuò)的解決方法：
1.多個(gè)img標(biāo)簽寫在一行
效果前：
效果后：
2.在img標(biāo)簽的父級(jí)上寫：font-size:0;//這個(gè)在解決display：inline-block出現(xiàn)的問題也有幫助
效果：
3.使用display：block(img是內(nèi)聯(lián)元素)//要float一下才行
效果:
4.使用letter-spacing屬性
效果:
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<div style="font-size:0"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>
<div style="letter-spacing:-800px"><!--letter-spacing的值無論是負(fù)多少都不會(huì)產(chǎn)生重疊--> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>
摘要: 前端性能優(yōu)化是一個(gè)很寬泛的概念，本書前面的部分也多多少少提到一些前端優(yōu)化方法，這也是我們一直在關(guān)注的一件重要事情。配合各種方式、手段、輔助系統(tǒng)，前端優(yōu)化的最終目的都是提升用戶體驗(yàn)，改善頁面性能，我們常常竭盡全力進(jìn)行前端頁面優(yōu)化，但卻忽略了這樣做的效果和意義。先不急于探究前端優(yōu)化具體可以怎樣去做，先看看什么是前端性能，應(yīng)該怎樣去了解和評價(jià)前端頁面的性能。
相對于桌面端瀏覽器，移動(dòng)端Web瀏覽器上有一些較為明顯的特點(diǎn)：設(shè)備屏幕較小、新特性兼容性較好、支持一些較新的HTML5和CSS3特性、需要與Native應(yīng)用交互等。但移動(dòng)端瀏覽器可用的CPU計(jì)算資源和網(wǎng)絡(luò)資源極為有限，因此要做好移動(dòng)端Web上的優(yōu)化往往需要做更多的事情。
首先，在移動(dòng)端Web的前端頁面渲染中，桌面瀏覽器端上的優(yōu)化規(guī)則同樣適用，此外針對移動(dòng)端也要做一些的優(yōu)化來達(dá)到更好的效果。需要注意的是，并不是移動(dòng)端的優(yōu)化原則在桌面瀏覽器端就不適用，而是由于兼容性和差異性的原因，一些優(yōu)化原則在移動(dòng)端更具代表性。
1．首屏數(shù)據(jù)請求提前，避免JavaScript文件加載后才請求數(shù)據(jù)
為了進(jìn)一步提升頁面加載速度，可以考慮將頁面的數(shù)據(jù)請求盡可能提前，避免在JavaScript加載完成后才去請求數(shù)據(jù)。通常數(shù)據(jù)請求是頁面內(nèi)容渲染中關(guān)鍵路徑最長的部分，而且不能并行，所以如果能將數(shù)據(jù)請求提前，可以極大程度上縮短頁面內(nèi)容的渲染完成時(shí)間。
2．首屏加載和按需加載，非首屏內(nèi)容滾屏加載，保證首屏內(nèi)容最小化
由于移動(dòng)端網(wǎng)絡(luò)速度相對較慢，網(wǎng)絡(luò)資源有限，因此為了盡快完成頁面內(nèi)容的加載，需要保證首屏加載資源最小化，非首屏內(nèi)容使用滾動(dòng)的方式異步加載。一般推薦移動(dòng)端頁面首屏數(shù)據(jù)展示延時(shí)最長不超過3秒。目前中國聯(lián)通3G的網(wǎng)絡(luò)速度為338KB/s（2.71Mb/s），所以推薦首屏所有資源大小不超過1014KB，即大約不超過1MB。
3．模塊化資源并行下載
在移動(dòng)端資源加載中，盡量保證JavaScript資源并行加載，主要指的是模塊化JavaScript資源的異步加載，例如AMD的異步模塊，使用并行的加載方式能夠縮短多個(gè)文件資源的加載時(shí)間。
4．inline首屏必備的CSS和JavaScript
通常為了在HTML加載完成時(shí)能使瀏覽器中有基本的樣式，需要將頁面渲染時(shí)必備的CSS和JavaScript通過<script>或<style>內(nèi)聯(lián)到頁面中，避免頁面HTML載入完成到頁面內(nèi)容展示這段過程中頁面出現(xiàn)空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樣例</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<style>
/* 必備的首屏CSS */
html, body{
margin: 0;
padding: 0;
background-color: #ccc;
}
</style>
</head>
<body>
</body>
5．meta dns prefetch設(shè)置DNS預(yù)解析
設(shè)置文件資源的DNS預(yù)解析，讓瀏覽器提前解析獲取靜態(tài)資源的主機(jī)IP，避免等到請求時(shí)才發(fā)起DNS解析請求。通常在移動(dòng)端HTML中可以采用如下方式完成。
<!-- cdn域名預(yù)解析 -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
6．資源預(yù)加載
對于移動(dòng)端首屏加載后可能會(huì)被使用的資源，需要在首屏完成加載后盡快進(jìn)行加載，保證在用戶需要瀏覽時(shí)已經(jīng)加載完成，這時(shí)候如果再去異步請求就顯得很慢。
7．合理利用MTU策略
通常情況下，我們認(rèn)為TCP網(wǎng)絡(luò)傳輸?shù)淖畲髠鬏攩卧∕aximum Transmission Unit，MTU）為1500B，即網(wǎng)絡(luò)一個(gè)RTT（Round-Trip Time，網(wǎng)絡(luò)請求往返時(shí)間）時(shí)間內(nèi)可以傳輸?shù)臄?shù)據(jù)量最大為1500字節(jié)。因此，在前后端分離的開發(fā)模式中，盡量保證頁面的HTML內(nèi)容在1KB以內(nèi)，這樣整個(gè)HTML的內(nèi)容請求就可以在一個(gè)RTT時(shí)間內(nèi)請求完成，最大限度地提高HTML載入速度。
1．合理利用瀏覽器緩存
除了上面說到的使用Cache-Control、Expires、Etag和Last-Modified來設(shè)置HTTP緩存外，在移動(dòng)端還可以使用localStorage等來保存AJAX返回的數(shù)據(jù)，或者使用localStorage保存CSS或JavaScript靜態(tài)資源內(nèi)容，實(shí)現(xiàn)移動(dòng)端的離線應(yīng)用，盡可能減少網(wǎng)絡(luò)請求，保證靜態(tài)資源內(nèi)容的快速加載。
2．靜態(tài)資源離線方案
對于移動(dòng)端或Hybrid應(yīng)用，可以設(shè)置離線文件或離線包機(jī)制讓靜態(tài)資源請求從本地讀取，加快資源載入速度，并實(shí)現(xiàn)離線更新。關(guān)于這塊內(nèi)容，我們會(huì)在后面的章節(jié)中重點(diǎn)講解。
3．嘗試使用AMP HTML
AMP HTML可以作為優(yōu)化前端頁面性能的一個(gè)解決方案，使用AMP Component中的元素來代替原始的頁面元素進(jìn)行直接渲染。
<!-- 不推薦 -->
<video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
<source type="video/mp4" src="foo.mp4">
<source type="video/webm" src="foo.webm">
</video>
<!-- 推薦 -->
<amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster= "path/poster.jpg">
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
<source type="video/mp4" src="foo.mp4">
<source type="video/webm" src="foo.webm">
</amp-video>
1．圖片壓縮處理
在移動(dòng)端，通常要保證頁面中一切用到的圖片都是經(jīng)過壓縮優(yōu)化處理的，而不是以原圖的形式直接使用的，因?yàn)槟菢雍芟牧髁?，而且加載時(shí)間更長。
2．使用較小的圖片，合理使用base64內(nèi)嵌圖片
在頁面使用的背景圖片不多且較小的情況下，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁面或CSS文件中，這樣可以減少頁面的HTTP請求數(shù)。需要注意的是，要保證圖片較小，一般圖片大小超過2KB就不推薦使用base64嵌入顯示了。
.class-name {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}
3．使用更高壓縮比格式的圖片
使用具有較高壓縮比格式的圖片，如webp等。在同等圖片畫質(zhì)的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節(jié)省網(wǎng)絡(luò)流量。
<img src="http://cdn.domain.com/path/photo.webp" alt="webp格式圖片">
4．圖片懶加載
為了保證頁面內(nèi)容的最小化，加速頁面的渲染，盡可能節(jié)省移動(dòng)端網(wǎng)絡(luò)流量，頁面中的圖片資源推薦使用懶加載實(shí)現(xiàn)，在頁面滾動(dòng)時(shí)動(dòng)態(tài)載入圖片。
<img data-src="http://cdn.domain.com/path/photo.jpg" alt="懶加載圖片">
5．使用Media Query或srcset根據(jù)不同屏幕加載不同大小圖片
在介紹響應(yīng)式的章節(jié)中我們了解到，針對不同的移動(dòng)端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗(yàn)不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機(jī)型的圖片加載速度，這在移動(dòng)端非常值得推薦。
6．使用iconfont代替圖片圖標(biāo)
在頁面中盡可能使用iconfont來代替圖片圖標(biāo)，這樣做的好處有以下幾個(gè)：使用iconfont體積較小，而且是矢量圖，因此縮放時(shí)不會(huì)失真；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色。但是需要注意的是，iconfont引用不同webfont格式時(shí)的兼容性寫法，根據(jù)經(jīng)驗(yàn)推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上。
@font-face {
font-family: iconfont;
src: url("./iconfont.eot");
src: url("./iconfont.eot?#iefix") format("eot"),
url("./iconfont.woff") format("woff"),
url("./iconfont.ttf") format("truetype");
}
7．定義圖片大小限制
加載的單張圖片一般建議不超過30KB，避免大圖片加載時(shí)間長而阻塞頁面其他資源的下載，因此推薦在10KB以內(nèi)。如果用戶上傳的圖片過大，建議設(shè)置告警系統(tǒng)，幫助我們觀察了解整個(gè)網(wǎng)站的圖片流量情況，做出進(jìn)一步的改善。
1．盡量使用id選擇器
選擇頁面DOM元素時(shí)盡量使用id選擇器，因?yàn)閕d選擇器速度最快。
2．合理緩存DOM對象
對于需要重復(fù)使用的DOM對象，要優(yōu)先設(shè)置緩存變量，避免每次使用時(shí)都要從整個(gè)DOM樹中重新查找。
// 不推薦
$('#mod .active').remove('active');
$('#mod .not-active').addClass('active');
// 推薦
let $mod = $('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');
3．頁面元素盡量使用事件代理，避免直接事件綁定
使用事件代理可以避免對每個(gè)元素都進(jìn)行綁定，并且可以避免出現(xiàn)內(nèi)存泄露及需要?jiǎng)討B(tài)添加元素的事件綁定問題，所以盡量不要直接使用事件綁定。
// 不推薦
$('.btn').on('click', function(e){
console.log(this);
});
// 推薦
$('body').on('click', '.btn', function(e){
console.log(this);
});
4．使用touchstart代替click
由于移動(dòng)端屏幕的設(shè)計(jì)，touchstart事件和click事件觸發(fā)時(shí)間之間存在300毫秒的延時(shí)，所以在頁面中沒有實(shí)現(xiàn)touchmove滾動(dòng)處理的情況下，可以使用touchstart事件來代替元素的click事件，加快頁面點(diǎn)擊的響應(yīng)速度，提高用戶體驗(yàn)。但同時(shí)我們也要注意頁面重疊元素touch動(dòng)作的點(diǎn)擊穿透問題。
// 不推薦
$('body').on('click', '.btn', function(e){
console.log(this);
});
// 推薦
$('body').on('touchstart', '.btn', function(e){
console.log(this);
});
5．避免touchmove、scroll連續(xù)事件處理
需要對touchmove、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流，例如設(shè)置每隔16ms（60幀的幀間隔為16.7ms，因此可以合理地設(shè)置為16ms）才進(jìn)行一次事件處理，避免頻繁的事件調(diào)用導(dǎo)致移動(dòng)端頁面卡頓。
// 不推薦
$('.scroller').on('touchmove', '.btn', function(e){
console.log(this);
});
// 推薦
$('.scroller').on('touchmove', '.btn', function(e){
let self = this;
setTimeout(function(){
console.log(self);
}, 16);
});
6．避免使用eval、with，使用join代替連接符+，推薦使用ECMAScript 6的字符串模板
這些都是一些基礎(chǔ)的安全腳本編寫問題，盡可能使用較率的特性來完成這些操作，避免不規(guī)范或不安全的寫法。
7．盡量使用ECMAScript 6+的特性來編程
ECMAScript 6+一定程度上更加安全，而且部分特性執(zhí)行速度更快，也是未來規(guī)范的需要，所以推薦使用ECMAScript 6+的新特性來完成后面的開發(fā)。
1．使用Viewport固定屏幕渲染，可以加速頁面渲染內(nèi)容
一般認(rèn)為，在移動(dòng)端設(shè)置Viewport可以加速頁面的渲染，同時(shí)可以避免縮放導(dǎo)致頁面重排重繪。在移動(dòng)端固定Viewport設(shè)置的方法如下。
<!-- 設(shè)置viewport不縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2．避免各種形式重排重繪
頁面的重排重繪很耗性能，所以一定要盡可能減少頁面的重排重繪，例如頁面圖片大小變化、元素位置變化等這些情況都會(huì)導(dǎo)致重排重繪。
3．使用CSS3動(dòng)畫，開啟GPU加速
使用CSS3動(dòng)畫時(shí)可以設(shè)置transform: translateZ(0)來開啟移動(dòng)設(shè)備瀏覽器的GPU圖形處理加速，讓動(dòng)畫過程更加流暢。
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
4．合理使用Canvas和requestAnimationFrame
選擇Canvas或requestAnimationFrame等更的動(dòng)畫實(shí)現(xiàn)方式，盡量避免使用setTimeout、setInterval等方式來直接處理連續(xù)動(dòng)畫。
5．SVG代替圖片
部分情況下可以考慮使用SVG代替圖片實(shí)現(xiàn)動(dòng)畫，因?yàn)槭褂肧VG格式內(nèi)容更小，而且SVG DOM結(jié)構(gòu)方便調(diào)整。
6．不濫用float
在DOM渲染樹生成后的布局渲染階段，使用float的元素布局計(jì)算比較耗性能，所以盡量減少float的使用，推薦使用固定布局或flex-box彈性布局的方式來實(shí)現(xiàn)頁面元素布局。
7．不濫用web字體或過多font-size聲明
過多的font-size聲明會(huì)增加字體的大小計(jì)算，而且也沒有必要的。
1．嘗試使用SPDY和HTTP 2
在條件允許的情況下可以考慮使用SPDY協(xié)議來進(jìn)行文件資源傳輸，利用連接復(fù)用加快傳輸過程，縮短資源加載時(shí)間。HTTP 2在未來也是可以考慮嘗試的。
2．使用后端數(shù)據(jù)渲染
使用后端數(shù)據(jù)渲染的方式可以加快頁面內(nèi)容的渲染展示，避免空白頁面的出現(xiàn)，同時(shí)可以解決移動(dòng)端頁面SEO的問題。如果條件允許，后端數(shù)據(jù)渲染是一個(gè)很不錯(cuò)的實(shí)踐思路。后面的章節(jié)會(huì)詳細(xì)介紹后端數(shù)據(jù)渲染的相關(guān)內(nèi)容。
3．使用Native View代替DOM的性能劣勢
可以嘗試使用Native View的MNV開發(fā)模式來避免HTML DOM性能慢的問題，目前使用MNV的開發(fā)模式已經(jīng)可以將頁面內(nèi)容渲染體驗(yàn)做到接近客戶端Native應(yīng)用的體驗(yàn)了。
關(guān)于頁面優(yōu)化的常用技術(shù)手段和思路主要包括以上這些，盡管列舉出很多，但仍可能有少數(shù)遺漏，可見前端性能優(yōu)化不是一件簡簡單單的事情，其涉及的內(nèi)容很多。大家可以根據(jù)實(shí)際情況將這些方法應(yīng)用到自己的項(xiàng)目當(dāng)中，要想全部做到幾乎是不可能的，但做到用戶可接受的原則還是很容易實(shí)現(xiàn)的。
于此同時(shí)我們要清楚的是，在我們做到了優(yōu)化的同時(shí)也付出了很大的代價(jià)，這也是前端優(yōu)化的一個(gè)問題。理論上這些優(yōu)化都是可以實(shí)現(xiàn)的，但是作為工程師我們也要明白懂得權(quán)衡。優(yōu)化提升了用戶體驗(yàn)，使數(shù)據(jù)加載更快，但是項(xiàng)目代碼卻可能打亂，異步內(nèi)容要拆分出來，首屏的一個(gè)雪碧圖可能要分成兩個(gè)，頁面項(xiàng)目代碼維護(hù)成本成倍增加，項(xiàng)目結(jié)構(gòu)也可能變得混亂。
所以前期在設(shè)計(jì)構(gòu)建、組件的解決方案時(shí)要解決好異步的自動(dòng)處理問題。任何一部分優(yōu)化都可以做得很深入，但不一定都值得，在優(yōu)化的同時(shí)也要盡量考慮性價(jià)比，這才是我們作為一名前端工程師處理前端優(yōu)化時(shí)應(yīng)該具有的正確思維。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
17年一月9號(hào)，小程序剛發(fā)布的時(shí)候，個(gè)人很幸運(yùn)的成為第一批吃螃蟹的人，當(dāng)然也是第一批采坑的人。
小程序是基于微信的一種應(yīng)用，使用微信自定義的組件，讓我們使用JavaScript的方式，達(dá)到匹配原生應(yīng)用的效果。小程序的一大優(yōu)勢就是，你只要有個(gè)微信，你就能搜索你所需要的點(diǎn)餐、買票、旅游等一些日常需求的小程序，而且——用完即毀、無需下載。
小程序是最適合前端開發(fā)人員，你所需的知識(shí)僅僅是JavaScript、css、html的基本知識(shí)，如果你有其他單頁面應(yīng)用的開發(fā)經(jīng)驗(yàn)，那小程序會(huì)很快上手，但是這都不是必須的。
app.js 小程序的啟動(dòng)js文件。
app.json 小程序的全局json配置文件。同時(shí)也可以進(jìn)行pages配置、底部tab切換的配置等等。
app.wxss 小程序的全局樣式。
pages 小程序的相關(guān)頁面。在app.json中配置了pages，pages文件夾就會(huì)自動(dòng)出現(xiàn)對應(yīng)的頁面。
js 是小程序的邏輯部分。
1、push路由
2、替換路由
3、路由回退
4、tab切換
5、路由清理替換
wx.navigateTo({
//index.js
Toast分三種：sucess、loading、none；
onLoad——初始化加載一次
生命周期函數(shù)的本質(zhì)：給開發(fā)人員一個(gè)觸發(fā)時(shí)機(jī)的暴露的接口。在這樣的時(shí)機(jī)下，我們可以做什么？
vue中：this.message = ‘hello world’;
使用onShareAppMessage函數(shù)可以實(shí)現(xiàn)分享轉(zhuǎn)發(fā)功能。
小程序的登錄是一個(gè)項(xiàng)目的核心邏輯。分為三步。
第一步：wx.login，獲取code。
小程序介紹
小程序開發(fā)所需要的技能
小程序的知識(shí)體系的梳理
項(xiàng)目整體架構(gòu)
pages
wxss 小程序的對應(yīng)page的布局，也就是局部樣式。相當(dāng)于web網(wǎng)頁的css。
wxml 頁面布局。相當(dāng)于web網(wǎng)頁的html。
json 小程序的局部頁面配置。
小程序路由
wx.navigateTo({
url:’/pages/index/index’
});
wx.redirectTo({
url:”/pages/index/index”
});
wx.navigateBack({
delta: 1
});
wx.switchTab({
url:’相關(guān)頁面路徑’
});
wx.reLaunch({
url:’新的頁面路徑’
});
小程序路由傳參
url: “/pages/index/index?id=”+inputValue
});
就會(huì)把inputValue的值傳遞過去。在相應(yīng)的界面的onLoad周期函數(shù)的options中接收。
onLoad: function(options){
console.log(options.id);
}
小程序界面交互（Toast、Modal）
Modal：title、content屬性是必須要的。
modal還有一些其他的屬性，比如確認(rèn)按鈕的顯示。
小程序page的生命周期
onReady——頁面初次渲染完成
onShow——監(jiān)聽頁面顯示
onHide——監(jiān)聽頁面隱藏
onUnload——監(jiān)聽頁面卸載
小程序如何更改data
小程序中：
this.setData({
message: ‘hello world’
})
小程序分享功能
onShareAppMessage: function(){
return {
title:’圖吧同行’,
path:’/pages/index/index’,
desc:’描述信息’
}
}
登錄功能
第二步：把code發(fā)送給我們的后臺(tái)服務(wù)器，得到openId。
第三步：服務(wù)器把openId返回給你。你就知道每次是哪一個(gè)用戶登錄了小程序。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com