从技术角度看产品
日期:2017/10/31 18:05:29 浏览次数: 作者:郑州网站建设

拿到一个网站,无论是PC端还是移动端,你知道它运用了哪些前端技术吗?你知道它的性能是怎么样吗?你知道哪些是原生的控件吗?接下来,我们就简单讲讲怎样从技术的角度看产品。

 布局

  1、固定布局

  固定布局是指随着浏览器的宽度变大变小,页面的整体布局不会发生改变。如果浏览器宽度小于页面宽度,就会出现滚动条。

      2、弹性布局

  弹性布局是指页面宽度是不固定的,页面宽度随着浏览器的大小而变大变小。但是它不会去自动调整里面元素的摆放位置。所以如果是一个PC端网页,如果在移动端看,可能会变得非常小,体验也不够好。

  3、响应式布局

  响应式布局是页面布局可以响应不同屏幕尺寸的设计方法。同一个网页,有可能在PC端浏览,也可能在4寸的安卓机上浏览,或者在27寸的iMac上浏览,在不同的尺寸下面,响应式可以自适应的改变布局,提供良好的体验。


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

  1、资源的懒加载

  比如说一个H5页面有一张很长的背景图,我们一般是这样做的,会把背景图分割成n份,然后把它们拼接起来。

  在手机屏幕视野内的,会优先加载出来,不在视野范围内的,就不加载。

  但是当你往上拉的时候,下一张图片就会加载。当你看到往上拉,图片才慢慢加载出来的时候,一般是用了懒加载技术。这样做可以节省流量,加快加载速度,提高性能。

  2、分页加载

  像淘宝这样很多商品列表的页面,用分页加载是必不可少的,当你往上拉页面的时候,就会去加载下一页的商品数据了。一般都会有加载中这样的提示语,这样做同样也是为了减少请求,节省流量。

  3、应用缓存

  有没有发现,有些H5页面,点击第一次的时候,加载的有点慢,但是点第二次的时候,速度非常快,那是因为应用了本地的缓存的缘故。

  4、单页面应用

  单页面应用是什么意思呢?比如说,一个注册页面,从注册信息页,发短信验证码,到注册成功页,这3个页面是同一个html文件。当你只看到注册页面的时候,是因为它把发短信和成功页隐藏掉了。


相关新闻