拿到一个网站，无论是PC端还是移动端，你知道它运用了哪些前端技术吗，你知道它的性能是怎么样吗，你知道哪些是原生的控件吗，接下来我们就简单讲讲怎样从技术的角度看产品。
一.布局
1.固定布局
固定布局是指随着浏览器的宽度变大变小，页面的整体布局不会发生改变，如果浏览器宽度小于页面宽度，就会出现滚动条。如下图：
2.弹性布局
弹性布局是指页面宽度是不固定的，页面宽度随着浏览器的大小而变大变小，但是它不会去自动调整里面元素的摆放位置。所以如果是一个PC端网页，如果在移动端看，可能会变得非常小，体验也不够好。
3.响应式布局
响应式布局是页面布局可以响应不同屏幕尺寸的设计方法。同一个网页，有可能在PC端浏览，也可能在4寸的安卓机上浏览，或者在27寸的iMac上浏览，在不同的尺寸下面，响应式可以自适应的改变布局，提供良好的体验。如下图，浏览器尺寸由大变小，页面自适应的过程：
那么响应式布局有什么优势呢？
1.PC端和移动端共用一套网页。降低维护成本。
2.SEO优化，搜索引擎更愿意接收适配移动端和PC端的网页。
二.识别html原生控件
拿到一个网页，它可能有下拉框，搜索框，按钮，弹出框等元素，怎样识别它是原生的还是后期程序员写出来的呢？
下面我们来看web前端的原生控件都有哪些：
1.单行文本输入框
2.单行密码输入框
3.只能输入数字的单行输入框
4.文件上传输入框
5.多行文本输入框
6.单选按钮
7.多选按钮
8.下拉列表
注意：下拉列表在PC端和移动端显示出来的效果是不一样的，上面的图是在PC端的表现，移动端上，安卓和IOS上面的表现也不一样，
安卓：
IOS：
9.可点击按钮
10.日期选择器
注意：日期选择器不仅有选择 年/月/日，还有 年/月，星期，时/分
11.数字滑动条
注意：中间的滑块，可以用鼠标自由拖动，拖动的数字范围，可以自由设置。
12.视频播放
注意：只要你有视频资源，在这个控件里写上资源地址，就可以播放啦~
13.音频播放
注意：这里也一样，只要有音频资源，放上地址就可以播放，这个控件还有控制音量大小，静音，下载音频的功能。
暂时想到这些啦，欢迎补充~
三.看性能
从前端能看到的性能大概有以下：
1.资源的懒加载
比如说一个H5页面有一张很长的背景图，我们一般是这样做的，会把背景图分割成n份，然后把它们拼接起来，在手机屏幕视野内的，会优先加载出来，不在视野范围内的，就不加载，但是当你往上拉的时候，下一张图片就会加载。当你看到往上拉，图片才慢慢加载出来的时候，一般是用了懒加载技术。这样做可以节省流量，加快加载速度，提高性能。
2.分页加载
像淘宝这样很多商品列表的页面，用分页加载是必不可少的，当你往上拉页面的时候，就会去加载下一页的商品数据了，一般都会有加载中这样的提示语，这样做同样也是为了减少请求，节省流量。
3.应用缓存
有没有发现，有些H5页面，点击第一次的时候，加载的有点慢，但是点第二次的时候，速度非常快，那是因为应用了本地的缓存的缘故。
4.单页面应用
单页面应用是什么意思呢，比如说，一个注册页面，从注册信息页，发短信验证码，到注册成功页，这3个页面是同一个html文件，当你只看到注册页面的时候，是因为它把发短信和成功页隐藏掉了。利用单页面技术，可以减少文件的个数，减少请求，提高性能，缺点就是SEO。因为一个html里面，有关于SEO优化的字段，如果减少了html文件，那就少了那几个seo优化字段了。那么问题来了，怎样看出，这个H5页面是否用了单页面技术呢，一般来说，同一个页面之间的跳转，可以设置很多换场的动画，比如说从左往右滑，从上往下滑，但是多页面之间的跳转动画是实现不了的，所以可以从页面之间的换场来识别。
后面会继续讲系列文章~
有错误欢迎指出~
网友评论