发布时间：2022-9-11 分类： 电商动态
获得一个代购源码网站，无论是PC还是手机，您知道它使用的是哪种前端技术吗？你知道它的表现是什么吗？你知道哪些是原生控件吗？接下来，让我们简单地谈谈如何从技术角度看待产品。
一，布局
1，固定布局
固定布局意味着随着浏览器的宽度变小，页面的整体布局不会改变。如果浏览器宽度小于页面宽度，则会出现滚动条。如下图所示：
2，布局灵活
灵活的布局意味着页面宽度不固定，页面宽度随浏览器的大小而变得越来越小。但它不会自动调整内部元素的位置。因此，如果它是一个PC端网页，如果你看一下移动端，它可能会变得很小而且体验不够好。
3.响应式布局
响应式布局是页面布局可以响应不同屏幕尺寸的设计方法。在同一个网页上，可以在PC端浏览，或在4英寸Android机器上浏览，或浏览27英寸iMac。在不同尺寸下，响应式可以自适应地改变布局并提供良好的体验。如下所示，浏览器大小从大到小变化，页面自适应过程如下：
那么响应式布局的优势是什么？
1）PC和移动设备共享一组网页以降低维护成本。
2）SEO优化，搜索引擎更愿意接收适应移动和PC的网页。
其次，识别html本机控件
获取可能包含下拉框，搜索框，按钮，弹出窗口等的网页。如何识别它是原生的还是由已故程序员编写的？
我们来看看Web前端的本机控件：
1.单行文本输入框
2，单行密码输入框
3.只能输入数字的单行输入框
4.文件上传输入框
5，多行文字输入框
6，单选按钮
7，多选按钮
8，下拉列表
注意：PC端和移动端显示的下拉列表的效果不同。以上图片在PC端。在移动端，Android和iOS的性能不同。
机器人：
iOS的：
9，可以点击按钮
10.日期选择器
注意：日期选择器不仅可以选择年/月/日，还可以选择年/月，周，小时/分钟。
11，数字滑块
注意：中间的滑块可以用鼠标自由拖动，拖动的数字范围可以自由设置。
12，视频播放
注意：只要您有视频资源，在此控件中写入资源地址，就可以播放〜
13，音频播放
注意：这里也是如此。只要有音频资源，您可以通过放置地址来播放它。此控件还具有控制音量，静音和下载音频的功能。
暂时考虑一下，欢迎添加〜
第三，看性能
您可以从前端看到的性能大致如下：
1.懒惰加载资源
例如，H5页面具有非常长的背景图像。我们通常这样做。我们将背景图像分成n个部分，然后将它们拼接在一起。
在手机屏幕的视野中，它将首先被加载，如果它不在视野范围内，它将不被加载。
但是当你拉起时，下一张图片会加载。当您看到上拉时，图片会慢慢加载，通常使用延迟加载技术。这样可以节省流量，加快加载速度并提高性能。
2，页面加载
许多产品中列出的淘宝等页面对于分页至关重要。当您上拉页面时，它将加载下一页的产品数据。通常，在加载时会出现这样的提示，这也是为了减少请求并节省流量。
3.应用程序缓存
你有没有发现一些H5页面，第一次点击时，加载有点慢，但第二次，速度非常快，这是因为本地缓存的应用。
4，单页申请
单页应用程序的含义是什么？例如，注册页面，从注册信息页面，发短信验证码到注册成功页面，这三个页面是相同的html文件。当您只看到注册页面时，这是因为它隐藏了发短信和成功页面。
使用单页技术，您可以减少文件数量，减少请求并提高性能。缺点是SEO。因为在html中有一个关于SEO优化的字段，如果你减少了html文件，那么seo优化字段就会减少。
所以问题就来了。您如何看待这个H5页面是否使用单页技术？一般来说，同一页面之间的跳转可以设置很多过渡动画，例如，从左到右，从它下降，但是多个页面之间的跳转动画没有实现，所以它可以从之间的过渡中识别出来。页面。
我将继续讨论该系列以后〜有错误欢迎指出〜
文本/lemon_shan
