webdisplays使用方法

今天咱们讲一下 animation 关于动画这方面的内容，然后呢动画呢，它的属性名是 animation， 那 animation 动画呢，它主要的核心属性呢？有 name， 还有他的呃 duration， 动画周期时长，还有他的限性速度曲线，就是还有他动画开始之前的延时时间，播放次数啊，播放方向啊，还有动画前后样式状态，还有播放状态， 当然他也有复合写法，复合写法呢就直接写一个 enigma， 然后把对应的属性的值写到后面就可以了， 顺序我也给大家列到这里了。那今天呢第一节课就是咱们先看一下咱们的动画是什么样的， 那咱们之前做动效呢，都是用这个过渡来做，但是过渡呢，要借助于咱们的鼠标悬浮在上面才能实现咱们的这个过渡，而且他不能就说呃无限次播放，或者说是呃实现很多，就说 自己能够自动过渡或者说变化的这种状态都需要咱们人去控制，那动画呢就不需要这么复杂了。首先我在下面呢这里写了一个盒子，给他起了个类名叫 animate， 然后呢我用 kframes 在 这里定义了一个动画，在这里定义一个动画呢，这个后边这个是咱们这个动画的名字。然后呢就从百分之零让他在 x 轴上偏移零像素，那到了百分之百的时候让它一共偏移五百像素。那在这里呢，我给这个 animate 呢，先给他定义了宽高，还有它的背景颜色。 然后呢我又在下边给他写了一个 animation， 就是 咱们动画属性。第一个参数呢，就是我写了他的动画名称，看这里对应的动画名称，第二个我就写了他的动画时长是一秒，那 意思呢？就是说让这个 item 在 页面一加载的时候就执行这个动画，这个动画是哪一个动画？就下边这个动画，让他从零到一百，一共是一秒钟，就从 x 的 零的位置迁移到 x 轴五百像素的位置。那咱们去页面先去看一下 刷新，那看到了吧？这个合资就从零的位置跑到了五百的位置，那还有他的限性，比如说我在这里给大家先演示一个 属性，就是，呃，先慢再快，再慢 就直接写在这个后面，好再刷新。刷新看到吧，他是先快后慢，我把这个时间拉长一点，三秒 再刷新，他开始很慢，中间快，然后最后又慢了。然后还有就是咱们也可以控制他的呃播放次数，比如说我在这里直接写三刷新 两次，三次。 那后面具体的其他的属性，咱们下节课一一给大家讲解。好，在这里先截图保存。

啊，最近闲来无聊，写了一个 word 桌面，我觉得应该有一部分人会有这样的需求啊， 也可能会用到这个工具类的网站啊，我也待过不少这个企业或者单位呢，其实这个很多内部没有一个桌面来集成自己所用的一个网站呢，比如说你常用的非常多的一些系统， 不管是教育行业的，或者是这个其他行业的里面的，可能你个人呢需要用到很多的系统，但是这些系统呢，没有一个集中处理的地方，我们平常呢可能就是加书签的形式，但是这种方式来管理比较杂乱， 也不直观，而且不同的浏览器之间同步呢，还有一定的问题啊，比如说你可能突然出差，或者是因为什么原因你要换电脑 管理你常用的一些软件呢，是非常不方便的，这时候呢，你可以用这个 word 点 set 这个网站的这个功能。这个网站呢主要是干什么用的呢？其实就相当于 把你常用的系统啊放在这个 word 桌面做一个集中管理啊，有点类似于 windows 的 一个桌面系统啊，那大家可以看一下，在这个桌面呢，其实就是一个一个的图标啊，其实就是一个一个的网站，大家可以看一下， 这个是用户手册啊，大家如果想要用这个网站的话，可以看一下啊，它里面有这个核心功能的一个介绍，包括相应的一些操作。 那首先呢，这个是未登录的一个状态，目前只显示两个应用，如果你想要自定义型应用呢，需要登录呢？你需要账号，那你直接注册就可以了， 你注册完之后呢，进行一个登录 啊，登录进来之后呢，就相当于是加载你个人订阅或者个人添加的一些自定义的一些应用。但呢如果你第一次登录进来啊，其实就一个空白桌面，什么应用都没有啊，什么应用都没有。 如果你想要添加，可以在这里点击开始啊，这里有个应用中心，你可以进行订阅一些公开的应用，或者自己添加一些自定义应用啊， 比如说你想添加一个你们公司内部的或者你常用的一些系统，比如说百度是吧？这里就写个应用名称啊，也就是网站名称，百度图标的话，你可以用这个链接啊， 或者你不想搞这个图标啊，空着也可以，他默认的话是这个一个浏览器标识的这么一个应用啊，默认的是这个，如果你不喜欢这个，你可以自己 去网上找一张你喜欢的这个图标，但后续的话，我可能会做一个图片上传的功能呢，因为目前主要是看大家有没有用的一个需求，如果有用的话，后续再优化， 那这个图标呢？是不是重？最重要的第二个就是这个应用地址，也就是网站的地址，比如说 http， 呃，这个三点六点百度点 com 是 吧？啊？这个显示状态，如果你想要它显示在桌面就显示啊，如果不想它显示在桌面呢，你就直接选择隐藏就可以了，但一般都是显示 啊。至于这个可能有一些比较疑惑，是否公开这个什么意思呢？你如果选择私有的话，相当于你添加的这个，比如说你添加的百度，那么就只能你自己能看到啊，别人是看不到的，如果你选择这个公开呢？ 呃，添加这个公开应用之后呢，我会进行审核，审核之后通过之后它会在这里进行展示啊，比如说这个豆包啊，也是我在这里添加的，我审核通过之后呢，它会在这里进行展示，也就是相当于别人也可以订阅你添加的这个网站的， 那它直接订阅啊，它就不用再去进行添加了，就直接显示在桌面了。比如说我这里先删除这， 然后删除之后，比如说你添加了一个豆包的公开的应用，然后别人就不用再去来添加这个豆包了，它直接就进订阅，一订阅豆包就显示到桌面了，就比较方便。 但呢如果你添加这个公开应用呢，我是需要进行审核的，因为我也是担心有些人啊，可能添加一些乱七八糟的网站在上面，这个别人订阅，那影响也不好，是吧？ 啊，当然呢，目前的功能呢，主要是做一个网站的管理， 后续呢，我会自己开发一些系统啊，放在这个平台上，比如说教育行业的，或者是这个其他一些行业里面的，你如果有需要， 比如说你想要某一个系统，但是你也没有时间去做，或者这个你可能对计算机又又不是太了解，是吧？ 然后呢，你可以直接给我发邮件，到时候呢，我会抽时间给你开发出来，是吧？但我也会联系你和你讨论这个具体的功能或者需求，如果这个 我有时间啊，会把这个系统给开发出来，然后发布到这个公开应用这里，到时候你直接订阅就可以了，直接订阅了你就可以直接用了，但这是后话呢，这是主要是看目前有没有用户来用这个系统呢？ 那如果有人用呢？我会选择一些感兴趣的或者你想要的一些系统进行开发。那你怎么去联系我呢？可以在这个用户手册里面呢，有我的联系方式 在这里面呢，你可以直接通过这个发送邮件的形式描述你的一个功能需求，或者一些系统需求等等，都可以联系我。包括这个 oppo 桌面的一些优化点呢？你都可以， 我说说说要希望他是什么样的，或者你想要一个什么样的系统，比如说你是在教育行业的，或者是这个其他一些行业里面的，然后呢你需要一个系统来管理你的日常工作上的一些事情，来提高你的一个效率，是吧？如果你想要一个电商网站的， 或者你想要一个管理这个，比如说记账的呀，或者是类似于其他的一些系统等等，都可以。 你给我提需求之后呢，我会进行开发，然后放到这个应用中心啊，你到时候订阅就可以直接用了。

