从技术角度看产品：「web前端」认知入门

　　拿到一个网站，不管是PC端借是挪动端，您晓得它使用了哪些前端手艺吗?您晓得它的机能是怎样样吗?您晓得哪些是本死的控件吗?接下去，我们便简朴讲讲如何从手艺的角度看产物。

　　1、规划

　　1、牢固规划

　　牢固规划是指跟着阅读器的宽度变年夜变小，页里的团体规划没有会发作改动。假如阅读器宽度小于页里宽度，便会呈现转动条。以下图：

　　2、弹性规划

　　弹性规划是指页里宽度是没有牢固的，页里宽度跟着阅读器的巨细而变年夜变小。可是它没有会来主动调解内里元素的摆放地位。以是假如是一个PC端网页，假如正在挪动端看，能够会变得十分小，体验也不敷好。

　　3、呼应式规划

　　呼应式规划是页里规划能够呼应差别屏幕尺寸的设想办法。统一个网页，有能够正在PC端阅读，也能够正在4寸的安卓机上阅读，大概正在27寸的iMac上阅读，正在差别的尺寸上面，呼应式能够自顺应的改动规划，供给优良的体验。以下图，阅读器尺寸由年夜变小，页里自顺应的历程：

　　那末呼应式规划有甚么劣势呢?

　　1)PC端战挪动端共用一套网页，低落保护本钱。

　　2)SEO劣化，搜刮引擎更情愿领受适配挪动端战PC真个网页。

　　2、辨认html本死控件

　　拿到一个网页，它能够有下推框、搜刮框、按钮、弹出框等元素。如何辨认它是本死的，借是前期法式员写出去的呢?

　　上面我们去看web前真个本死控件皆有哪些：

　　1、单止文本输进框

　　2、单止稀码输进框

　　3、只能输进数字的单止输进框

　　4、文件上传输进框

　　5、多止文本输进框

　　6、单选按钮

　　7、多选按钮

　　8、下推列表

　　留意：下推列表正在PC端战挪动端显现出去的结果是纷歧样的。上里的图是正在PC真个表示，挪动端上，安卓战iOS上里的表示也纷歧样。

　　安卓：

　　iOS：

　　9、可面击按钮

　　10、日期挑选器

　　留意：日期挑选器不只有挑选 年/月/日，借有 年/月，礼拜，时/分。

　　11、数字滑动条

　　留意：中心的滑块，能够用鼠标自在拖动，拖动的数字范畴，能够自在设置。

　　12、视频播放

　　留意：只需您有视频资本，正在那个控件里写上资本地点，便能够播放啦~

　　13、音频播放

　　留意：那里也一样，只需有音频资本，放上地点便能够播放，那个控件借有掌握音量巨细，静音，下载音频的功用。

　　临时念到那些啦，欢送弥补~

　　3、看机能

　　畴前端能看到的机能大要有以下：

　　1、资本的懒减载

　　好比道一个H5页里有一张很少的布景图，我们普通是那样做的，会把布景图朋分成n份，然后把它们拼接起去。

　　正在脚机屏幕视家内的，会劣先减载出去，没有正在视家范畴内的，便没有减载。

　　可是当您往上推的时分，下一张图片便会减载。当您看到往上推，图片才渐渐减载出去的时分，普通是用了懒减载手艺。那样做能够节流流量，放慢减载速率，进步机能。

　　2、分页减载

　　像淘宝那样许多商品列表的页里，用分页减载是必不成少的，当您往上推页里的时分，便会来减载下一页的商品数据了。普通城市有减载中那样的提醒语，那样做一样也是为了削减恳求，节流流量。

　　3、使用缓存

　　有无发明，有些H5页里，面击第一次的时分，减载的有面缓，可是面第两次的时分，速率十分快，那是果为使用了当地的缓存的来由。

　　4、单页里使用

　　单页里使用是甚么意义呢?好比道，一个注册页里，从注册疑息页，收短疑考证码，到注册胜利页，那3个页里是统一个html文件。当您只看到注册页里的时分，是果为它把收短疑战胜利页躲藏失落了。

　　操纵单页里手艺，能够削减文件的个数，削减恳求，进步机能，缺陷便是SEO。果为一个html内里，有闭于SEO劣化的字段，假如削减了html文件，那便少了那几个搜索引擎优化字段了。

　　那末成绩去了，如何看出，那个H5页里能否用了单页里手艺呢?普通去道，统一个页里之间的跳转，能够设置许多换场的动绘，好比道从左往左滑，从上往下滑，可是多页里之间的跳动弹绘是真现没有了的，以是能够从页里之间的换场去辨认。

　　前面会持续讲系列文章~有毛病欢送指出~

　　文/lemon_shan