从盖州网站公司技术角度看产品:「web前端」认知入门

发布日期:2017-11-01 浏览:1114 次


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

  后面会继续讲系列文章~有错误欢迎指出~

相关推荐

网站制作推广优化提高手机移动端网站搜索排名

使用手机搜索网站的人越来越多了,2019年之后做网站科派还是建议您考虑一下PC和手机兼容性。让用户可以在不同的设备和浏览器进...

网站排名不是靠收录量(真正的质量才是王道)

营口网站优化文章 - 新网站的弯路尽量少走一些、你就能很快获得网站排名和盈利。 老站长都是从一个SEO小白走过来的,其中的艰...

不花一分钱的网站推广办法关键词互点要注意什么规律?

网站关键词互点,是人为提升用户体验度的方法,这个方法也有黑帽的优化手法在里面,因为IP ,PV 都不自然得来的,而是人为点...

汇聚营口网站推广效率犀利的微博VS微信观提升网站用户体验度?

在微博上无意中看到一个微博和微信的本质区别的博文,言辞相当犀利,就转来分享给大家,商业植入无处不在,当你一天天离不开,你...

企业网站内容建设:准备什么样的资料用户才会喜欢?

请站在用户角度来看自己的网站,用户如果有一天进到你的网站,他们来做什么? 需要什么? 你的网站能给用户最有价值的内容,你的...

营口SEO优化新视角、做网站怎能不考虑网站排名呢?

提高网站人气和流量最有效的办法就是把自己的网站排名优化上去,不论任何网站都是需要有搜索排名的,不然很难找到你做的网站,你...

营口SEO谈未来10年来AI技术对优化会?

关键词的设置应该遵循小至大,就好比吃苹果肯定是先吃靠近嘴的一边。在营口还没有单纯的SEO服务公司,但是科派做SEO很多年...

是写原创文章,做外链guocheng中你有用过论坛的签名来做吗?

从一个月前开始学习SEO到现在的有一个多月的时间了。我几乎做的做的工作就是写原创文章,做外链。原创文章今天就不和大家聊了...

添加客服微信
添加客服微信
关注公众号
关注公众号
2014-2024 www.ykkp.net 营口科派软件有限公司 版权所有
QQ客服:401403 | 辽ICP备15004956号-11 TAG关键词 | 站点地图