二零二六必设有救了，优洛通用系统来了，适配优洛二十六和优洛 v 十一、优洛 v 八等算法。最新一点二点零版本，在之前的版本上新增历史检测记录，修复前端视频流轮询 bug， 改成稳定的 streaming htt peer response 视频流，优洛视频流更稳定。 优化前端个人中心页面，新增图片视频摄像头检测结果保存，新增视频流暂停继续功能。管理端新增检测历史管理模块，等过年回来继续更新视频流，打算使用 web code 持续更新中，接下来直接演示系统，选择 obb 模型后上传需要检测的图像，点击开始识别， 后端识别成功返回识别结果，点击清除按钮之后选择目标检测模型，也可以更换自己的模型，上传视频文件，进行实时视频流检测， 视频流检测过程中可以暂停识别，也可以继续识别。 视频流检测完成后返回检测结果，点击播放即可查看。 接下来准备摄像头实时识别，电脑提前准备好摄像头，选择摄像头即可开始识别，摄像头也是可以进行暂停与继续识别操作。摄像头识别时候隐藏输入区域，只需要一个输出区域就行。 接下来我们更换自己模型，使用自己训练的车牌识别模型进行识别，自己修改一下自己的模型标题样式，即可完成自己的外部识别系统，大家懂得都懂的。接下来使用关键点检测模型进行视频识别， 在检测记录模块可以查看刚刚检测的所有识别结果，可以点击缩略图放大查看，也可以批量删除等操作。 个人中心模块就不用多讲了，都是常规操作。 接下来进入粘钩后台管理系统，使用管理员账号进行登录，在之前的系统增加历史数据管理模块，这里显示所有用户的检测记录，历史记录只有删除。操作缩略图跟前端一样，可以放大查看。 我们删除一条数据之后，去前端看看是否被删除了。在前端的历史记录可以看到是被删除了。 用户管理模块跟之前的一样，都是一些常规操作，这里就不详细演示了。后续继续更新，会接入 l l m 大 语言模型，构建自己聊天系统，完成自己的 u l o 二十六 v 十一 v 八加 l l m 智能分析系统， 接入 l l m 大 语言模型，是二零二六必设必备，加上算法改进、模型减脂等，顺利毕业，这不是有手就行吗？全部原码都更新到泊课了。好了，这期视频到此结束，祝大家马年快乐，在马年里少写代码，不当一名牛马，下期见，拜拜！

对于 esp 三二这类自带 wifi 功能的硬件设备，我们可以借助 mqtt 通信协议轻松实现它与电脑大屏之间的双向交互。 而如果我们使用 arduino 开发板，在不外接 wifi 模块的场景下，我们则可以通过数据线进行连接，采用串口通信的方式完成 arduino 与电脑大屏之间的交互操作。

好，这节课呢，我们来学习一下浮动布局和响应式导航，嗯，那么呃，我们该如何利用这个浮动以及媒体查询打造一个既美观又实用的导航 这个布局呢？对吧？同时呢还要保证在不同屏幕尺寸下都能够有一个高效的性能。这里呢给大家去提几点，第一个呢就是浮动，浮动这里大家要了解一个是它的原理，一个呢是如何清除浮动，清除浮动 原理的话，就是 float 这个属性呢，会让元素脱离文档流向左或者向右，浮动是早期这种响应式设计的核心，那么清除浮动呢，就是使用 clear 或者伪元素清除浮动，防止副元素塌陷。第二个就是响应式导航， ok， 在 这里呢我们要注意就是 html 的 结构，还有一个呢就是默认样式， 默认样式 h t、 r 结构呢，我们要清晰地去定义像 n a v 这种内涵，呃，比如说一些链接列表， u l l i a 标签，对吧？是有利于语义化和样式控制的。 那么默认样式的话，就比如说我们要去设置导航的样式，你像字体、颜色、背景，确保他们出示状态是可以用的。好，第三点呢就是浮动布局实现，导航栏，在这里呢，我们要进行水平布局，对吧？还有自适应， 自适应，自适应水平布局，你比如说对于 li 元素，应该应用 float left 来创建水平导航来，嗯，自适应呢，我们要给 n v 设置 overflow auto 或者使用尾元素清除浮动，保持这个容器的完整性。 第四点呢就是媒体查询，那么媒体查询需要我们注意的就是断点，断点设置和折叠导航， 嗯，或者折叠按钮，那么断点设置呢，我们要根据设备的类型，你比如说手机啊、平板啊，去设置断点，对吧？那么折叠导航呢？你比如说在小屏下，你要将浮动的 l i 变为 display block， 是 吧？并且呢通过 display note 来隐藏一部分导航， 那么按钮呢，我们可以添加一个按钮来触发 g s 切换导航的显示和隐藏。第五个呢就是进阶技巧，这里呢，比如说过度动画， 再或者触摸优化，我们可以给导航栏添加过度效果，哎，比如说平滑，呃，蛋入蛋出，是吧？来提升用户体验。那触摸的话，我们要保证这个导航按钮呢，足够大，便于触摸操作。 浮动布局，虽然说它是基础，对吧？但是在响应式导航中，在响应式导航当中呢，它也发挥着一个比较重要的作用，尤其是配合媒体查询和 gs， 可以 创建既灵活又适应性比较强的导航解决方案。 ok， 这个呢，就是关于浮动布局和响应式导航我们所需要关注的一些点。

