从技术的角度看产品系列1(web前端)

拿到一个网站,无论是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页面是否用了单页面技术呢,一般来说,同一个页面之间的跳转,可以设置很多换场的动画,比如说从左往右滑,从上往下滑,但是多页面之间的跳转动画是实现不了的,所以可以从页面之间的换场来识别。

后面会继续讲系列文章~

欢迎关注个人公众号:产品的技术小课


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,287评论 25 708
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,796评论 24 450
  • 今天是我的生日,确切地说,是农历的生日。 我不知道其他地方生日怎么算,我们这里都是更加重视农历生日,而且算虚岁。 ...
    此时木棉阅读 301评论 0 0
  • 图|来源网络如需转载|请后台留言 01 / 之前一位linkin的市场总监在做分享时就提到家庭和工作平衡这个话题,...
    顾小宝阅读 4,622评论 0 1