通比牛牛能打伙牌吗
從技術角度看產品
日期:2017/10/31 18:05:29 瀏覽次數: 作者:鄭州網站建設

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

 布局

  1、固定布局

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

      2、彈性布局

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

  3、響應式布局

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


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

  1、資源的懶加載

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

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

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

  2、分頁加載

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

  3、應用緩存

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

  4、單頁面應用

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


相關新聞
通比牛牛能打伙牌吗 甘甘肃十一选五走势 无网四人单机麻将 中乙足球比分直播 甘肃11选5 看足球指数的软件 周四竞彩足球比分预测 成都麻将血战到底 股票分析网站源码 打麻将赢现金红包 体彩竞彩足球比分开奖 东北赢乐微信麻将群 德宏信投 体彩宁夏11选五走势图 吉林心悦麻将 大赢家比分直播v90 广东十一选五开奖信