一、布局
1、固定布局
固定布局是指隨著瀏覽器的寬度變大變小，頁面的整體布局不會(huì)發(fā)生改變。如果瀏覽器寬度小于頁面寬度，就會(huì)出現(xiàn)滾動(dòng)條。如下圖：
2、彈性布局
彈性布局是指頁面寬度是不固定的，頁面寬度隨著瀏覽器的大小而變大變小。但是它不會(huì)去自動(dòng)調(diào)整里面元素的擺放位置。所以如果是一個(gè)PC端網(wǎng)頁，如果在移動(dòng)端看，可能會(huì)變得非常小，體驗(yàn)也不夠好。
3、響應(yīng)式布局
響應(yīng)式布局是頁面布局可以響應(yīng)不同屏幕尺寸的設(shè)計(jì)方法。同一個(gè)網(wǎng)頁，有可能在PC端瀏覽，也可能在4寸的安卓機(jī)上瀏覽，或者在27寸的iMac上瀏覽，在不同的尺寸下面，響應(yīng)式可以自適應(yīng)的改變布局，提供良好的體驗(yàn)。如下圖，瀏覽器尺寸由大變小，頁面自適應(yīng)的過程：
那么響應(yīng)式布局有什么優(yōu)勢(shì)呢?
1)PC端和移動(dòng)端共用一套網(wǎng)頁，降低維護(hù)成本。
2)SEO優(yōu)化，搜索引擎更愿意接收適配移動(dòng)端和PC端的網(wǎng)頁。
二、識(shí)別html原生控件
拿到一個(gè)網(wǎng)頁，它可能有下拉框、搜索框、按鈕、彈出框等元素。怎樣識(shí)別它是原生的，還是后期程序員寫出來的呢?
下面我們來看web前端的原生控件都有哪些：
1、單行文本輸入框
2、單行密碼輸入框
3、只能輸入數(shù)字的單行輸入框
4、文件上傳輸入框
5、多行文本輸入框
6、單選按鈕
7、多選按鈕
8、下拉列表
注意：下拉列表在PC端和移動(dòng)端顯示出來的效果是不一樣的。上面的圖是在PC端的表現(xiàn)，移動(dòng)端上，安卓和iOS上面的表現(xiàn)也不一樣。
安卓：
iOS：
9、可點(diǎn)擊按鈕
10、日期選擇器
注意：日期選擇器不僅有選擇 年/月/日，還有 年/月，星期，時(shí)/分。
11、數(shù)字滑動(dòng)條
注意：中間的滑塊，可以用鼠標(biāo)自由拖動(dòng)，拖動(dòng)的數(shù)字范圍，可以自由設(shè)置。
12、視頻播放
注意：只要你有視頻資源，在這個(gè)控件里寫上資源地址，就可以播放啦~
13、音頻播放
注意：這里也一樣，只要有音頻資源，放上地址就可以播放，這個(gè)控件還有控制音量大小，靜音，下載音頻的功能。
暫時(shí)想到這些啦，歡迎補(bǔ)充~
三、看性能
從前端能看到的性能大概有以下：
1、資源的懶加載
比如說一個(gè)H5頁面有一張很長的背景圖，我們一般是這樣做的，會(huì)把背景圖分割成n份，然后把它們拼接起來。
在手機(jī)屏幕視野內(nèi)的，會(huì)優(yōu)先加載出來，不在視野范圍內(nèi)的，就不加載。
但是當(dāng)你往上拉的時(shí)候，下一張圖片就會(huì)加載。當(dāng)你看到往上拉，圖片才慢慢加載出來的時(shí)候，一般是用了懶加載技術(shù)。這樣做可以節(jié)省流量，加快加載速度，提高性能。
2、分頁加載
像淘寶這樣很多商品列表的頁面，用分頁加載是必不可少的，當(dāng)你往上拉頁面的時(shí)候，就會(huì)去加載下一頁的商品數(shù)據(jù)了。一般都會(huì)有加載中這樣的提示語，這樣做同樣也是為了減少請(qǐng)求，節(jié)省流量。
3、應(yīng)用緩存
有沒有發(fā)現(xiàn)，有些H5頁面，點(diǎn)擊第一次的時(shí)候，加載的有點(diǎn)慢，但是點(diǎn)第二次的時(shí)候，速度非?？欤鞘且?yàn)閼?yīng)用了本地的緩存的緣故。
4、單頁面應(yīng)用
單頁面應(yīng)用是什么意思呢?比如說，一個(gè)注冊(cè)頁面，從注冊(cè)信息頁，發(fā)短信驗(yàn)證碼，到注冊(cè)成功頁，這3個(gè)頁面是同一個(gè)html文件。當(dāng)你只看到注冊(cè)頁面的時(shí)候，是因?yàn)樗寻l(fā)短信和成功頁隱藏掉了。
利用單頁面技術(shù)，可以減少文件的個(gè)數(shù)，減少請(qǐng)求，提高性能，缺點(diǎn)就是SEO。因?yàn)橐粋€(gè)html里面，有關(guān)于SEO優(yōu)化的字段，如果減少了html文件，那就少了那幾個(gè)seo優(yōu)化字段了。
那么問題來了，怎樣看出，這個(gè)H5頁面是否用了單頁面技術(shù)呢?一般來說，同一個(gè)頁面之間的跳轉(zhuǎn)，可以設(shè)置很多換場(chǎng)的動(dòng)畫，比如說從左往右滑，從上往下滑，但是多頁面之間的跳轉(zhuǎn)動(dòng)畫是實(shí)現(xiàn)不了的，所以可以從頁面之間的換場(chǎng)來識(shí)別。
后面會(huì)繼續(xù)講系列文章~有錯(cuò)誤歡迎指出~
文/lemon_shan
更多關(guān)于云服務(wù)器，域名注冊(cè)，虛擬主機(jī)的問題，請(qǐng)?jiān)L問西部數(shù)碼官網(wǎng)：www.ps-sw.cn
