拿到一個網(wǎng)站，無論是PC端還是移動端，你知道它運用了哪些前端技術(shù)嗎?你知道它的性能是怎么樣嗎?你知道哪些是原生的控件嗎?接下來，我們就簡單講講怎樣從技術(shù)的角度看產(chǎn)品。

　　一、布局

　　1、固定布局

　　固定布局是指隨著瀏覽器的寬度變大變小，頁面的整體布局不會發(fā)生改變。如果瀏覽器寬度小于頁面寬度，就會出現(xiàn)滾動條。如下圖：

　　2、彈性布局

　　彈性布局是指頁面寬度是不固定的，頁面寬度隨著瀏覽器的大小而變大變小。但是它不會去自動調(diào)整里面元素的擺放位置。所以如果是一個PC端網(wǎng)頁，如果在移動端看，可能會變得非常小，體驗也不夠好。

　　3、響應式布局

　　響應式布局是頁面布局可以響應不同屏幕尺寸的設計方法。同一個網(wǎng)頁，有可能在PC端瀏覽，也可能在4寸的安卓機上瀏覽，或者在27寸的iMac上瀏覽，在不同的尺寸下面，響應式可以自適應的改變布局，提供良好的體驗。如下圖，瀏覽器尺寸由大變小，頁面自適應的過程：

　　那么響應式布局有什么優(yōu)勢呢?

　　1)PC端和移動端共用一套網(wǎng)頁，降低維護成本。

　　2)SEO優(yōu)化，搜索引擎更愿意接收適配移動端和PC端的網(wǎng)頁。

　　二、識別html原生控件

　　拿到一個網(wǎng)頁，它可能有下拉框、搜索框、按鈕、彈出框等元素。怎樣識別它是原生的，還是后期程序員寫出來的呢?

　　下面我們來看web前端的原生控件都有哪些：

　　1、單行文本輸入框 

　　2、單行密碼輸入框 

　　3、只能輸入數(shù)字的單行輸入框 

　　4、文件上傳輸入框　 

　　5、多行文本輸入框 

　　6、單選按鈕 

　　7、多選按鈕

　　8、下拉列表

　　注意：下拉列表在PC端和移動端顯示出來的效果是不一樣的。上面的圖是在PC端的表現(xiàn)，移動端上，安卓和iOS上面的表現(xiàn)也不一樣。

　　安卓： 

　　iOS： 

　　9、可點擊按鈕 

　　10、日期選擇器 

　　注意：日期選擇器不僅有選擇 年/月/日，還有 年/月，星期，時/分。

　　11、數(shù)字滑動條 

　　注意：中間的滑塊，可以用鼠標自由拖動，拖動的數(shù)字范圍，可以自由設置。

　　12、視頻播放 

　　注意：只要你有視頻資源，在這個控件里寫上資源地址，就可以播放啦~

　　13、音頻播放 

　　注意：這里也一樣，只要有音頻資源，放上地址就可以播放，這個控件還有控制音量大小，靜音，下載音頻的功能。

　　暫時想到這些啦，歡迎補充~

　　三、看性能

　　從前端能看到的性能大概有以下：

　　1、資源的懶加載

　　比如說一個H5頁面有一張很長的背景圖，我們一般是這樣做的，會把背景圖分割成n份，然后把它們拼接起來。

　　在手機屏幕視野內(nèi)的，會優(yōu)先加載出來，不在視野范圍內(nèi)的，就不加載。

　　但是當你往上拉的時候，下一張圖片就會加載。當你看到往上拉，圖片才慢慢加載出來的時候，一般是用了懶加載技術(shù)。這樣做可以節(jié)省流量，加快加載速度，提高性能。

　　2、分頁加載

　　像淘寶這樣很多商品列表的頁面，用分頁加載是必不可少的，當你往上拉頁面的時候，就會去加載下一頁的商品數(shù)據(jù)了。一般都會有加載中這樣的提示語，這樣做同樣也是為了減少請求，節(jié)省流量。

　　3、應用緩存

　　有沒有發(fā)現(xiàn)，有些H5頁面，點擊次的時候，加載的有點慢，但是點第二次的時候，速度非?？欤鞘且驗閼昧吮镜氐木彺娴木壒?。

　　4、單頁面應用

　　單頁面應用是什么意思呢?比如說，一個注冊頁面，從注冊信息頁，發(fā)短信驗證碼，到注冊成功頁，這3個頁面是同一個html文件。當你只看到注冊頁面的時候，是因為它把發(fā)短信和成功頁隱藏掉了。

　　利用單頁面技術(shù)，可以減少文件的個數(shù)，減少請求，提高性能，缺點就是SEO。因為一個html里面，有關(guān)于SEO優(yōu)化的字段，如果減少了html文件，那就少了那幾個seo優(yōu)化字段了。

　　那么問題來了，怎樣看出，這個H5頁面是否用了單頁面技術(shù)呢?一般來說，同一個頁面之間的跳轉(zhuǎn)，可以設置很多換場的動畫，比如說從左往右滑，從上往下滑，但是多頁面之間的跳轉(zhuǎn)動畫是實現(xiàn)不了的，所以可以從頁面之間的換場來識別。

　　后面會繼續(xù)講系列文章~有錯誤歡迎指出~