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

一、布局

1、固定布局

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

2、彈性布局

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

3、響應式布局

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

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

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

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

二、識別html原生控件

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

下面我們來看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份，然后把它們拼接起來。

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

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

2、分頁加載

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

3、應用緩存

有沒有發(fā)現(xiàn)，有些H5頁面，點擊第一次的時候，加載的有點慢，但是點第二次的時候，速度非?？?，那是因為應用了本地的緩存的緣故。

4、單頁面應用

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

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

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

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

文/lemon_shan