好，今天来说一个非常非常重要的选项卡，就是 sources 选项卡，你把这个选项卡用好了，那你的调试效率是成倍的增加。就是理论上来讲，当你页面上出现任何问题的时候，都可以通过这个选项卡快速的定位到问题，你 不要在源代码里面去翻来覆去看啊，看的也看不清楚，你直接利用这个选项卡就可以调试问题了。像我经常跟一些同学去调一些 bug 的 时候， 基本上我不会看他的源代码的，直接通过这个选项卡就可以调出来问题。那这个选项卡具体怎么用呢？我们以一个例子啊，来说明他的用法。这个例子呢是谷歌官方的例子啊，他说这个页面上呢有一个问题，你需要用这个选项卡把它调出来啊，这个问题非常非常简单啊，就这里输个数字，这里输个数字，点按钮过后呢？哎，我把这一圈去掉啊， 整理过后呢，他的结果是错误的。那其实有经验的同学呢，一看就知道了啊，这个东西他错在哪？不过呢，我们现在就假装自己不知道啊，我们需要用这个调试选项卡的来调试到这个问题。那么首先观察一下这个选项卡啊，它里边呢是有这么几个区域，这是第一个区域，这是第二个区域，然后这是第四个区域 啊，我们依次来说啊，首先说他第一个区域，第一个区域呢是一个类似于资源管理器，在这里边呢，可以看到啊，这个页面上正在应用的是哪些代码？ 这边有两个子目录啊，一个是 author， 这个表啥意思呢？就当你的页面上有原码地图的时候，像我们用一些工程化搭建的系统，是吧？它们都是有原码地图的，那么你在这里呢，可以看得非常清楚啊，你的原代码是啥样子？ 我这个页面啊，是一个纯的原生写的页面，所以说它没有原码地图，那么这里展开呢，它只有一些插件的原码地图，因为我这个浏览器里边有一些插件吗？对不对？它是一些插件的原码地图啊，像这个路由的调试工具，它的原码地图放到这里我们用不到啊。好，然后下面这个呢，就是他部署过后，就是打包过后的 他真实运行的代码，所以我们这里呢，由于是原生的页面啊，我们就调试这里。如果说你那一块是工程化的系统的话，就应该调试的是上面这一块啊，道理都是一样的。 好，我们展开这个 deploy， 展开过后呢，会发现呢，它有一个这么一个东西。 top， 这个又是啥玩意呢？这是它顶级上下文。啥意思啊？就是有些页面呢，它可能嵌套了 iframe， 它就会有多个上下文。那我这个页面呢，没有那么多啊，只有一个顶级上下文，所以说你展开它，展开它过后呢，它下边呢又有一堆东西，那么这个东西是啥呢？ 像这些玩意儿啊，都是咱们插件的上下文，因为我浏览器里边安了很多插件，那每个插件的上下文里边代码也可以进行调试的啊，不过呢，我们一般来说是不会去调试它们， 我们只需要去调试自己的原代码就可以了，那么就调试这个东西，那为什么是这个呢？是因为它的域名啊，你看它的主机名跟这里的主机名是不对应的，对吧？ 就调这个东西啊，所以我们进去啊，进去过后呢，它有一些子目录，那个子目录哪来的呢？子目录它就对应到我们的 pass， 对 应到这，看到没有些子目录好，展开这个子目录过后呢，我们就可以看到非常清楚了啊，它里边有两个东西啊，一个是页面，你看 在第二个版面里边，它就会显示你当前选中的那个文件的内容，然后呢有一个 g s， 对 吧？就这些内容，当然不是说让你把这些内容依次去看一遍啊，没有必要 我们直接调试问题就可以了，比如我们现在的情况不就是点击这个按钮过后产生的问题吗？对不对？所以说呢，我们只需要去调试这个按钮的点击事件就可以了。那么怎么来调试按钮的点击事件呢？其实我之前的一集短视频也说到过啊，具体怎么做非常简单，我们重新刷新一次， 呃，一个三，一个四，然后那么接下来找到这个按钮，你看是不是按钮找到了，在 element 选项卡里边找到按钮，找到按钮过后呢， 它下边有一个 event 成员 s， 表示这个按钮，它的事件有没有注册事件啊？有一个，对吧？有一个点击事件好，然后点这儿，它就可以跳转到这边，它点击事件所触发的函数位置，再来一次啊，这边过来，然后点这里的超链接点过去，你看它这里就会告诉你，哦，原来点击的时候呢，运行的是这个函数，你看是不是跳转到这个 source 选项卡了， 对，好，那么接下来怎么来调试呢？你要做的事情非常简单，你点击的时候不是运行到这个函数吗？那么我们就在这个函数的第一行位置打上一个断点， 断点的意思就是说，下一次啊，你运行到这个函数的这一行的时候，你给我停下来，不要再往前走了，我要仔细观察一下啊，你运行的过程中到底是哪一步出了问题？好，咱们来试一下啊，接下来我们点击一下这个按钮，好，点击，你看这个页面就停住了，然后到这边来，他就会一个高亮显示，表示说目前代码正在停在这个位置， 懂这意思吧？好，那么到了这个时候，你该怎么来观察程序的运行过程呢？接下来我们就需要用到这个版面了，在这个版面里边，上边这一行有一些控制按钮，通过这些按钮呢，就可以来操控一个代码的执行。具体怎么来操控，我们一个个说啊。首先是这个，这个玩意叫啥呢？这个玩意叫做 step over 啊， step over 啊，这个东西我该怎么翻译呢？我好像还不太好翻译啊，把它叫做跳跃吧，跳过，我翻译不出来啊。那么点这个按钮的作用是啥呢？就是让他赶快把这一行运行结束，我不管这一行掉了多少函数，我不管这一行做了哪些复杂的事情，我不管啊，你赶快把这一行运行结束， 就这个意思，跳到下一行代码。好，我们点击，你看这一行一下就运行结束了，跳到了下一行代码，那么这里说明啥？说明啥？他判定为假， 如果说你觉得它就应该判断为假，那么这一行就没问题，对吧？所以说这个 step over 呢，是一个比较粗略的调试，我先从宏观上定位到底是哪一行出了问题，目前看了这一行没问题，那么再看下一行，懂这意思吧？好，这是 step over， 那 么假设啊， 假设这一行你发现，哎，它不应该为 force 啊，它应该为初啊，那为什么没进去呢？是不是就不能这么粗略的调试啊，你就得回到这一行，再去看一下它为什么变成了 force。 当然我这里就应该为处啊，只是我说这个意思，就假设他这一行不符合你的预期，那么你是不是要精细化的去调试这一行，那具体又怎么做呢？我们这里重新刷新啊，重新刷新页面，然后呢， 我们再定到这一行啊，来，走好，现在我们假设啊，我们现在要观察这一行的具体的执行过程。你这里不是掉了一个函数吗？我想知道这个函数里边是咋做的？那么这个时候呢，就不能使用这个 step over 了，就要使用下一个，叫做 step in 啊，叫做 step into。 呃，我们把它叫做步进吧。啊？我不知道怎么翻译啊，就 step into， 它的意思呢，就是说你点它，它就会进入到这一行运行的函数里边去，那我们来点一下啊，点击你看就进到这里边去了，而这里边呢，是不是又在调其他的函数。如果说这个时候你再点击这个 step into 的 话，那么它就会进到这个函数， 懂了意思吧。啊，我们继续往后走啊， step into 那 这里就没有了啊，又回到这了啊，你看这个函数调用完了，然后运行这个函数了，是不是也可以进行 step into， 对 不对啊？这是这个啊，然后下一个呢，叫做 step out。 step out 这个表啥意思呢？就是有的时候我们会观察到，哎，这个函数好像也没啥问题啊，没啥问题，我就想 我后边代码我不想看了，看都不想看了，没啥问题，我就想直接赶快把这个函数运行结束，跳到上一个函数的位置，那么这个时候呢，就可以使用这个 step out， 咱们点一下试一下啊，点击你看，所以回到这了，这个函数立即运行结束了，又回到上一个位置了，懂这意思吧？好，就 step out。 下边这个呢，是跟一些异步有关系的啊，咱们这里不扯了啊，我们主要是再看一下，这个 叫做恢复执行。这个是啥意思呢？比方说我们举个例子啊，一开始呢，比方说我们端点呢，是打在这个位置的，我想观察这里，好，咱们重新刷新一次， 好停在这里，然后我观察到这里好像没啥问题了，我们这个时候呢，希望这个程序恢复直行，你不要再停了啊，你直接恢复直行，停到下一个断点的位置就可以了，或者就直接往后运行就结束了啊，比如说这里直接点击，那就结束了啊，你看最终出来的结果呢，还是不符合预期，对吧？那么还有种情况是啥呢？就是我们 点击过后呢，我们希望呢，跳到下一个断点，不管中间经过了多少代码，你给我跳到下个断点就行了，然后这里有个断点，好，咱们再点一下这个点击，你看是不是后边的代码就直接执行完，然后停在下一个断点的位置啊，这也是个非常常用的调试技巧，所以说你要学习正儿八经的知识呢，你就好好来看我的大师课，大师课不要幺九八，不要九十八，啥也不要，免费的啊，来领取玩耍了， 我要提醒你啊，你看过之后呢，你可能你之前学过的很多知识，你会感觉到有松动，而不是我可以搞松动的啊，所以这些知识呢，原本就是松动的，只是呢，你自己不知道而已。正是因为这些不牢靠的知识，造成了你现在薪资无法提升、职业发展受限， 就业困难等等一系列的现象。这些现象没有那么复杂，就是这些核心知识没搞定。如果说你感觉自己竞争力不够，学习新技术困难，薪资涨不动，甚至还减少，那么大师课就一定能够帮到你，你花几天时间认认真真把它学完，里边的技术内容一定会让你对前端有一个崭新的认知。 所以呢，不建议大伙每天漫无目的的瞎努力了啊，找准发力的方向更重要。快乐课呢，目前可以免费领啊，怎么领？在咱们账号主页，点击头像进入账号主页，根据提示领取。完事了啊，回过来啊，我们继续往后边调试啊，比方说前面都没啥问题，那么到这个函数啊，看一下这个函数有没有什么问题呢？然后我们可以用 step into， 是 吧，进到这个函数里边去啊，进到这个函数里边过后呢，咱们会观察到啊，第四个区域啊，它可以显示啥呢？目前的上下文里边的所有可用的东西，比方说当前它的局部变量有三个局部变量，然后呢，它的全变量呢，还有这么一些， 那么在这里呢，可以仔细观察，比方说这里啊，我们就 step over， 哎，这个 a， d， d， and 一 是不是变成三了，而且呢，我们还可以在这里啊添加一个观察的表达式， 把这删掉啊，重新来， a， d， d and 一 加上 a， d， d and 二回车，你看一下，目前这个表达式的结果呢，是三 on defend 好， 我们接着往后运行啊，跳啊，是不是这行运行完，然后运行完过后呢，表达式的结果，看看是不是变了，对吧，可以便于你观察啊，而且呢，我们也可以打开一个抽屉，按 esc 弹出一个抽屉啊，在这里呢，选那种选项卡。在这里呢，也可以观察到哪些局部变量，对吧， a， d， d， and， r 也可以观察到，非常的方便，然后其中调到这呢，朋友们都已经清楚了，是吧，因为这两个玩意呢是字不串，所以呢，它相加的结果一定是不正确的啊，我们继续往后运行看一下，你看相加的结果就变成这个了，所以可以看得非常非常清楚。 因此呢，我们使用这些调试工具啊，就浏览器现成的调试工具，可以极大的方便我们定位到错误的原因，不要去你的元旦码里边去看了啊，看不清楚的。

