涵盖内容 1.熟悉css基本语法，以及css工作原理 2.熟练使用css selector 常规选择器class，id,元素，后代，通用，了解选择器的优先级 3.熟悉浮动，定位，盒模型，背景，字体，...mozilla开发者文档里是这样描述的： 浏览器在展现文档的时候，需要把文档内容和相应的样式信息结合起来展现。 浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。...）可选择紧接在另一元素后的元素，且二者有相同父元素。...紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。...以下实例选取了所有位于 元素后的第一个 元素: div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
函数 上述获取 DOM 元素的函数 , 需要根据不同的 CSS 选择器 , 使用不同的函数 ; 一、querySelector 函数 1、querySelector 函数简介 在 HTML5 中 ,...DOM API 推出了新的方法 querySelector 函数 , 可以在该函数参数中指定 " CSS 选择器 " , 函数返回匹配该选择器的第一个 DOM 元素 , 如果没有与之匹配的元素 , 返回...DOM 元素 , 类型是 Element 对象 ; CSS 选择器参考 : 【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★ querySelector...的 DOM 元素 ; // 只获取 id 为 hello 的元素 ★ var element = document.querySelector('#hello'); 使用符合选择器 获取 ID 为 nav...对象会实时更新 , 如果其中的 DOM 元素发生了改变 , HTMLCollection 对象会马上进行更新 ; NodeList 对象 是静态的 , 在查询时就确定了元素的集合 , 并不会随着 DOM
3.样式表 另一方面，样式表有着不同的模型。理论上来说，应用样式表不会更改 DOM 树，因此似乎没有必要等待样式表并停止文档解析。但这涉及到一个问题，就是脚本在文档解析阶段会请求样式信息。...4.2 构建渲染树的流程 在 Firefox 中，系统会针对 DOM 更新注册展示层，作为侦听器。... 链接状态必须匹配 焦点状态必须匹配 任何元素都不应受属性选择器的影响，这里所说的“影响”是指在选择器中的任何位置有任何使用了属性选择器的选择器匹配 元素中不能有任何 inline 样式属性 ...2)特异性 选择器的特异性由 CSS2 规范定义如下： 如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a) 记为选择器中 ID 属性的个数 (= b) ...在增量绘制中，部分呈现器发生了更改，但是不会影响整个树。更改后的呈现器将其在屏幕上对应的矩形区域设为无效，这导致 OS 将其视为一块“dirty 区域”，并生成“paint”事件。
这些改变通常由以下事件触发： DOM操作（元素添加、删除、修改或者元素顺序的改变）； 内容变化，包括表单域内的文本改变； CSS属性的计算或改变； 添加或删除样式表； 更改“类”的属性； 浏览器窗口的操作...尽量简化和优化CSS选择器（这种优化方式几乎被使用CSS预处理器的开发者统一忽视了）将嵌套程度保持在最低水平。...以下是CSS选择器的性能排名（从最快者开始）： 识别器:#id 类:.class 标签：div 相邻兄弟选择器：a+i 父类选择器：ul>li 通用选择器：* 属性选择：input[type="text..."] 伪类和伪元素：a:hover 你应该记住，浏览器在处理选择器时依照从右到左的原则，因此最右端的选择器应该是最快的：#id或则.class： ?...如果你使用jQuery来选择元素，请遵从jQuery选择器最佳实践方案。 为了改变元素的样式，修改“类”的属性是奏效的方法之一。
为了更好的用户体验，渲染引擎将尽可能快地在屏幕上显示内容。它不会等到解析完所有 HTML 后才开始构建和布局渲染树，而是解析和显示部分内容，同时继续处理来自网络的其余内容项。...在渲染时，需要考虑 JavaScript 代码与页面 上DOM 素交互的方式。 JavaScript 可以在 UI中创建大量更改，尤其是在 SPA 中。...样式计算 — 这是根据匹配选择器确定哪个 CSS 规则适用于哪个元素的过程。 定义规则后，将应用它们并计算每个元素的最终样式。...优化你的 CSS 通过添加和删除元素，更改属性等来修改 DOM 将使浏览器重新计算元素样式，并且在许多情况下，重新计算整个页面的布局或至少部分布局。...要优化渲染，考虑以下事项： 减少选择器的复杂性，与构造样式本身的其他工作相比，选择器复杂性可以占用计算元素样式所需时间的50%以上。 * 减少必须进行样式计算的元素的数量。
important > 行内样式 > 嵌入样式/外链样式（比较同级后面会覆盖前面的）> ID选择器 > Class选择器/伪类选择器/属性选择器 > 标签选择器 > 通配符选择器 10、JS实现异步的方式...diff算法主要是在虚拟dom树发生改变后，生成dom树的一种更新方式。 通过对比他们之间的差异，将更新补丁直接作用在真实dom树上。以最小成本完成视图更新。...框架会将所有节点转化成vnode，在发生更改后将vnode和更改前oldnode比较，然后以vnode为基准，在oldnode上进行更改。 原本没有新版有则添加，反之，则删除。...为了立刻获取更新后DOM。 Vue中更新DOM是异步的，当数据发生变化后，vue会开启一个异步更新队列，队列中的所有数据更新完才会更新视图。 \$nextTick就解决了这个问题。...在每次组件更新时，react通过diff算法比较更新前和更新之后的dom节点，找到最小的有差异的dom位置并更新，花费最小的开销。
var domObject2 = $('div').get(0) 2.1 jQuery选择器 2.1.1 基础选择器 名称 用法 描述 ID选择器 $(’#id’) 获取指定ID的元素 全选选择器 $(...’*"’) 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器...$s(“Ii.current”) 交集元素 2.1.2 层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素 后代选择器...$(‘li:last’) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。...('属性名'); //更改 attr('属性名','属性值'); 4.1.3 数据缓存 data() 可以在指定的元素上存取数据，但不会修改DOM元素结构。
链接获取元素到jQuery对象 当使用CSS选择器调用jQuery函数时，它将返回一个包含与此选择器匹配的元素的jQuery对象。...检查.length属性是确保选择器成功匹配一个或多个元素的常用方法。 如果目标是仅选择第一个标题元素，则需要另一个步骤。有很多方法可以做到这一点，但最直接的就是.eq()功能。...链接不是所有的jQuery对象都被创建=== 关于这种“包装”行为的一个重要细节是每个包装的对象是唯一的。即使使用相同的选择器创建对象或包含对完全相同的DOM元素的引用，这一点也是如此。...包含在jQuery对象中的元素集将不会改变，除非明确修改。这意味着该集合不是“直播” - 它不会随着文档的更改而自动更新。...如果文档自创建jQuery对象以来可能已经更改，那么应该通过创建一个新的集合来更新该集合。它可以像重新运行同一个选择器一样简单： // Updating the selection.
绘制顺序 绘制的顺序其实就是元素进入堆栈样式上下文的顺序。这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。...此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。 布局。...2.JS / CSS > 样式 > 绘制 > 合成 如果修改了背景图片、文字颜色或阴影等不会影响页面布局的属性，则浏览器会跳过布局，但是后面的绘制以及后面的流程还是会执行的。...只有元素提升为合成层后，transform 和 opacity 才不会触发 paint，如果不是合成层，则其依然会触发 paint。...使用性能更高的选择器，如类选择器。同时可以选择性使用 BEM（块、元素、修饰符）规范。
解析完成后，就会生成有一个包含所有选择器、属性和属性各自值的数据结构。...(2)、对于选择器中给定的各个ID属性值，加 0，0，1，0，0 。 (3)、对于选择器中给定的各个类属性值、属性选择器或伪类，加 0，0，0，1，0 。...子元素继承祖先元素的样式根本没有特殊性，因此当出现这种情况后，通配符选择器定义的样式声明也要优先于子元素继承来的样式声明。因为就算特殊性是0，也比没有特殊性可言要强。...现在，浏览器找到与选择器匹配的所有 DOM 元素，并将得到的计算样式挂载到匹配的元素，在本例中 div 为类名为 .fancy-button： ?...然后浏览器按照文档顺序遍历较低层次的堆栈上下文(在本例中是“Item 2”)，并开始按照上面的规则绘制该元素。 ?
「CSS选择器用于选择DOM元素的子集，以对其添加指定的属性声明」。 ❝在处理CSS样式时，浏览器会解析CSS文件或内联样式，并将样式规则应用于DOM树中的相应元素。...CSS选择器用于选择要应用样式的目标元素。 选择器可以根据元素的标签名、类名、ID、属性等进行匹配，以确定应用哪些样式规则。 ❞ 这里多啰嗦几句，在CSS重点概念精讲中我们介绍过，选择器。...」选择元素的选择器 后代选择器 选择「所有」合乎规则的后代元素 「空格」链接 相邻后代选择器 仅仅选择合乎规则的「儿子元素」 孙子，重孙子元素忽略 >链接 兄弟选择器 选择当前元素后面的「所有」合乎规则的...第二个规则选择具有类名为 my-class 的元素，并将其字体大小设置为16像素。 ❝在应用CSS样式时，浏览器会「遍历DOM树，匹配元素与选择器，并将相应的样式属性应用于匹配的元素」。...❝绘制顺序是按照「层叠顺序」，而不是DOM顺序 ❞ 可以看到，虽然yellow的DOM顺序在green的DOM之前，但是在绘制到页面上时，yellow在green的上面。
$("标签名称") 9.2 所有选择器 所有选择器：选取页面中所有的DOM对象 $("*") 9.3 组合选择器 组合选择器是多个被选中对象间使用逗号隔开后形成的选择器，可以组合 id、class、标签名等...DOM 对象顺序与页面标签声明位置关系 jQuery对象数组中dom对象的顺序和声明dom对象时的顺序保持一致 1 dom1 2 dom2 3</div...在定位了dom对象之后，根据一些条件筛选dom对象。 过滤器也是一个字符串，用来筛选dom对象。 过滤器不能单独使用，必须和选择器一起使用。...注意：在代码中的写的等标签不会在页面中显示，而是会在页面中执行，但是获取的文本内容中含有这个 $(选择器).html()：无参数调用方法，获取 DOM 数组第一个dom对象的在网页上显示的文本内容。...$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的在网页上显示的文本内容。
当你修改了data的值然后马上获取这个dom元素的值， 是不能获取到更新后的值，你需要使用$nextTick这个回调， 让修改后的data值渲染更新到dom元素之后在获取，才能成功。...销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数， 说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。 35、vuex是什么？...常用的CSS选择器 ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器 权重划分 在同一层级下： !...defer是在html解析完毕才执行,如果有多个则按加载顺序执行 async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关 4、预加载? 在开发中，可能会遇到这样的情况。...JQuery 的优点 1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。
} ); jQuery的ready()函数可以重复调用，绑定的回调函数将在DOM准备就绪后按照绑定顺序依次执行。...使用jQuery 选择器选取元素，并封装为jQuery对象 在JS原生DOM中，我们想要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、getElementsByTagName...几乎所有的CSS选择器都可以当做jQuery选择器来使用，只要CSS选择器对哪些元素生效，对应的jQuery选择器就可以选取到哪些元素。...当我们使用$("选择器字符串")匹配到指定的元素后，将返回一个jQuery对象。该对象就包含匹配到的所有DOM元素。...属性操作 在jQuery中，对DOM元素进行属性操作，主要是通过以下方法实现的： // selector 表示具体的选择器 $("selector").val(); // 获取第一个匹配元素的value
可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么？它的名字是 —— 后代选择器。...div p { color: #3388ff; font-size: 14px;} 后代选择器或许会很耗性能 耗能与否取决于项目的体积，但不建议使用没有意义的后代选择器。...，越靠右的选择器越具有唯一性，浏览器解析 CSS 属性的效率就越高。...repaint 的速度远快于 reflow，所以避免 reflow 更重要 导致 repaint 和 reflow 的原因 DOM 元素的添加、修改、删除（repaint、reflow） 仅仅修改 DOM...，那么计算和更新他们的位置/大小需要花费很长的时间。
遍历DOM树的方法应该与DOM渲染后从上到下的顺序一致，即采用深度优先的先序遍历方法（先序遍历即先检查根元素，再检查子元素；后序遍历则相反；如果是二叉树，还有中序遍历）。...在所有页面中，并不能单纯根据h1,h2等标签名来判别一个元素是否要导航，所以想到了用选择器来确定，同时添加根据选择器来排除一些例外的元素。...'h1'，下标为1的元素是第二级导航，通常可以用选择器'h2'; 一个字符串exceptSelector，用于排除例外元素的选择器； 一个回调函数callback,用于接收生成的导航树形数据。...3、生成树形导航数据函数 通过传入的导航元素DOM根节点、导航元素选择器列表、导航元素排除选择器，返回一个树形数据的列表list。...__navigationGenerateFunction } } } 需要注意的是，我们在模板更新完成时插入锚点元素，而这本身又是会触发模板更新的，所以需要打个标记避死循环。
获取DOM元素 1. 根据CSS选择器来获取DOM元素 (重点) 选择匹配的第一个元素 包含一个或多个有效的CSS选择器 字符串 CSS选择器匹配的第一个元素,一个 HTMLElement对象。...let num = document.querySelector('.box li:last-child') console.log(num) 选择匹配的多个元素 包含一个或多个有效的CSS选择器 字符串...CSS选择器匹配的NodeList 对象集合 let num = document.querySelectorAll('.box li') console.log(num) 获取一个DOM元素我们使用谁...根据CSS选择器来获取DOM元素 (重点) // 通过遍历方式 获取每一个dom对象/元素 let num1 = document.querySelectorAll('.box li') for (let...里面写css选择器, 必须是字符串，也就是必须加引号 6. 设置/修改DOM元素内容 DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象, 就是操作对象使用的点语法。
DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。 浏览器显示 DOM 的内容。 ? ---- DOM是什么 HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。...重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可能对性能有明显的影响：网页可能显示比预期要慢。大多数情况下，你都不会使用这个选择器。...什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）： 重要性（Importance） 专用性（Specificity） 源代码次序（Source order）...实际上，这三种情况都应该应用，因为在源顺序后面的规则通常会覆盖较早的规则。 然而, 在前面的规则被运用了,因为 IDs/class 选择器优先于element选择器。...相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明： 在用户代理样式表的声明 (浏览器默认样式). 用户样式表中的普通声明（由用户设置的自定义样式）。
图片 在回答有何不同之前，首先需要说明下什么是 diff 算法。 diff 算法是指生成更新补丁的方式，主要应用于虚拟 DOM 树变化后，更新真实 DOM。...（3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。 选择器性能： （1）关键选择器（key selector）。...选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。...当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等； （2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。...（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
这里在查找的过程中，出于效率的考虑，会从 CSSOM 树的叶子节点开始查找，对应在 CSS 选择器上也就是从选择器的最右侧向左查找。所以，不建议使用标签选择器和通配符选择器来定义元素样式。...当一个 DOM 元素受到多条样式控制时，样式的优先级顺序如下：「内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式」 CSS常见选择器的优先级如下：...div 1 伪元素选择器 li:after 1 相邻兄弟选择器 h1+p 0 子选择器 ul>li 0 后代选择器 li a 0 通配符选择器 * 0 对于选择器的「优先级」： 标签选择器、伪元素选择器...当有了所有元素的大小和位置后，就可以在浏览器的页面区域里去绘制元素的边框了。这个过程就是布局。...「注意:」 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。 「（2）需要裁剪的元素」 什么是裁剪呢？
领取专属 10元无门槛券
手把手带您无忧上云
