拿到一个网站，无论是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份，然后把它们拼接起来。

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