今天我来介绍一下 input 主键的使用方法。首先同样的添加一个格式化，然后下拉找到 input 这个主键， 现在我要控制这个 plc 的 压力 sp， 我 首先复制这个变量，连接到这里，现在是显示五了，然后我点一下它九十九，它这值就变了吧， 再点一下输入五百，这个值又变了，我可以多添加几个，比如说再添加两个，一个是压力锐测， 还有一个是压力 abs， 这个值都是根据它 plc 的 值进行显示的，然后我可以这样去修改它， 当然我这边的 lab a、 lab b 都可以在右上右下方这里去修改的， 这里就变了， 都这样修改过去，然后我再添加一个布尔类类型，就这个 现在添加了四个，注意到这四个现在都是垂直分布的，然后我可以让他左右分布，比如说现在第一行这里第一行就表示现在只能放一个，如果放两个，他就这个样子，那第二行也放两个， 第一行放两个，第二行也放两个，它就是这种方式的，那我第一行放四个，它就都在同一行。 我还是回到最开始的，第一行放一个，第二行也放一个， 现在就这样子垂直分布。然后现在我要把第四个，因为它是布尔类型，我把它改成按钮，这里组建风格，选择减按钮，它就变成按钮形式了， 我现在按钮按一下，表示自位就变成一，现在是已经是一了，那我就选择复位， 点一下它，这里就复位了吧，然后再选择脉冲，脉冲的意思就是发送两秒钟为一，两秒后为零这样子， 然后还有按住是一，松开是零，按住五百毫秒后松开它就起作用，然后看到右边还有按钮的颜色，可以这样修改。 然后这里有个反馈颜色的意思是如果选择反馈颜色是绿色，等一下这个只变成一的时候，他这个按钮就不会变成绿色， 这样我可以，我刚才为了展示这个函数，我可以再把其他几个都改成这种按钮形式。 现在四个按钮是在同一列，那我可以让第一行就这一行放置四个， 那就四个放在一起了，那我如果第一行放置两个，他就两个放在一起，第二行第二行我可以也是放置两个，就这样子， 它不像这个 svgda data， 这个可以自由移动，因为这个插件是可以自由移动的。比如说这个按钮是可以自由移动， 但是这个是不能自由移动，它是在这里面健全编辑的就是函数，这表示第一行的个数， 这表示第二行的个数。保存一下，然后这几个文字都进行修改。

今天我们来搭建 s r bot， 首先打开 s r bot 的 官网，然后点击快速开启，并选择社区部署方式，然后来到我们的官网 w e e y j s c n 选择服务器特惠，我们使用香港特惠银作为延续 系统，选择乌班图二十点零四一杠 x 六零。然后我们打开宝塔面板的官网 bgm 安装一下宝塔这边安装好就不解释了，直接打开我们安装好的宝塔面板， 回到 s 二八官网文档页面，复制好 lina， 一 键安丘命令，然后回到宝塔终端复制进去，这边已经安丘好了，就不过多展示了。再次回到安丘文档，选择 one 八 v 一 一展开，选择 napcat， 打开它的文档，并选择需要安丘方式往下滑复制一下通用安丘， 回到宝卡终端进行粘贴，回去安装。这里已经安装好了，不过多展现输入 netcat， 打开面板，通过向下键进行选择，请求安装好它。需要手动配置降号，这边已经配置好了，直接选择启动 扫码登录一下，使用向下左右键进行选择，配置 netcat 的 降号服务， 然后选择 windows 客户端，反向 w s， 如图这样子配置 u r l 后面还需多加一个 w s。 打开 s r box 面板，出席端口为六一八五， 点击机器人，添加机器人，选择 one by token， 就是 刚刚你写的，如果你改了端口也要相应改成那个端口， 点击保存确定即可。这样子就连上了 s t r box 安装教程到此结束，剩余的文档都会有奖，下期视频再见！

