<span id="nhlv1"><dl id="nhlv1"><del id="nhlv1"></del></dl></span>
<span id="nhlv1"></span>
<strike id="nhlv1"></strike>
<strike id="nhlv1"><dl id="nhlv1"></dl></strike>
<span id="nhlv1"></span>
<span id="nhlv1"></span><th id="nhlv1"></th>
從技術角度看產品
日期:2017/10/31 18:05:29 瀏覽次數: 作者:鄭州網站建設

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

 布局

  1、固定布局

  固定布局是指隨著瀏覽器的寬度變大變小,頁面的整體布局不會發生改變。如果瀏覽器寬度小于頁面寬度,就會出現滾動條。

      2、彈性布局

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

  3、響應式布局

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


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

  1、資源的懶加載

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

  在手機屏幕視野內的,會優先加載出來,不在視野范圍內的,就不加載。

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

  2、分頁加載

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

  3、應用緩存

  有沒有發現,有些H5頁面,點擊第一次的時候,加載的有點慢,但是點第二次的時候,速度非?,那是因為應用了本地的緩存的緣故。

  4、單頁面應用

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


相關新聞
<span id="nhlv1"><dl id="nhlv1"><del id="nhlv1"></del></dl></span>
<span id="nhlv1"></span>
<strike id="nhlv1"></strike>
<strike id="nhlv1"><dl id="nhlv1"></dl></strike>
<span id="nhlv1"></span>
<span id="nhlv1"></span><th id="nhlv1"></th>