网站建设

拿到一个网站，无论是PC端还是移动端，你知道它运用了哪些前端技术吗?你知道它的性能是怎么样吗?你知道哪些是原生的控件吗?接下来，我们就简单讲讲怎样从技术的角度看产品。让我们在建设的电力能源网站时更加得心应手！

 布局

　　1、固定布局

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

      2、弹性布局

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

　　3、响应式布局

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

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

　　1、资源的懒加载

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

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

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

　　2、分页加载

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

　　3、应用缓存

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

　　4、单页面应用

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

      3000+家企业正在选择捷瑞数字，专注网站建设18年，服务500强、上市企业上百家，致力于行业网站建设整体解决方案，亨通集团、通光集团、中联环保、新地能源、招金集团、紫金矿业、伊泰集团、陆海石油、凯美特气、华源泰盟、华丰裕达... ...了解更多案例，请查看官网。