大家好，今天开始我们逐步建立外部项目开发工具箱，只有工具箱的工具好用，项目开发才能快速顺利。 工具箱的工具既可能是一个应用，也可能是一个类，一个包含公墨函数的模块、一个代码模板或一个协议文档。无论是什么，只要能提高开发效率，我们就要收集起来，放到我们的工具箱中，方便在开发时使用。 今天这节课我们就建设工具箱模块，并开发第一个工具。运行 c 口语句返回记录。 我们回顾一下项目主要有四个部分的路由，其中一个是我们的工具箱，其路由指向是项目中的 views 下的 v w two box。 点 v o e。 页面， 我们回到编辑软件，打开 s r c 下的 views 下的 v w two box 的 v o e。 文件，目前页面只添加了标题头，我们看一下工具箱页面的布局，其主文件是 v w two box 的 v o e。 其中分上下两个部分，上面是 c m header， 点 v u e。 标题栏，下面我们打算建设 dbshide content， 是 侧边栏菜单和内容面板， 内容面板可以很多，是根据菜单选择来显示。这节课我们就创建其中第一个 panel 面板， t b p n register。 点 v u e。 第一步，搭建框架，我们在 windows 文件夹中打开 two box 文件夹，并在其中新建一个 t p shared content。 点 v o e。 我 们暂时先不编辑此文件， 在 two box 文件夹下再建一个 panel 文件夹，并新建一个 t b p n run s q l。 点 v o e。 首先是引入部分，引入 i e f。 引入 c m content， 引入 c m rich editor。 这是我们开发的一个编辑工具，引入 f i d post。 在 template 模板部分，面板是 c m content 主键，然后是 div， 并按主键名设置类名，便于用户设置器使用。 里面是个页面分割，组建 split， 绑定一个分割比例模式 vertical 竖向布局，它包含两个 slot 叉槽，一个是名为 top， 上部，一个是 bottom， 下部 我们分别加上两个 div 类名分别为 top 和 bottom。 在 上面又分上中下三部分，上面是文字，请输入 circle 语句， 中间是一个我写的公共编辑组件 c m reach edit， 其绑定响应对象 c q s q l， 其 on input 事件处理程序式 hd edit input 下面是一个横向分布的区域类，名为 b t n s buttons， 其中有三个按钮，第一个名字为上一条，其里面在字前面加了一个图标，设置一个禁用属性 backweight disable 事件是 h d backweight。 第二个是下一条，后面是图标，同样设置了事件处理程序和禁用属性。 第三个是提交按钮，用 magicleft 设置为自动，使其又对齐其 click 事件为 hd submit 分 克条。下面添加两个组键，一个是用于显示代码的 p r e 标签，一个是指读表格 table， 用一个响应对象 is stream 来判断渲染哪个 p r e 标签用于显示 result stream， 而 table 主键用于显示表格查询结果。设置两个属性列， columns 和数据 data。 添加数项边框。回到 script 部分，添加主键，使用的数据均是 v o e 的 i e f。 响应类型 sprite 绑定分割比例默认为百分之五十 s q l 与 c m rich editor 组建绑定 index， 用于显示保存语句数组的顺序。 backwave disable 是 上一条按钮是否禁用的属性。 forwave disable 是 下一条按钮禁用属性。 restart 用于显示服务器返回非表数据，用于 p r e 表前。 restart rows 保存服务器返回的表格数据， 用于表格组建。 collims table 组建使用的列表信息，服务器返回数据后生成 is tree 是 渲染条件，如果为真，则显示 p r e 组建，假则渲染 table 表格组建。 下面三个是 java script 正常变量。 sql list 是 树组，用于临时保存 sql 语句。 sql index 是 sql list 树组的，所以 it's new 是 当前 sql list。 是 否保存在 sql list 树组中，没有保存则为真。 我们还要在两个按钮后面添加一个用于显示 sql 语句树组位置的标签，下面是一个函数。 set disable 是 根据 sql list 树组长度和其缩影位置设置上一条下一条按钮是否禁用。同时设置当前 sql 语句的位置的 r e f 对 象。 index string 首先取消两个按钮的禁用判断，如果数组为空时，全部禁用。如果缩影已到最上面，则上一条按钮禁用。 如果缩影已到最下面，则下一条按钮禁用。设置显示缩影位置 i e f 对 象。因为有一条没有保存到数组记录当中，所以总数加一， 没有保存的记录用星号表示。下面是文本录入框 input 事件，如果有内容，取消下一条按钮的禁用。上面是上一条按钮 click 事件处理程序， 如果不是新记录，将当前内容保存入数值当前位置。如果文本框中有内容，切为新记录。将文本框中的内容添加到数值中，缩影简易，从数值中提取数据显示到文本框中设置 is new 为假， 说明已经保存。调用 set disable 函数，设置按钮是否禁用和位置信息。 下面是按下一条按钮的 click 事件处理程序。如果不是新内容，则将文本框中的内容保存在数组当中。数组位置缩影加一， 如果缩影值大于数组长度，将当前内容添加到数组当中。将文本框内容清空，设置当前为新记录。如果缩影值等于数组长度，将文本框内容清空，设置当前为新记录。 除了上面情况，就是下一条在数组中有记录，将其显示在文本框中。调用 set disable 函数设置按钮是否禁用和未知信息。下面是提交按钮的，可立即见处理程序。 调用 fidpos 函数，用 http 重新协议提交 c 口语句。我们这个函数支持 ief 响应式对象。 如果返回内容，则判断内容是否为自复创，是则用 p r e 标签显示。 设置渲染条件以 straight 为真，这时会显示 p r e 标签，否则设置表格数据。清除列信息树组中的原来内容，建立表格数据第一行的所有属性，添加到列树组中。设置渲染条件，显示 table 组键。 如果返回的内容没有 r， 这是错误信息。将错误信息转成用户可以理解的文字。其中 error message r 定义在 u 头下的 error message 的 gs 文件中，我们看一下， 其就是一个述阻，便于查阅和更新。回到 ve 模块，我们将渲染条件设置为帧， stream 为帧，这时会显示 p r e 标签。我们看一下组建的摄像表， 那么这个组建就开发完成了。这节课就到这里，下节课我们讲解这个组建面板的容器 t b shared content 点 v o e 的 开发，并最终部署到我们的工具箱页面，我们就到这里，再见。

