一、事件 在了解什么是js中的事件流之前，我们先了解一下什么是js的事件。...依次触发其祖先节点的同类型事件，直到DOM根节点 事件捕获 当节点事件被触发时，会从DOM根节点开始，依次触发其子孙节点的同类型事件，直到当前节点自身。...addEventListener()冒泡演示 还是同样的代码，只是这里我们将addEventListener()的最后一个参数改为false,将执行过程设置为冒泡。...如果我们给每个都绑定事件，会极大的影响页面性能，这个时候我们就可以使用事件委托来进行优化。...动态监听:使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
如果你还没有听说过face-api.js，我建议你先阅读介绍文章再回来阅读本文。 和往常一样，本文中为你准备了一个代码示例。...每个阶段通过将其输入通过CNN逐步改善检测结果，CNN返回具有其分数的候选边界框，然后是非最大抑制。...在第2阶段和第3阶段，我们为每个边界框提取图像块并调整它们的大小（第2阶段为24×24，第3 阶段为48×48），然后通过该阶段的CNN传递它们。...此外，我将一个绝对定位的画布放在视频元素的顶部，具有相同的高度和宽度。...在我们为视频元素指定的onPlay回调中，我们将处理每个帧的实际加工。注意，一旦视频开始播放，就会触发onplay事件。 人脸检测 正如我所说，我们可以在这里配置一些检测参数。
其实，我们可以看作是前端发get请求，服务端响应文档是js文件，而且这个文件只有一行代码：callback（data）。当然你可以写很多代码，不过一般没见过有人这么干。 2....需要注意的点： 有一些 DOM 元素对应多个可视化对象。它们往往是具有复杂结构的元素，无法用单一的矩形来描述。...根呈现器的位置左边是 0,0，其尺寸为视口。layout过程计算一个元素绝对的位置和尺寸。Layout计算的是布局位置信息。任何有可能改变元素位置或大小的样式都会触发这个Layout事件。...由于元素相覆盖，相互影响，稍有不慎的操作就有可能导致一次自上而下的布局计算。所以我们在进行元素操作的时候要一再小心尽量避免修改这些重新布局的属性。...因为每个页面元素都有一个独立的渲染进程，包含了主线程和合成线程，主线程负责js的执行、CSS样式计算、计算Layout、将页面元素绘制成位图(Paint)、发送位图给合成线程。
同理于调用 event.preventDefault() 方法 .self 该指令只当事件是从事件绑定的元素本身触发时才触发回调 .once 该修饰符表示绑定的事件只会被触发一次 25.v-for key...如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。...为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。...如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。...的体积，在调用 某个组件时再加载对应的js文件； 3.加一个首屏loading图，提升用户体验； 37.Vue 改变数组触发视图更新 以下方法调用会改变原始数组：push(), pop(), shift
HTML、CSS相关 垂直水平居中 由于父相子绝。...BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素（格式化上下文） 通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部...触发BFC的方式: overflow 浮动 绝对定位、固定定位 display 为 inline-block、table-cells、flex BFC应用：清除浮动带来的影响（让受影响的元素触发BFC）...触发： 1.添加或者删除可见的DOM元素 2.元素尺寸改变——边距、填充、边框、宽度和高度 重绘 : 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘...position：absolute或fixed元素，对其他元素影响不大 ········· JS相关 JS数据类型： js数据类型分为基本数据类型和引用数据类型 基本数据类型（值类型）: 字符串
绑定了一个名为className的data属性，这个属性的值为'red'，所以元素会被添加一个class属性，值为'red'。...需要注意的是，v-if是惰性的，只有当条件为真时才会渲染元素，否则不会渲染。而v-show则是直接控制元素的显示和隐藏，不管条件是否为真，元素都会被渲染，只是样式被设置为display: none。...需要注意的是，每个v-for都需要指定一个唯一的key属性，用来标识每个元素的唯一性，以便在更新时能够正确地识别每个元素。...如果重复了，会导致Vue无法正确地识别每个组件或元素的状态，从而导致渲染错误。 vue3 事件处理 在Vue3中，事件处理的方式与Vue2相似，可以使用@或v-on指令来绑定事件。...} } } 上面的代码中，使用.stop修饰符来阻止事件冒泡，当div元素被点击时，不会触发其父元素的点击事件。
向元素添加样式，且该元素是它的父元素的唯一子元素 :first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素 :last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个...元素 :nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素 :nth-last-of-type(n) 向元素添加样式，且该元素是同级同类型元素中倒数第...每个实例对象(Object)都有一个私有属性，为__proto__指向它的构造函数的原型对象(prototype)。...prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置到另一个、指定的元素集合中 外部插入 after() 在每个匹配的元素之后插入内容 before() 在每个匹配的元素之前插入内容...webpack支持CommonJS、AMD和ES6模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能压缩图片，对CSS、js文件进行语法检查、压缩、编译打包
以LINE为代表的一系列NRL算法一些网络上具有很好地学习效果，但它们并不能很好地捕捉到远距离节点之间的关系。...输入这样一个网络，NLR会为网路中的每个节点学习一个低维向量表示（图例中是2维向量），使得相似的节点（例如相同类别的论文）之间距离较近，不相似的节点（例如不同类别的论文）之间的距离较远。...以LINE为代表的一系列NRL算法一些网络上具有很好地学习效果，但它们并不能很好地捕捉到远距离节点之间的关系。如果两个节点v0和v1相邻，我们说v0和v1之间的step为1。...如果v0和v1不直接相邻，而是通过v2相邻，即存在路径v0->v2->v1，v0和v1之间的step为2。...D是网路节点的出度矩阵，如下图所示，D是一个对角矩阵，对角线上的第i个元素表示第i个节点的出度。 ?
例如，我们有一个首页叫做 index，则需要在 pages 文件夹下创建文件名相同的三个必要文件： index.wxml index.wxss index.js 另外 index.json 文件为可选，...比如， 平级标签 A 与 B，当 B 通过某些调整向 A 元素位置相叠的时候，微信 IDE 解析出的效果是 A 的内容和背景色会覆盖 B 元素与之重叠的部分（普通浏览器解析应该是 B 覆盖 A）； 如果用模板...可以直观地看出，就是 for 循环用重复的结构渲染一组数据： for="{{}}" 中的内容是想要循环的一组数据，最外层为数组结构 for-item 指定数组中当前元素的变量名 for-index 指定数组中当前元素下标变量名...实例 WXML 代码： JS 代码： 由于微信不支持使用 DOM 访问对象，也就是不支持 dom 和 window 对象，所以 tabbar 的实现依赖于微信提供的视图层的展示逻辑，以及视图与数据之间的绑定机制...轮播图 以下是实现的 WXML 代码： JS 代码： 轮播图的实现使用的是微信提供的 swiper 组件，该组件贴心的提供了各种属性选择，常用的包括 autoplay、interval 时间 duration
废话不多说直接上干货 1.js运行机制 JavaScript 单线程，任务需要排队执行 同步任务进入主线程排队，异步任务进入事件队列排队等待被推入主线程执行 定时器的延迟时间为 0 并不是立刻执行，只是代表相比于其他定时器更早的被执行...以宏任务和微任务进一步理解js执行机制 整段代码作为宏任务开始执行，执行过程中宏任务和微任务进入相应的队列中 整段代码执行结束，看微任务队列中是否有任务等待执行，如果有则执行所有的微任务，直到微任务队列中的任务执行完毕...当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上； 从具体的元素到不确定的元素。...从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。...它们使得那些艰难的任务不再让人望而生畏。 6.react diff 原理（常考，大厂必考） 把树形结构按照层级分解，只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性，方便比较。
我们会从两者的框架基本特征入手。 Angular Angular 是由 Google 提供支持的一种前端框架，它能够与大多数常用的代码编辑器相兼容，它属于 MEAN stack 的一部分。...React 需要通过多种集成和各种支持工具才能运行： Redux：是一种状态容器，它可以加速 React 在大型应用中的运行，能够管理具有多种动态元素的应用组件，还可以被用于渲染。...与 Angular 不同的是：在 React 中，您无法使用单个工具去测试整个应用，而必须使用不同的工具进行不同类型的测试。...可见，此类数据绑定使得代码更为稳定，当然也需要通过额外的作业来同步对应的模型与视图。毕竟，由于子组件变更所触发的父组件配置的更新，需要更多的时间。...NativeScript 背后的理念是：为移动设备编写单个 UI，并根据具体的需求为每个平台进行微调。
从这个版本开始，jQuery的性能达到了Prototype、Mootools以及 Dojo等同类JavaScript库的水平。...同时通过jQuery获得id对应的元素后可以调用jQuery中的相应方法对该元素进行操作，具体代码如下所示： <script type="text/javascript" src="<em>js</em>/jquery-...() //<em>每个</em>p节点<em>的</em>父节点 $("p").parents() //每个p节点的所有祖先节点,body,html $("#node").parentsUntil("#node2") //id为"#node...).ready(function(){ 您的代码... }); //缩写 $(function($) { 您的代码... }); 4.18、绑定事件 //bind 为每个匹配节点绑定事件处理函数...每个转换器的值是一个函数，返回响应的转化值 crossDomain map 默认： 同域请求为false 跨域请求为true如果你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为
如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。...如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。...Vue2.x 中的响应式实现正是基于 defineProperty 中的 descriptor，对 data 中的属性做了遍 历 + 递归，为每个属性设置了 getter、setter。...Vue.js 3.0 优化了 slot 的生成，使得非动态 slot 中属性的更新只会触发子组件的更新。...v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件。
，底层使用操作系统的用户接口 JS 解释器 (JavaScript engine)：用来解释执行JS代码 数据存储 (Data persistence)： 属于持久层，浏览器需要在硬盘中保存类似 cookie...基本上，每个元素都表示为所有元素的父节点，这些元素直接包含在元素中。 构建 CSSOM CSSOM 指的是 CSS 对象模型。...布局是一个递归过程 - 它从根渲染器开始，它对应于 HTML 文档的 元素。 布局以递归方式继续通过部件或整个渲染器层次结构，为每个需要它的渲染器计算几何信息。...根渲染器的位置为0,0，其尺寸与浏览器窗口的可见部分(即viewport)的大小相同。开始布局过程意味着给每个节点在屏幕上应该出现的确切坐标。...绘图 —— 这是实际像素被填充的地方，这个过程包括绘制文本、颜色、图像、边框、阴影等——每个元素的每个可视部分。
使用 cutting-the-mustard 技术 使用 cutting-the-mustard 技术能够实现不同类型的浏览器载入不同类型的资源(传统浏览器载入核心型资源，现代浏览器载入增强型资源)。...，浏览器再通过少量的 JS 代码就可以让交互时间接近于首次有效渲染时间。...如果 JavaScript 代码需要存取 DOM 元素，即必须在主线程上运行，那么可以考虑批处理的方式，把任务细分为若干个小任务，每个小任务耗时很少，各自放在一个 requestAnimationFrame...，因为这种方式建议对每个DOM元素都只使用一个样式class。...效果，不会触发 layout 和 paint 对于诸如 fixed 的合成层，移动时不会触发 repaint 提升动画效果的元素 合成层的好处是不会影响到其他元素的绘制，因此，为了减少动画元素对其他元素的影响
Vue2框架通过深度递归遍历新旧两个虚拟DOM树，并比较每个节点上的每个属性，来确定实际DOM的哪些部分需要更新，由于现代JavaScript引擎执行的高级优化，这种有点暴力的算法通常非常快速，但是DOM...第三，在元素级别，编译器还根据需要执行的更新类型，为每个具有动态绑定的元素生成一个优化标志，例如具有动态类绑定和许多静态属性的元素将收到一个标志，提示只需要进行类检查，运行时将获取这些提示并采用专用的快速路径...TypeScript的支持 Vue2中使用的都是Js，其本身并没有类型系统这个概念，现如今TypeScript异常火爆，对于规模很大的项目，没有类型声明，后期维护和代码的阅读都是头疼的事情，虽然Vue2...非兼容变更 Vue3相对于Vue2的非兼容的变更概括，详情可以查阅https://v3.cn.vuejs.org/guide/migration/introduction.html。...当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则需要指定deep选项。
的运行机制是什么 js是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。...枚举：用于取值被限定在一定范围内的场景 Mixin：可以接受任意类型的值 泛型编程：写代码时使用一些以后才指定的类型 名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突 元组：元组合并了不同类型的对象...，相当于一个可以装不同类型数据的数组 用TS实现的比较复杂的类型 ts常见复杂类型有object、数组、元组、枚举、普通对象 数组：使用[]定义，并明确指定数组元素的类型 let arrayOfNumber...页面修改了history，会触发popstate事件。触发时检测到url地址为刚进页面时的地址，就再pushState那个#hash。 浏览历史记录中会始终留下一个页面，后退按钮失效。...，并且引用相关的js文件时加上 crossorigin 属性 window.addEventListener: 资源加载失败，加载资源的元素会触发Event接口中的error事件，并执行该元素上的onerror
涉及到的CSS3相关知识 3. 功能的实现思路 4. 具体的实现代码与解析 1. 效果展示 CSS3技术的出现为页面的效果层开发提供了大量的帮助，以其强大的功能与简单的语法深受开发者的追捧。...如下这个CSS3圆形风格的面包屑导航，在制作上就为开发者提供了除JS实现之外的思路。 ? 2. 涉及到的CSS3相关知识 2.1 CSS3选择器 主要功能是用于选择标签，有如下几个常用的选择器。...这种效果可以在鼠标悬停、鼠标单击、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。...具体的实现代码与解析 4.1 实现初始样式的制作 针对圆形导航的展示，不对li标签设置宽高，同时使用CSS3圆角处理每个子导航选项，书写上CSS3过渡的相应操作，具体代码如下： /*实现每个导航项的基本样式...借助标签的hover状态，在鼠标悬停到该导航项上时，导航项的大小变大，span标签的文字需要出现，具体代码如下： /*控制每个导航项中文本的出现*/ ul.breadcrumb li a .text
文档和元素的几何滚动 当浏览器在窗口中渲染文档时，它将会创建文档一个视觉表现层，在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。...获取表单元素的数组 document.forms.shipping.elements.method 即可 将会获取到表单的属性 表单和元素属性 js的对象支持两个方法，一个为submit()一个为reset...web服务器的字符串 表单和元素的事件处理程序 每个form元素都有一个onsubmit事件处理程序用来检测表单提交。...失去焦点触发blur事件 在事件处理程序代码中关键字this将会触发该事件的文档元素的一个引用，或者通过this.form.x得到该表单中以x命名的元素 事件总结 提交触发的事件 当用户单击按钮（或者回车的时候...提交和重置元素本就是按钮，不同的是它们有与之相关联的默认动作。 即，按钮和超链接类似，都具有共同的作用。 开关按钮 复选框和单选元素为开关按钮，或称之为有两种视觉状态的按钮。即选中或未选中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
