• 增加首屏必要的 CSS 和 JS • 页面如果需要等待所的依赖的 JS 和 CSS 加载完成才显示，则在渲染过程中页面会一直显 示空白，影响用户体验，建议增加首屏必要的 CSS 和 JS，...和内存的属性 • 如text-indnt:-99999px • 尽量避免使用耗电量大的属性 ， 如CSS3 3D transforms、CSS3 transitions、Opacity... 3.2合适使用 CSS 选择器 • 尽量避免使用 CSS 表达式 ，如background-color: expression( (new Date()).getHours()%2 ?...4.2JavaScript 变量和函数优化 • 尽量使用 id 选择器 • 尽量避免使用 eval • JavaScript 函数尽可能保持简洁 • 使用事件节流函数...• 可以使用 fragment，尽量不在页面 DOM Tree 里直接操作。
解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。 从前端角度出发谈谈做好seo需要考虑什么?...diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。...： 此条由 王子墨 发表在 攻城师的实验室 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。...SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS) CSS优化、提高性能的方法有哪些？ 浏览器是怎样解析CSS选择器的？ 在网页中的应该使用奇数还是偶数的字体？...减少代码间的耦合 让代码保持弹性 严格按规范编写代码 设计可扩展的API 代替旧有的框架、语言(如VB) 增强用户体验 通常来说对于速度的优化也包含在重构中 压缩JS、CSS、image等前端资源
:'span-ele', css: { color: 'red' } })/*创建一个id为span-ele,显示值为hello,红色的span标签*//*以上为作为选择器的使用方法*/...$(function(){ //do...用过jQuery的应该都知道,这是绑定的DOMContentLoaded 事件 }) 当$变量已经存在时,如引用了jQuery,那么zepto的全局对象将不会指向...但有一点令我不理解的地方是，为何在最后又添加了这么一段重复的逻辑，还希望有知道的同学告诉在下。 ? 最后返回的一个变量经过Zepto的构造函数摇身一变为Zepto对象。...该方法接收最多三个参数， 第一个为html值，可以只是一个标签，如（“”）、或一个html片段，如（“hello”）； 第二个为一个标识符，用来确定标签类型，该变量主要用于对表格类元素进行一些特殊的处理...会有多个，所以css的值必须为一个json*/ 完成以后就可以返回该dom元素了。
然而，在以下情况中，请使用 POST 请求： ①无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）。...全局函数isNaN可以判断一个变量的值是否为数字。 可以使用运算符type、instanceof判断变量值的数据类型。 6、什么是Bom什么是Dom?你如何理解Dom?...①innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法； ②innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码； ③outerHTML代表一个元素节点内由所有子节点和当前节点组成的...③当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI、easyUI等。...（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
...-> 查找window对象 -> 未定义 js中没有块级作用域，可以用匿名函数模拟 未用关键字var申明的变量，会自动升级为全局变量挂到window上 顶级作用域内使用var申明的变量是window...1】高性能CSS） 合并图片（css sprites） 尽量避免通配符选择器：CSS选择器是从右到左进行规则匹配，基于这个机制，浏览器会查找所有同类节点然后逐级往上查找，知道根节点，这样效率很低 尽量避免属性选择器...存储不需要实时更新的数据 设置HTTP Expires信息 复杂的计算考虑使用Web Worker jQuery性能优化 合理使用选择器 id和标签选择器最快，因为是直接调用原生API $('...，伪元素、属性选择器在不支持querySelector的浏览器很慢 尽可能优先使用符合CSS语法规范的CSS选择器表达式，以此来避免使用jQuery自定义的选择器表达式，因为当jQuery遇到单个id,...结构也有助于提升选择器的性能 $('.foo .bar .baz'); $('.foo div.baz'); // better 尽量避免使用通配符选择器 尽可能的少创建jQuery对象 如document.getElementById
JavaScript代码：用散列表来优化查找，少用全局变量，用 innerHTML代替DOM操作，减少DOM操作次数，优化 JavaScript性能，用 setTimeout避免页面失去响应，缓存DOM...src属性为空，会重新加载当前页面，影响速度和效率，尽量避免在HTML标签中写 Style属性 4、移动端性能如何优化？ 优化方式如下。 尽量使用CSS3动画，开启硬件加速。...（5）少用全局变量，缓存DOM节点查找的结果，减少I/O读取操作 （6）避免使用CSS表达式，它又称动态属性， （7）预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳。...（1）把CSS写在页面头部，把 JavaScript程序写在页面尾部或异步操作中。 （2）避免图片和 iFrame等的空src，空src会重新加载当前页面，影响速度和效率。...jQuery提供非常丰富的选择器，选择器是开发人员最常使用的功能，但是使用不同选择器也会带来性能问题。建议使用简凖选择器，如i选择器、类选择器，不要将i选择器嵌套等。
，如何在即保证不破坏现有页面，又提供新的渲染机制呢？...（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数...（4） 当需要设置的样式很多时设置className而不是直接操作style。 （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。...如果我们在文档中添加 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。...他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。 例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数.
简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器，更通用的 id/类名称，而无需担心命名冲突。 Shadow DOM 本文假设你已经熟悉 DOM 及其它的 Api 的概念。...这在以前也是可以实现，但是 HTML 元素(在现代浏览器中得到了很好的支持)使它变得容易得多。此元素及其内容不在 DOM 中渲染，但可以使用 JavaScript 引用它。...组件定义的样式 作用域 CSS 是 Shadow DOM 最大的特性之一: 外部页面的 CSS 选择器不应用于组件内部 组件内定义的样式不会影响页面的其他元素，它们的作用域是宿主元素 shadow DOM...内部使用的 CSS 选择器在本地应用于组件实际上，这意味着我们可以再次使用公共vid/类名，而不用担心页面上其他地方的冲突,最佳做法是在 Shadow DOM 内使用更简单的 CSS 选择器,它们在性能上也不错...在下面例子中，我们以所有的元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素： :host /deep/ h3 { font-style: italic; } /deep/ 选择器还有一个别名
，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳） a) 缓存一切可缓存的资源 b) 使用长Cache（使用时间戳更新Cache） c...但Loading时间过长，会造成用户流失 对用户行为分析，可以在当前页加载下一页资源，提升速度 a) 可感知Loading(如进入空间游戏的Loading) b) 不可感知的Loading（如提前加载下一页...优化] （5）尽量避免写在HTML标签中写Style属性 （6）避免CSS表达式 CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式 （7）移除空的CSS规则 空的CSS规则增加了CSS文件的大小...所以淘汰） （14）避免让选择符看起来像正则表达式 高级选择器执行耗时长且不易读懂，避免使用 3、[JavaScript执行优化] （1）减少重绘和回流 a) 避免不必要的Dom操作 b) 尽量改变Class...）缓存列表.length 每次.length都要计算，用一个变量保存这个值 （4）尽量使用事件代理，避免批量绑定事件 （5）尽量使用ID选择器 ID选择器是最快的 （6）TOUCH事件优化 使用touchstart
js有两种变量， 局部变量和全局变量，局部变量是在他当前的函数中产生作用，当该函数结束之后， 该变量内存会被释放，全局变量的话会一直存在，直到浏览器关闭为止。...只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面 v-if直接将dom元素从页面删除，再次切换需要重新渲染页面 5、如何让CSS只在当前组件中起作用 scoped 6、<keep-alive...父组件把方法传入子组件中，在子组件里直接调用这个方法。 46、 如何让 CSS 只在当前组件中起作用？ 在组件中的 style 前面加上 scoped 47、如何获取 dom?...如何在vue中安装和使用？ sass是一种CSS预编译语言安装和使用步骤如下。 用npm安装加载程序（ sass-loader、 css-loader等加载程序)。...常用的CSS选择器 ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器 权重划分 在同一层级下： !
「CSS选择器用于选择DOM元素的子集，以对其添加指定的属性声明」。 ❝在处理CSS样式时，浏览器会解析CSS文件或内联样式，并将样式规则应用于DOM树中的相应元素。...CSS选择器用于选择要应用样式的目标元素。 选择器可以根据元素的标签名、类名、ID、属性等进行匹配，以确定应用哪些样式规则。 ❞ 这里多啰嗦几句，在CSS重点概念精讲中我们介绍过，选择器。...」选择元素的选择器 后代选择器 选择「所有」合乎规则的后代元素 「空格」链接 相邻后代选择器 仅仅选择合乎规则的「儿子元素」 孙子，重孙子元素忽略 >链接 兄弟选择器 选择当前元素后面的「所有」合乎规则的...「兄弟元素」 ~链接 相邻兄弟选择器 仅仅选择当前元素相邻的那个合乎规则的兄弟元素 +链接 常见的使用场景是，改变紧跟着一个标题的段的某些表现方面 权重 ❝ !...变量。
，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳） a) 缓存一切可缓存的资源 b) 使用长Cache（使用时间戳更新Cache）...但Loading时间过长，会造成用户流失 对用户行为分析，可以在当前页加载下一页资源，提升速度 a) 可感知Loading(如进入空间游戏的Loading) b) 不可感知的Loading（如提前加载下一页...] · 尽量避免写在HTML标签中写Style属性 · 避免CSS表达式 CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式 · 移除空的CSS规则 空的CSS规则增加了CSS文件的大小，且影响...） · 避免让选择符看起来像正则表达式 高级选择器执行耗时长且不易读懂，避免使用 [JavaScript执行优化] · 减少重绘和回流 a) 避免不必要的Dom操作 b) 尽量改变Class而不是Style...每次.length都要计算，用一个变量保存这个值 · 尽量使用事件代理，避免批量绑定事件 · 尽量使用ID选择器 ID选择器是最快的 · TOUCH事件优化 使用touchstart、touchend
与此相关的还有以下几个属性： wx:key：遍历元素的唯一的标识符，主要用于数据动态变化时，DOM 的更新机制。数据不变，则可无视。 wx:for-item：遍历元素的变量名，默认值为 item。...对于常用的选择器，小程序目前支持以下这些： 目前不支持的选择器有： 此外，还有几个需要注意的地方： 如之前提到，页面的顶层是节点，所以想要修改作用于整个页面的样式、顶层节点样式，请使用 page 选择器...（如 bindtap） Any：任意属性（不是很明白是什么意思） 所有组件都有的共同属性： id：组件的唯一标识 class：组件的样式类，和在 WXSS 中定义的类选择器对应 style：内联样式 hidden...例如：Mustache / tpl（点评内部开发使用），数据更改时，会将 DOM 节点全部更新。 字符串 parse 和 compile 后拼接渲染外，有自己的 DOM 节点更新机制。...例如：Vue.js / React等，数据更改时通过 DOM Diff 算法更新 DOM 节点。 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件。
DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...注意：jQuery选择器返回的是jQuery对象。 jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。...过滤选择器 这类选择器都带冒号: 名称 用法 描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index...li元素中，选择索引号为偶数的元素 :first $(“li:first”).css(“color”, ”red”); 获取到的li元素中的第一个 :last $(“li:last”).css(“color...”); 获取当前元素中的后代元素中的li元素 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。
与页面的初始渲染一样，CSS选择器特异性的增加会增加交互导致的HTML元素插入到DOM时的渲染工作。 当 JavaScript 查询DOM时，对 DOM 元素的引用存储在内存中。...它不包括DOM中的所有节点。 如果你想实时查看DOM大小的更新，你也可以使用性能监视工具。使用这个工具，你可以将布局和样式操作（以及其他性能方面）与当前的DOM大小进行关联。...这样做将减少DOM元素的数量，并可能给你一个机会来简化页面样式。 DOM深度也可能是你使用的框架的一个症状。特别是，基于组件的框架（如依赖于JSX的那些）要求你在父容器中嵌套多个组件。...如果你担心扁平化DOM结构对样式有影响，你可能会从使用更现代（和更快）的布局模式（如flexbox或grid）中受益。...限制CSS选择器的复杂性 当浏览器解析你的CSS中的选择器时，它必须遍历DOM树以了解这些选择器是如何（以及是否）应用于当前布局的。
，因为 clearfix已经应用在各大CSS框架（如 Bootstrap等）中，并成为行业的默认规范。...虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。 因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。...也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。 17、解释一下 CSS Sprite，以及如何在页面或网站中使用它。...（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。...49、在CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ 最基本的方式如下。
接着我们来看看如何在自定义组件中 实现 v-model。...v-model 介绍 要了解如何在组件中实现v-model支持，需要了解它是如何工作的。...基础事例 假设有一个日期选择器组件，该组件在一个对象中接受month和year的值，格式为：{month：1，year：2017}。...高级用法 通过使用一个或多个计算属性，我们可以将输入数据(如字符串)反规范化为输入元素更容易处理的格式。这通常与更高级的定制组件一起使用，这些组件必须处理各种可能的输入格式，比如颜色选择器。...通过使用计算属性（在本例中为splitDate），我们可以将输入字符串拆分为具有month和year属性的对象，同时仅对日期选择器组件进行最少的修改。
标准属性在后； 9、CSS 预处理 CSS 预处理器用一种专门的编程语言，在编写 CSS 的过程中可以使用变量、循环、递归等特性，然后再编译成正常的 CSS 文件，可以提高 CSS 编写效率，常用的预编译语言有...ID 选择器、类选择器、伪类选择器、全局选择器 ... 13、你知道这些选择器的权重怎么计算？ 权值为1000：代表内联样式，如: style=""。...权值为100：代表ID选择器，如：#content。 权值为10：代表类，伪类和属性选择器，如.content。 权值为1：代表类型选择器和伪元素选择器，如div p。...可以简单理解为“函数里的函数”，两个常见作用：一可以读取函数内部的变量、二让这些变量的值始终保持在内存中。...20、JS 作用域链 在一些类 C 的语言中有“块级作用域”，即花括号的每一段代码都有自己的独立作用域，而 JS 只有函数级作用域；JS 作用域链的第一个对象始终是当前执行代码所在环境的变量对象（VO）
标准属性在后； 9、CSS 预处理 CSS 预处理器用一种专门的编程语言，在编写 CSS 的过程中可以使用变量、循环、递归等特性，然后再编译成正常的 CSS 文件，可以提高 CSS 编写效率，常用的预编译语言有...ID 选择器、类选择器、伪类选择器、全局选择器 ...（请跳至W3SCHOOL） 13、你知道这些选择器的权重怎么计算？ 权值为1000：代表内联样式，如: style=""。...权值为100：代表ID选择器，如：#content。 权值为10：代表类，伪类和属性选择器，如.content。 权值为1：代表类型选择器和伪元素选择器，如div p。...可以简单理解为“函数里的函数”，两个常见作用：一可以读取函数内部的变量、二让这些变量的值始终保持在内存中。...20、JS 作用域链 在一些类 C 的语言中有“块级作用域”，即花括号的每一段代码都有自己的独立作用域，而 JS 只有函数级作用域；JS 作用域链的第一个对象始终是当前执行代码所在环境的变量对象（VO）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