大家有没有想过把自己精心制作的 qgs 地图直接变成这种可交互式的网页版地图呢？而且全程不用写复杂代码，不用配置服务器，简单几步就能轻松搞定。今天我就给大家安利一款 qgs 插件 qgs 二 web， 它能满足你刚才所有的期待。 前几期视频里，我们曾用 imap extension 插件制作了 g 三三一国道吉林段自驾游路书还未图经典图层分别通过一对一、一对多的方式批量添加了图片附件。今天我就以这份数据为实操案例，一步步演示如何用 qgs 二 web 插件生成网页版路书地图， 并部署到 git app 上，实现在线访问。另外，图文教程和演示项目的在线访问地址我都整理在 gis 学习充电站的文章里了，大家自行查阅。 首先，咱们先看插件的安装方法，打开 qgs 后，点击顶部菜单栏的插件选择、管理并安装插件。在弹出的窗口里搜索框直接输入 kgs 二 web， 找到插件后，点击安装插件就可以了。 安装成功后，我们在顶部的 web 菜单里能找到它，工具栏也会出现这个插件的专属图标。 正式操作前，咱们先简单认识一下它的配置界面，点击插件图标会弹出配置对话框，对话框的左侧是配置区，右侧是实时预览区。在配置区修改任何参数后，点击左侧下方的 update preview 更新预览按钮，右侧就能实时看到修改后的效果。 再看左侧上方有五个功能选项卡，分别是图层与图层组配置、外观定制导出设置、插件基础设置和官方文档，每个选项卡对应不同的功能，后续我们再详细讲解。 左侧最下方有两个可选的 web g i s 框架，大家可以根据需求选择。 open layers 是 全能型的，功能齐全，样式还原度高。 leaf 是 清亮型的，加载速度快，更加适配移动端 所有配置。完成后，点击 export 导出按钮，就能生成网页地图文件了。整体操作很简单，熟悉完界面，咱们先做数据准备工作，有几个注意点，我这里已经准备好点、线、面三种图层，还有高德史量和卫星影像地图。 第一，图层整理，我们只保留需要导出的图层，同时把图层名称修改得清晰易懂，方便后续在网页地图中阅读。也可以把相关图层编成图层组，网页地图里会同步以组的形式展示，更加规整。 第二，字段整理。打开阅览可以看到吉林省面图层无法正常显示，原因就是这个图层里包含了列表、 json 等复杂类型的字段， 这时候我们需要把这些复杂字段隐藏或删除就可以。隐藏的方法很简单，把字段的控件类型设为隐藏即可。 设置完成后，再更新预览，就能看到该图层正常显示了。另外，插件会优先显示字段的别名，为了让网页地图的用户看得更清楚，咱们可以给各个字段设置简洁易懂的别名。 第三，矢量样式和标签设置。这里要注意 case 二 web 对 复杂样式的支持有限，它支持的矢量图层样式有单一符号、分类符号、渐变符号，还有 svg 标记。 支持的标签样式主要是字体大小、颜色、描边等简单样式，我们在 q g i s 里提前设置好这些样式，插件会精准复刻同步到网页地图中。 第四，附件自断的处理插件支持图像、音频、视频等附件类型，保出后能在要素的弹窗里直接展示，非常实用。工程里的途径点图层在前几期视频里，已经通过一对一、一对多的方式批量添加了图片附件，接下来就分别说说这两种情况的处理方法。 先看一对一的图片附件处理起来很简单，我们只要把字段控件类型设为附件，字段值填写图片路径导出的时候，插件会自动把图片复制到导出文件夹里，后续打包、迁移都很方便，不用手动调整路径。 再看一对多的图片附件，这个会稍微复杂一点，因为一对多的图片是通过附件表存储图片路径的，而网页地图只能显示点图层的字段值，所以我们需要用字段计算器 把要素关联的所有图片路径以 html 代码的形式写入到点图层的对应字段中。大家直接复制我文章里的代码，粘贴到字段表达式里就可以。这里有个小提醒，这种方式不像一对一那样，图片会同步导出， 它的路径还是指向本地文件夹，所以如果部署到 git 上，图片会无法显示。实际使用中，大家可以用阿里云 o s s 来管理这些附件，具体方法我会在下期视频里详细讲解。 数据准备好之后，就到了核心的导出设置环节，每个选项卡的详细配置方法我都整理在文章里了，视频里我就挑重点演示， 打开插件的配置对话框。第一步，选择外部框架，这里我选择轻量型的 leaflet。 第二步，配置图层与图层组在 layers and groups 标签页中完成主要设置图层的交互和显示。 visible 可见性勾选后，该图层在网页地图初使加载时会默认显示，不勾选就默认隐藏，不影响图层正常加载。 popypass 弹窗勾选后点击图层要素会弹出它的属性。弹窗这里我把吉林省面要素的弹窗选项取消勾选，更新预览后再点击这个图层就不会显示弹窗了。 pop up fields 弹窗字段用于设置字段的显示形式，一共有六种类型，我这里把 free 的 字段设为 hidden 隐藏，其他字段设为 in line label always visible， 也就是字段名称和数据始终同行显示，大家可以看右侧的效果。 另外，把高德史量地图和卫星影像地图的 base map 选项勾选上，勾选后这两个图层会作为底图，以单选按钮的形式展示，用户可以自由切换底图样式。 第三步，外观定制切换到 appearance 外观标签页。首先设置 title 标题和 abstract 炸药，设置之前要确保工程项目中已经填写了这两项信息。我这里先简单设置一下， 标题和摘要的显示位置，我都选择右上角，大家也可以根据喜好调整。然后是交互工具的设置。 listlist 图层列表，控制图层列表的显示状态，我选择展开显示，方便用户查看和切换图层。 只要 lucky user 用户定位，勾选后，网页地图可以获取并显示用户的当前地理位置。 measure two 测量工具起用后，用户可以在网页地图上进行距离面积测量，我这里选择公制单位，更符合咱们的使用习惯。 layer search 图层搜索选择指定字段后，用户可以解锁该字段的内容，并快速定位到对应的要素。我这里以图经典字段为例。不过这里有个小 bug， 输入内容后需要按一下 a、 l、 t 键才能显示待选选项，有知道原因的小伙伴可以在评论区留言解答一下。 show pop ups on hover 鼠标悬浮显示弹窗勾选后，鼠标悬浮在图层要素上时，会自动弹出属性弹窗，但无法固定弹窗，这里我就不勾选了。 highlight on hover 鼠标悬浮高亮勾选后，鼠标悬浮在图层要素上时，要素会自动高亮显示，更容易识别其他选项。主要是控制组件布局和显示范围的，大家可以自己动手尝试，根据自己的地图需求调整就好。 第四步，导出配置优化切换到 export 导出标签页，主要设置导出相关的参数。 exporter 导出方式可以选择导出到本地文件夹，也可以直接上传到服务器，我这里保持默认导出到本地。 minify g o s o n files 压缩 g o s o n 文件，勾选后会自动压缩 g o s o n 文件的体积，让网页加载更快。 precision 几何精度数值越小，图形越简化，我这里选择不简化，保留地图的原始精度。所有配置都完成后，点击 export 导出按钮，导出成功后会自动打开网页地图预览， 在网址栏中显示的就是导出的文件夹的路径，进入这个文件夹，找到 index html 文件，双击就能打开网页地图预览了。文件夹里的其他文件都是配置和资源文件， 如果需要迁移，把整个文件夹压缩打包复制到其他电脑上，双击 index html 文件就能正常打开使用，非常方便。 接下来我们来看看如何把这个网页地图部署到 github 上，不花一分钱就能实现在线访问。第一步，把导出的所有文件全部上传到 github 仓库里，我这里已经上传完成了上传方法，大家可以在网上搜一下教程。 第二步，这一步非常关键，一定要记好，在仓库的根目录下新建一个名为 nojq 的 空文件。为什么要建这个文件呢？因为导出的一些文件名包含下划线，而 github pages 默认起用的 jacko 构建工具会忽略带有下划线的文件，导致网页无法正常显示。 新建这个文件就能禁用 jacko， 避免出现这个问题。这个坑我已经替大家踩过了，大家直接照做就行。 第三步，设置静态页面，进入 getup 仓库的 settings 设置页面，找到 pages 选项卡，在 branch 分 支里选择 main 分 支，点击 save 保存， 等待几分钟部署就完成了。刷新这个页面会出现一个在线访问地址，点击进去就能浏览网页版地图了，还能把这个地址分享给别人，是不是非常简单快简！ 好了，今天的 qjs 实操技巧就分享到这里，大家赶紧打开 qjs 跟着教程试一试吧，别忘了点赞、收藏、关注，后续我会分享更多 qjs 实操技巧。

啊，介绍一个性能分析工具啊，就是鼎鼎大名的 lighthouse， 通过这个工具呢可以分析一个站点它的各项性能指标，就你要做性能优化，你首先得知道性能出问题出在哪啊？你不知道出在哪，你咋优化呢？那么你要找问题的话，你可以利用这个工具啊来分析这个网站的性能。呃，你在使用这个工具的时候呢，你最好啊把这个调试控制台呢把它漂浮出来， 因为漂浮出来过后呢，它不影响原网页的整个适口大小这样子分析的结果呢？然后就开始点这个啊，页面分析等它完成啊 好，分析完了过后呢，下边它会有一个评分啊，就对这个整个站点的评分，目前这个 b 站还可以，是吧，八十九分不错了。然后这个评分里边你指它的时候呢，它会给你提供各种指标的得分，然后下边呢它会有一个综合的一个表格啊，那么它这里边会显示一些关键性的指标，什么 f c p 啊， l c p 啊， t p t 啊， c o s 啊这些东西。 那就接下来这个问题就是你得理解这些指标的含义，它到底啥意思？你含义不知道的话你不知道怎么去针对性的优化是吧？那么要理解含义呢，你得理解一个先决的概念叫做 web performance metrics 这个玩意呢，很多的教程里边会把它翻译成为 web 性能指标啊，但是呢我觉得这样翻译吧， 呃，还是离园艺有点距离啊，就是最好的理解方式呢，是把它翻译成 web 表现指标，因为这个性能吧，他一般来说会让人狭隘的把它理解成为一个时间段时间的快慢，但是呢，其实一个 web 网站啊，他的用户体验好不好， 他其实是有很多方面的啊，其中一个呢，是加载时间的东西，另一些层面呢，可能跟时间就没啥关系。比方说你这个站点 有没有发生那个界面的偏移啊？对吧？本来一开始看到的是这么一坨，然后呢，突然这坨跑下去了，又被从前面的一坨挤开了，就要做界面偏移。那么这些偏移呢，跟这个时间倒是没多少关系，但是呢，他也会涉及到用户体验的体感，是吧？所以把它翻译成表现指标呢，其实更合适。他的主要目的呢，他是为了去衡量用户体验的， 因为一个用户体验这个东西吧，他是非常主观的。你说这个网站体验不好，我觉得挺好的，听谁的呢？所以说一些搜索引擎呢，他就去监控了大量的网站， 然后看一下用户喜欢哪些类型的网站，然后得出来了一套能够衡量用户体验的这么一套模型。这个模型呢，叫做 rio 模型，这也是目前啊，能够被绝大多数网站所接受的一套衡量模型。 这个 rio 模型呢，它里边其实是由这个四个单词组成的，这个 r 呢，表示 response 啊，表示响应，响应时间，好理解吧，这个 a 呢，表示 animation， 它表示动画的流畅度，然后呢，这个 i 呢，表示 idol， 就是 你这个站点呢，有没有空闲？是不是一直在忙？因为我们知道浏览器呢，它是一个单线程的，是吧？它的渲染主程嘛，那 如果说你这个浏览器太忙的话，那可能用户那边交互的事件你就不能及时的去完成了，那么用户那边就会感觉到卡顿啊， iphone 的 事情，用浏览器是不是留够了足够的空闲时间来等待用户的交互，然后呢，这个 l 呢，表示 load 加载时间，那就包括了什么 dom 的 解析啊，对吧？ css 树的生成啊，布局的计算啊，这东西啊，就加载时间啊，这 real 模型呢，就通过这么四个方面啊，来衡量一个站点的一个综合的用户体验情况。不过呢，这个 real 模型啊，它也只是一个非常非常粗糙的模型，它只是提供了一个方向，就是衡量用户体验好不好，你应该从这四个方向去找到一些具体的指标，那我们真实的开发里边呢，可能衡量指标呢，更加细化一点啊， 那就涉及到刚才方我们看到的什么 f c p 啊， l c p 啊，像这些东西，那么这些具体的指标呢，其实也就是在对这个 real 模型的具体实现啊，具体的应用朋友们可以在这个网站上啊，可以找到那些常见的一些重要指标，我们这里看几个吧，比方说这个 f c p， 我 看一下这个指标啊，这个指标是一个非常非常重要的指标，像我们平时经常说的什么白屏啊，这些东西，其实白屏的时间有多长，大部分情况下都是指的这个指标，这个指标具体是什么含义，同学们可以去看一下这个文档啊，写的非常非常详细， 其实它简单来说的话，它其实就是表示的是用户首次导航到网页，在地址栏系里边输入地址，然后按下回车了，浏览器开始导航到网页了，然后到网页内容的任何部分呈现的时间啊，这个中文翻译的还是有那么一点。嗯，怎么说呢，不是那么准确啊，所以说尽量的还是要看英文原文最好。 原文的意思呢，就是说它从那个导航网页开始计时到什么时间点计时结束呢？到达的是第一个有意义的内容出现。计时结束， 那么这个有意义的内容那就包含东西多了，比方说你是一张图片，你是一个背景颜色，或者是你是啥都没有，但是呢，你有一首歌啊，有一段音乐出现了，声音出现了，也是内容，是吧？内容包含的面世比较广的，不过一般来说啊，就是网页上能够看到一些可见的东西了，但是实际上呢，像那些音乐啊，这些东西也是可以的啊， 那么这就是 f c p， 所以 它绝大部分时候呢，它是用来衡量白屏时间的，理解这意思吧。啊，这是第一个指标啊，看一下。好，咱们再看下一个指标。有人说这个，袁老师啊，你，我们学这个玩意平时好像也没用到啊，没用到就对了，你就是要学习没有用到的，你正儿八经的要在工作当中用到什么，再学什么的话，那你就永远逃不掉你的工作了，那基本上就车门焊死 焊死在你的岗位上了，咱们跳槽党心不就是对现在的岗位不满意吗？所以说我们要学的永远不是当前岗位需要你学习的东西。实际上啊，当前岗位不需要你学习啥，你就算啥也不学，你当前岗位干了这么多年了，你也能干？不是说干不了，咱 们学习这些东西不就是为了逃避这个岗位吗？所以说你正儿八经的要学习重要的知识的话，那就一定要好好来看我的大师课。大师课是完全免费的啊，来就完事了。大师课其实就是专门来解决这个问题的，你不是不知道学啥吗？大师课告诉你你应该学啥， 你不是不知道该学多深吗？那大师课里面讲的所有知识都在告诉你，就应该学这么深，学这么深就对了。你不是不知道什么知识才是正确的，什么知识是错误的吗？大师课告诉你怎么样去判断一个知识它到底是正确的还是错误的。为什么袁老师讲的就一定是可信的？你看到你就明白了， 你要没见过这些东西的话，你永远不明。如果说你不想再搬砖了，想往更高层次发展，想往下沟方向发展，那么大彻的知识就是你的必修课。 如果说你对现在的薪资不满意，想要通过跳槽涨薪，那么大师课的知识也是你的必修课。如果说你现在正在离职当中，想快速的去找到一份工作，那么你就必须要对那些核心的比面试题有一个非常深入的理解，以及呢有一个精彩的回答，这样子呢，才能打造你的竞争优势。那么大师课也是你的必修课， 不管你在什么样的阶段啊，只要你对未来的发展还有追求的话，大师课就是你的必修课。那是个课呢，目前可以免费领啊。怎么领？在咱们账号主页，点击头像进入账号主页，点击提示领就完事了。 说回来啊，咱们再来看两个吧，那个 lcp， 呃，这个 lcp 又是啥呢？有兴趣的朋友可以去看一下详细的文档啊。他指的是啊页面中最大内容出现的时间，比 方说他这里举个例子啊，非常非常直观了，就我们这个界面里边最大的内容现在出现了吗？还没有出现。那现在出现了吗？还没有出现，出现了吗？还没有出现。哎，这个时候是最大内容出现了，最大的就是这个东西，最大内容就是字面意思就是用户能够看到的感官上最大的那种，因为这个模型呢，他觉得呢， 它用版面最大的内容呢，一定是最重要的内容，那么它要衡量一下这个时间啊，就 l c p， 然后再看一个 t b t 吧，看下这个玩意是啥啊？这个玩意呢衡量的是 加载时间，它是从 f c p 这个时间开始计时， f c p 就是 首次内容位置是吧？就第一个有意义的内容出现了，从这个 f c p 的 位置呢开始计时，然后到什么时候结束呢？到达用户能够跟这个网页交互的时候。结 元素，因为一开始一段需要做的事情很多，是吧？要解析多元素生成多位数生成小数，一大堆事情要做，他有很多的任务要去执行，中间还可能包含你自己写的 gs 代码要执行。他很忙的，没有时间来处理，点击按钮啊，那些各种交互一段点了他也没法立即处理你的回调函数，他太忙了，说等他忙完了过后，他才能够处理你后边的东西，那么这个东西就衡量的是他忙了多久， 同时呢，它也就意味着你要等待多少时间才能够跟这个网页进行交互啊，就这么个意思。然后呢，再看一下这个 c l s 吧，这个表示的是布局偏移啊，这个布局偏移呢，是一个得分，它不是一个时间啊，就是我刚才说的，它不一定是性能问题，它也是一个体验问题。 这里有一个非常直观的这么一个小视频啊，来介绍这个布局偏移会给人带来多大的困扰，这哥们呢，本来想取消订单的，本来想点这个的， 结果呢，他一点的时候呢，刚好布局偏移了，他点到他提交订单了，他东西就买了，是吧，他疯狂的让你取消，他取消不掉了啊，就这么个意思，就是有的时候呢，像一些网站啊或者 app 啊，他布局偏移的时候呢，经常会造成这样的一个困惑困扰啊，这是一个布局偏移的指标啊，平时呢，我们主要的关注呢，就是这么一些指标啊，那么我们可以通过这个 nice house 呢，能够得到这些指标，就这么个意思。不 过呢，这里也要说一点啊，就是个 nice house 呢，你也不能完全的去依赖它，因为这个玩意吧，它是在一个实验室环境里边进行的，所以它 得到的指标呢，是一个实验室的指标。啥意思呢？因为这是在我开发人员的本地运行的浏览器插件，它是在开发人员的电脑配置，开发人员的网速，开发人员的操作系统，开发人员的浏览器版本里边衡量出来的指标，所以把它叫做实验室指标，它并不代表用户那边也是一样的情况啊， 用户里边无论是配置也好啊，操作系统版本也好啊，还有浏览器的版本类型是不是都有差异？所以说如果说你要衡量用户指标的话，那就不能用什么浏览器插件了啊，那就应该使用那个服务监控，在服务监控里边去进行数据买点，对吧？来去完成用户指标的收集。 那这一块呢？实现方式呢？就可以使用什么 performance api， 对 吧？你要自己写的话就用这套 api， 然后你也可以用一些现成的啊，像什么 web 啊，维托斯啊这些东西啊，那就涉及到服务监控和数据买点了啊，就展开说了啊，大体上就是这么回事儿。

好，那咱们今天记录一下咱们 transform 关于三 d 几何变换相关的这个知识点。那咱们之前学的是关于二 d 的， 也就只有 x 轴和 y 轴，那我在这里打开了一个 cad， 我 首先给咱们看一下俯视图，那咱们正常的情况下就只有两个轴，横向的是 x 轴，横向的是 y 轴。那如果说咱们使用三 d 模式的话，那它就多了一个 z 轴， 咱们这个绿色，绿色的就是咱们的 y 轴，红色的就是咱们的 x 轴，这个青色的呢就是咱们的 z 轴。那咱们的传输链 3 d 就 可以实现让咱们的元素在 x 轴， y 轴， z 轴上同时进行平移的一个功能。那在这里给大家演示一下， 还是使用传输 form， 然后传输 date 三 d， 然后在 x 轴上咱们平移一百 p x， y 轴上平移二百 p x， z 轴上平移三百 p x。 那 咱们现在去页面去看一下，刷新，然后鼠标放上去，但是大家可以看得到这里呢，它只有 x 轴和 y 轴上，动了的 z 轴上，咱们没有看到任何效果，那这是因为咱们没有开启这个视距的问题，这个视距就是这个 pospec t 五， 咱们把它添加上这个视距呢，它是设置透视距离，影响三 d 元素的视觉深度，定义观察者到 z， 也就是说咱们人眼到电脑屏幕的这个距离。 然后呢使这个三 d 变换呢呈现径大圆小的一个透视感，它的单位呢是 p x， 不 支持百分比。那这个四句呢，必须设给咱们的复原书，而且必须是咱们的直接复原书， 那我在这里把它设置给它的复原数格式派克 t 五，然后我给他一千 p x， 然后咱们现在去页面去看一下刷新，然后我把鼠标放上去，看到了吧？它有 x 轴外轴平移的效果，也有一个放大的一个效果。当然如果咱们给它复数的话，它会有一个缩小的效果， 刷新看到吗？他就缩小了，然后咱们这个 perspective 的 值不宜给他设置太小或太大，比如说我现在给他一百，然后把 z 轴上变成正数 刷新，看到吗？他这个元素就突然呼到咱们脸上了， 那所以说咱们正确的取值一般是，呃， 在一千左右，那如果太大的话，他的效果也看着不会太明显，那咱们再去看一下，现在是一万，看到了吗？好像就没有效果一样的好截图保存。