• 关于

    Dom节点的属性操作

    的搜索结果

回答

对于浏览器引擎而言,并不存在“HTML标签”这回事。其本质是DOM节点对象。也并不存在“HTML文档”这回事,其本质是DOM节点对象组成的文档树。 浏览器引擎才是实际存储和渲染DOM节点对象的“大爷”。只是我们无法直接操作浏览器引擎,所以对这个本质并不熟悉(其实也不需要很熟悉,但是得知道)。 DOM节点对象是唯一的,但操作DOM节点对象的数据,却不止有一种方法。例如对于一个图像的宽度: •HTML可以通过的width属性去定义; •JavaScript可以通过element.width去读取和修改; •别忘了CSS,CSS也可以通过width属性去修改。 HTML属性和JavaScript的DOM对象的属性,本质上都只是影响DOM节点对象数据的众多理由之一。 多个原因影响同一个DOM节点的实质数据(多对一),请务必记住这个本质理由。 详细而言: HTML仅仅是文档树和节点对象的一种描述方法。 •浏览器的解析器部分,根据HTML直接把DOM文档树,交给浏览器引擎。 •用其他的方法,也可以描述DOM对象,例如JSX。(当然用其他方法描述DOM对象的时候,生成DOM文档树的过程,肯定会发生相应的修改) JavaScript中的DOM对象,仅仅是一种操作浏览器引擎中DOM对象的接口。 •JavaScript中的DOM对象,和浏览器引擎中存储的DOM节点,本质上不是一个东西。 •用户实际上仅仅有权操作JavaScript中提供的DOM对象。 •JS引擎和浏览器引擎协作,确保了JavaScript的DOM对象,是引擎中DOM节点的一个原样映射。 •这样用户就能通过操作JavaScript的DOM对象,透明的修改引擎中存储的DOM节点。 •而浏览器引擎在本质上,仅仅负责在DOM树更新时承担重新渲染,实际上并不关心JS的存在。 •你如果用其他办法修改了引擎使用的DOM树,也能更新文档结构。(当然这种办法基本上不存在…) 至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同,这仅仅是人为的方便。我如果喜欢我也可以设计成这样嘛: // <img src="http://localhost/1.png" alt="alt text" width=640 height=480 /> node.DataSource = "http://localhost/1.png"; node.AlternativeText = "alt text"; node.Dimension.Width = 640; node.Dimension.Height = 480; 虽然这样就真的没法记了。 JavaScript DOM对象属性名和HTML属性名的近似,是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名,然后记忆(或者是踩坑了再反查)JavaScript属性名中少量和HTML不同名的差异点,这是很自然的。

杨冬芳 2019-12-02 02:54:12 0 浏览量 回答数 0

回答

大家都知道操作 DOM 是很慢的,为什么慢的原因已经在「浏览器渲染原理」章节中说过,这里就不再赘述了。 那么相较于 DOM 来说,操作 JS 对象会快很多,并且我们也可以通过 JS 来模拟 DOM const ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' } } 上述代码对应的 DOM 就是 <ul class='list'> <li>1</li> </ul> 那么既然 DOM 可以通过 JS 对象来模拟,反之也可以通过 JS 对象来渲染出对应的 DOM。当然了,通过 JS 来模拟 DOM 并且渲染对应的 DOM 只是第一步,难点在于如何判断新旧两个 JS 对象的最小差异并且实现局部更新 DOM。 首先 DOM 是一个多叉树的结构,如果需要完整的对比两颗树的差异,那么需要的时间复杂度会是 O(n ^ 3),这个复杂度肯定是不能接受的。于是 React 团队优化了算法,实现了 O(n) 的复杂度来对比差异。 实现 O(n) 复杂度的关键就是只对比同层的节点,而不是跨层对比,这也是考虑到在实际业务中很少会去跨层的移动 DOM 元素。 所以判断差异的算法就分为了两步 首先从上至下,从左往右遍历对象,也就是树的深度遍历,这一步中会给每个节点添加索引,便于最后渲染差异一旦节点有子元素,就去判断子元素是否有不同 在第一步算法中我们需要判断新旧节点的 tagName 是否相同,如果不相同的话就代表节点被替换了。如果没有更改 tagName 的话,就需要判断是否有子元素,有的话就进行第二步算法。 在第二步算法中,我们需要判断原本的列表中是否有节点被移除,在新的列表中需要判断是否有新的节点加入,还需要判断节点是否有移动。 举个例子来说,假设页面中只有一个列表,我们对列表中的元素进行了变更 // 假设这里模拟一个 ul,其中包含了 5 个 li [1, 2, 3, 4, 5] // 这里替换上面的 li [1, 2, 5, 4] 从上述例子中,我们一眼就可以看出先前的 ul 中的第三个 li 被移除了,四五替换了位置。 那么在实际的算法中,我们如何去识别改动的是哪个节点呢?这就引入了 key 这个属性,想必大家在 Vue 或者 React 的列表中都用过这个属性。这个属性是用来给每一个节点打标志的,用于判断是否是同一个节点。 当然在判断以上差异的过程中,我们还需要判断节点的属性是否有变化等等。 当我们判断出以上的差异后,就可以把这些差异记录下来。当对比完两棵树以后,就可以通过差异去局部更新 DOM,实现性能的最优化。 另外再来回答「为什么 Virtual DOM 比原生 DOM 快」这个问题。首先这个问题得分场景来说,如果无脑替换所有的 DOM 这种场景来说,Virtual DOM 的局部更新肯定要来的快。但是如果你可以人肉也同样去局部替换 DOM,那么 Virtual DOM 必然没有你直接操作 DOM 来的快,毕竟还有一层 diff 算法的损耗。 当然了 Virtual DOM 提高性能是其中一个优势,其实最大的优势还是在于: 将 Virtual DOM 作为一个兼容层,让我们还能对接非 Web 端的系统,实现跨端开发。同样的,通过 Virtual DOM 我们可以渲染到其他的平台,比如实现 SSR、同构渲染等等。实现组件的高度抽象化

前端问答 2019-12-24 12:32:58 0 浏览量 回答数 0

回答

简述重排的概念 浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM 树和渲染树),DOM 树表示页面结构,渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化,DOM 树的结构变化,渲染树需要重新计算。 简述重绘的概念 重绘是一个元素外观的改变所触发的浏览器行为,例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用 table 布局页面的原因之一。 简述重绘和重排的关系 重绘不会引起重排,但重排一定会引起重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。 什么情况下会触发重排? - 页面渲染初始化时;(这个无法避免) - 浏览器窗口改变尺寸; - 元素尺寸改变时; - 元素位置改变时; - 元素内容改变时; - 添加或删除可见的 DOM 元素时。 重排优化有如下五种方法 - 将多次改变样式属性的操作合并成一次操作,减少 DOM 访问。 - 如果要批量添加 DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排。(fragment 元素的应用) - 将需要多次重排的元素,position 属性设为 absolute 或 fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。 - 由于 display 属性为 none 的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发两次重排。 - 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段,再一次性添加到文档中去,而不是循环添加每一行。

茶什i 2019-12-02 03:19:56 0 浏览量 回答数 0

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

回答

浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。 重绘 由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outline, visibility, color、background-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。 回流 回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。 <body> <div class="error"> <h4>我的组件</h4> <p><strong>错误:</strong>错误的描述…</p> <h5>错误纠正</h5> <ol> <li>第一步</li> <li>第二步</li> </ol> </div> </body> 在上面的HTML片段中,对该段落(p标签)回流将会引发强烈的回流,因为它是一个子节点。这也导致了祖先的回流(div.error和body – 视浏览器而定)。此外,h5和ol也会有简单的回流,因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。 回流必定会发生重绘,重绘不一定会引发回流。 浏览器优化 现代浏览器大多都是通过队列机制来批量更新布局,浏览器会把修改操作放在队列中,至少一个浏览器刷新(即16.6ms)才会清空队列,但当你获取布局信息的时候,队列中可能有会影响这些属性或方法返回值的操作,即使没有,浏览器也会强制清空队列,触发回流与重绘来确保返回正确的值。 主要包括以下属性或方法: - offsetTop、offsetLeft、offsetWidth、offsetHeight - scrollTop、scrollLeft、scrollWidth、scrollHeight - clientTop、clientLeft、clientWidth、clientHeight - width、height - getComputedStyle() - getBoundingClientRect() 所以,我们应该避免频繁的使用上述的属性,他们都会强制渲染刷新队列。 减少重绘与回流 CSS 使用 transform 替代 top使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)避免使用table布局,可能很小的一个小改动会造成整个 table 的重新布局。尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围,使其影响尽可能少的节点。 避免设置多层内联样式,CSS 选择符从右往左匹配查找,避免节点层级过多。 <div> <a> <span></span> </a> 对于第一种设置样式的方式来说,浏览器只需要找到页面中所有的 span 标签然后设置颜色,但是对于第二种设置样式的方式来说,浏览器首先需要找到所有的 span 标签,然后找到 span 标签上的 a 标签,最后再去找到 div 标签,然后给符合这种条件的 span 标签设置颜色,这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器,然后对于 HTML 来说也尽量少的添加无意义标签,保证层级扁平。 - 将动画效果应用到position属性为absolute或fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流,同时,控制动画速度可以选择 requestAnimationFrame,详见探讨 requestAnimationFrame。 - 避免使用CSS表达式,可能会引发回流。 - 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点,例如will-change、video、iframe等标签,浏览器会自动将该节点变为图层。 - CSS3 硬件加速(GPU加速),使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。 2. Javascript - 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。 - 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。 - 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。 - 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

九旬 2020-05-24 11:22:47 0 浏览量 回答数 0

问题

js中加入的新节点,某些功能失效

a123456678 2019-12-01 20:25:02 722 浏览量 回答数 1

回答

如果你使用过框架做项目的话,这个问题即使之前没有看过应该也能答出个大概。 首先直接把vue模板丢到浏览器中肯定是不能运行的,模板只是为了方便开发者进行开发。vue会通过编译器将模板通过几个阶段最终编译为render函数,然后通过执行render函数生成Vitual DOM最终映射为真实的DOM。 将模板解析为抽象语法树(AST)优化AST将AST转换为render函数 面试答以上内容即可,接下来是分析阶段: 在第一阶段,最主要的事情还是通过各种各样的正则表达式去匹配模板中的内容,然后将内容提取出来做各种逻辑操作,接下来会生成一个最基本的AST对象。 { // 类型 type: 1, // 标签 tag, // 属性列表 attrsList: attrs, // 属性映射 attrsMap: makeAttrsMap(attrs), // 父节点 parent, // 子节点 children: [] } 然后会根据这个最基本的AST对象中的属性,进一步扩展AST。 当然在这一阶段中,还会进行其他的一些判断逻辑。比如说对比前后开闭标签是否一致,判断根组件是否只存在一个,判断是否符合HTML5 Content Model规范等问题。 接下来就是优化AST的阶段。在当前版本下,Vue进行的优化内容其实还是不多的,只是对节点进行了静态内容提取,也就是将永远不会变动的节点提取了出来,实现复用Virtual DOM,跳过对比算法的功能。在下一个版本中,Vue会在优化AST的阶段继续发力,实现更多的优化功能,尽可能的在编译阶段压榨更多的性能,比如说提取静态的属性等等优化行为。 最后一个阶段就是通过AST生成render函数了。其实这一阶段虽然分支有很多,但是最主要的目的就是遍历整个AST,根据不同的条件生成不同的代码罢了。

前端问答 2019-12-02 03:21:30 0 浏览量 回答数 0

回答

减少http请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存 ,图片服务器前端模板 JS + 数据,减少由于HTML标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能当需要设置的样式很多时设置 className 而不是直接操作 style少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作避免使用 CSS Expression(css表达式)又称 Dynamic properties(动态属性)图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳

小柯卡力多 2019-12-02 03:23:21 0 浏览量 回答数 0

回答

认真看了一遍题目。。。才发现我理解错了,你说的生html结果。html默认会生成、、这三个标签,如果要在三个标签内加元素,就可以像下面那样操作var fragment = document.createDocumentFragment();//创建dom内容文段(不知道术语是不是这样的。。。) var div= document.createElement("div");//创建div节点 var p = document.createElement("p");//创建p节点 div.className = "xc";//添加类名,其它属性同理 p.innerText = "innerText"; div.appendChild(p);//将p放进div里面,变成子元素 fragment.appendChild(div);//div加入dom内容文段 document.body.appendChild(fragment);//显示到boy中

爵霸 2019-12-02 02:52:38 0 浏览量 回答数 0

回答

原生XML扩展 我更喜欢使用其中一个原生XML扩展,因为它们与PHP捆绑在一起,通常比所有第三方库更快,并且在标记上给我所需的所有控制权。 DOM DOM扩展允许您使用PHP 5通过DOM API操作XML文档。它是W3C的文档对象模型核心级别3的实现,这是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文件的内容,结构和风格。 DOM能够解析和修改现实世界(破碎)的HTML,并且可以执行XPath查询。它基于libxml。 使用DOM需要一些时间才能提高效率,但这个时间非常值得IMO。由于DOM是一个与语言无关的接口,因此您可以找到多种语言的实现,因此如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在抓取A元素的href属性中找到,一般的概念概述可以在php的DOMDocument中找到 StackOverflow上已经广泛介绍了如何使用DOM扩展,因此如果您选择使用它,您可以确定您遇到的大多数问题都可以通过搜索/浏览Stack Overflow来解决。 XMLReader的 XMLReader扩展是一个XML pull解析器。读取器在文档流上作为光标前进,并在途中停在每个节点上。 与DOM一样,XMLReader基于libxml。我不知道如何触发HTML解析器模块,因此使用XMLReader解析损坏的HTML的可能性可能不如使用DOM,因为您可以明确告诉它使用libxml的HTML解析器模块。 使用php从h1标签获取所有值时,可以找到一个基本用法示例 XML解析器 此扩展允许您创建XML解析器,然后为不同的XML事件定义处理程序。每个XML解析器还有一些您可以调整的参数。 XML Parser库也基于libxml,并实现了SAX样式的XML推送解析器。它可能是比DOM或SimpleXML更好的内存管理选择,但是比XMLReader实现的pull解析器更难以使用。 SimpleXML的 SimpleXML扩展提供了一个非常简单且易于使用的工具集,用于将XML转换为可以使用普通属性选择器和数组迭代器处理的对象。 当您知道HTML是有效的XHTML时,SimpleXML是一个选项。如果你需要解析破碎的HTML,甚至不要考虑SimpleXml,因为它会窒息。 一个基本的用法示例可以在一个简单的CRUD节点程序和xml文件的节点值中找到,PHP手册中还有很多其他的例子。 第三方库(基于libxml) 如果您更喜欢使用第三方库,我建议使用实际上使用DOM / libxml而不是字符串解析的库。 FluentDom - 回购 FluentDOM为PHP中的DOMDocument提供了类似jQuery的流畅XML接口。选择器是用XPath或CSS编写的(使用CSS到XPath转换器)。当前版本扩展了DOM实现标准接口并添加了DOM Living Standard的功能。FluentDOM可以加载JSON,CSV,JsonML,RabbitFish等格式。可以通过Composer安装。 HtmlPageDom Wa72 \ HtmlPageDom`是一个用于轻松操作HTML文档的PHP库。它需要来自Symfony2组件的DomCrawler来遍历DOM树,并通过添加操作HTML文档的DOM树的方法来扩展它。 phpQuery(多年未更新) phpQuery是一个服务器端,可链接,CSS3选择器驱动的文档对象模型(DOM)API,基于用PHP5编写的jQuery JavaScript库,并提供额外的命令行界面(CLI)。 另见:https://github.com/electrolinux/phpquery Zend_Dom Zend_Dom提供了处理DOM文档和结构的工具。目前,我们提供Zend_Dom_Query,它提供了一个统一的界面,可以使用XPath和CSS选择器查询DOM文档。 的QueryPath QueryPath是一个用于操作XML和HTML的PHP​​库。它不仅适用于本地文件,还适用于Web服务和数据库资源。它实现了许多jQuery接口(包括CSS样式的选择器),但它在服务器端使用时经过了大量调整。可以通过Composer安装。 fDOMDocument fDOMDocument扩展了标准DOM,以便在所有错误情况下使用异常,而不是PHP警告或通知。为方便起见,他们还添加了各种自定义方法和快捷方式,并简化了DOM的使用。 军刀/ XML saber / xml是一个包装和扩展XMLReader和XMLWriter类的库,用于创建一个简单的“xml到对象/数组”映射系统和设计模式。编写和读取XML是单遍的,因此可以快速并且需要大型xml文件的低内存。 FluidXML FluidXML是一个用于使用简洁流畅的API来操作XML的PHP​​库。它利用XPath和流畅的编程模式,既有趣又有效。 第三方(不是基于libxml的) 构建DOM / libxml的好处是,您可以获得良好的开箱即用性能,因为您基于本机扩展。但是,并非所有第三方库都沿着这条路线行进。其中一些列在下面 PHP简单的HTML DOM解析器 用PHP5 +编写的HTML DOM解析器允许您以非常简单的方式操作HTML! 需要PHP 5+。 支持无效的HTML。 使用选择器在HTML页面上查找标签,就像jQuery一样。 从一行中提取HTML中的内容。 我一般不推荐这个解析器。代码库很糟糕,解析器本身很慢而且内存很耗。并非所有jQuery选择器(例如子选择器)都是可能的。任何基于libxml的库都应该比这更容易。 PHP Html解析器 PHPHtmlParser是一个简单,灵活的html解析器,允许您使用任何css选择器(如jQuery)选择标签。目标是帮助开发需要快速,简单的方法来废弃html的工具,无论它是否有效!这个项目最初是由sunra / php-simple-html-dom-parser支持的,但支持似乎已经停止,所以这个项目是我对他以前工作的改编。 同样,我不推荐这个解析器。CPU使用率很高,速度相当慢。还没有清除已创建DOM对象的内存的功能。这些问题尤其适用于嵌套循环。文档本身不准确且拼写错误,自4月14日以来没有回复修复。 加农 通用标记器和HTML / XML / RSS DOM解析器 能够操纵元素及其属性 支持无效的HTML和UTF8 可以对元素执行类似CSS3的高级查询(比如jQuery - 支持的命名空间) HTML美化器(如HTML Tidy) 缩小CSS和Javascript 排序属性,更改字符大小写,更正缩进等。 扩展 使用基于当前字符/标记的回调解析文档 操作以较小的功能分隔,以便轻松覆盖 快速而简单 从未使用过它。不知道它是否有用。 HTML 5 您可以使用上面的方法来解析HTML5,但由于HTML5允许的标记,可能会有怪癖。因此,对于HTML5,您要考虑使用专用解析器,例如 html5lib 基于WHATWG HTML5规范的HTML解析器的Python和PHP实现,可与主要桌面Web浏览器实现最大兼容性。 HTML5最终确定后,我们可能会看到更多专用解析器。还有一个W3的博客文章,名为How-To for html 5 parsing,值得一试。 网页服务 如果您不想编写PHP,您也可以使用Web服务。一般来说,我发现这些实用程序很少,但那只是我和我的用例。 ScraperWiki。 ScraperWiki的外部界面允许您以您希望在Web或您自己的应用程序中使用的形式提取数据。您还可以提取有关任何刮刀状态的信息。 常用表达 最后也是最不推荐的,您可以使用正则表达式从HTML中提取数据。通常,不鼓励在HTML上使用正则表达式。 您可以在网上找到与标记相匹配的大多数片段都很脆弱。在大多数情况下,它们只适用于非常特殊的HTML。微小的标记更改,例如在某处添加空格,或添加或更改标记中的属性,可以使RegEx在未正确编写时失败。在HTML上使用RegEx之前,您应该知道自己在做什么。 HTML解析器已经知道HTML的语法规则。必须为您编写的每个新RegEx讲授正则表达式。RegEx在某些情况下很好,但它实际上取决于您的用例。 您可以编写更可靠的解析器,但是使用正则表达式编写完整可靠的自定义解析器是浪费时间,因为上述库已经存在并且在此方面做得更好。

游客gsy3rkgcdl27k 2019-12-02 02:09:37 0 浏览量 回答数 0

回答

样本一 减少 http 请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存 ,图片服务器。 前端模板 JS+数据,减少由于 HTML 标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数 用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能。 当需要设置的样式很多时设置 className 而不是直接操作 style。 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。 避免使用 CSS Expression(css 表达式)又称 Dynamic properties(动态属性)。 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。 避免在页面的主体布局中使用 table,table 要等其中的内容完全下载之后才会显示出来,显示比 div+css 布局慢。 样本二 减少 HTTP 请求 减少 DOM 操作 避免不必要的重绘与重排 优化 CSS 选择器(从右向左匹配) CSS/JS minify,减少文件体积 开启 Gzip 压缩 将 CSS 放到顶部,JavaScript 放到尾部 压缩图片以及使用 CSS Sprite 使用 CDN 加速,适当进行文件缓存 合理控制 cookie 大小(每次请求都会包含 cookie)

kun坤 2019-12-02 03:23:19 0 浏览量 回答数 0

回答

好像没啥缺点,说说优点吧。当然是兼容性了。虽然现在标准浏览器的市场份额越来越高,但是回想当年,没有jQuery,开发难度立马上升很多。方便的事件托管。在jQuery中,我们可以非常方便的使用.on('event', 'selector', function),把事件响应函数托管给父级容器,这样在列表类的应用中,不仅可以大大减少内存占用,还可以放心的移除新增子元素。部分事件增加冒泡。submit事件在IE中是不冒泡的,jQuery人工给它增加了冒泡能力。方便的trigger。虽然用起来都是事件,但其实不同的事件存在于不同的命名空间中,自己写的时候多半得查下资料,用jQuery的话直接trigger就好。批量off。原生JavaScript中,removeEventListener一次只能移除一个事件的一个侦听函数。jQuery中则可以一次性移除多个侦听或托管,甚至全部侦听。尤其在移除DOM元素前,非常有用。事件命名空间。使用命名空间可以更方便的批量管理事件。一次性操作多个事件。传递事件类型时可以使用空格分隔,达到一次绑定多个事件到同一个选择器和同一个处理函数的目的。总之,jQuery在时刻践行它的口号:少写,多效。补充两点不算缺点的注意事项吧。jQuery使用自定义事件取代原生事件。早期的事件属性比较简单,jQuery会把常用属性复制到自定义事件上,比如target、currentTarget。但是后来新增的事件,比如ctrl+v粘贴时触发的ClipboardEvent.paste,要访问剪切板的内容,就必须通过originEvent找到原生事件,才能访问.data。我有一篇博客记录了这个情况。使用事件托管时,currentTarget和this指向的都是selector指定的DOM节点。使用事件托管,移除事件时,需要指定selector,不然移除的是父节点本身的侦听,而不是子节点的侦听。

小旋风柴进 2019-12-02 02:21:21 0 浏览量 回答数 0

回答

事件是用户操作网页时发生的交互动作或者网页本身的一些操作,现代浏览器一共有三种事件模型。 第一种事件模型是最早的 DOM0 级模型,这种模型不会传播,所以没有事件流的概念,但是现在有的浏览器支持以冒泡的方式实 现,它可以在网页中直接定义监听函数,也可以通过 js 属性来指定监听函数。这种方式是所有浏览器都兼容的。 第二种事件模型是 IE 事件模型,在该事件模型中,一次事件共有两个过程,事件处理阶段,和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段,冒泡指的是事件从目标元素冒泡到 document,依次检查经过的节点是否绑定了事件监听函数,如果有则执行。这种模型通过 attachEvent 来添加监听函数,可以添加多个监听函数,会按顺序依次执行。 第三种是 DOM2 级事件模型,在该事件模型中,一次事件共有三个过程,第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素,依次检查经过的节点是否绑定了事件监听函数,如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型,事件绑定的函数是 addEventListener,其中第三个参数可以指定事件是否在捕获阶段执行。

剑曼红尘 2020-04-03 15:22:46 0 浏览量 回答数 0

回答

React 16之后有三个⽣命周期被废弃(但并未删除) componentWillMountcomponentWillReceivePropscomponentWillUpdate 官⽅计划在17版本完全删除这三个函数,只保留UNSAVE_前缀的三个函数,⽬的是为了向下兼容,但是对于开发者⽽⾔应该尽量避免使⽤他们,⽽是使⽤新增的⽣命周期函数替代它们,⽬前React 16.8 +的⽣命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。 挂载阶段: - constructor: 构造函数,最先被执⾏,我们通常在构造函数⾥初始化state对象或者给⾃定义⽅法绑定this - getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState) ,这是个静态⽅法,当我们接收到新的属性想去修改我们state,可以使⽤getDerivedStateFromProps - render: render函数是纯函数,只返回需要渲染的东⻄,不应该包含其它的业务逻辑,可以返回原⽣的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容 - componentDidMount: 组件装载之后调⽤,此时我们可以获取到DOM节点并操作,⽐如对canvas,svg的操作,服务器请求,订阅都可以写在这个⾥⾯,但是记得在componentWillUnmount中取消订阅 更新阶段: - getDerivedStateFromProps: 此⽅法在更新个挂载阶段都可能会调⽤ - shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState) ,有两个参数nextProps和nextState,表示新的属性和变化之后的state,返回⼀个布尔值,true表示会触发重新渲染,false表示不会触发重新渲染,默认返回true,我们通常利⽤此⽣命周期来优化React程序性能 - render: 更新阶段也会触发此⽣命周期 - getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState),这个⽅法在render之后, - componentDidUpdate之前调⽤,有两个参数prevProps和prevState,表示之前的属性和之前的state,这个函数有⼀个返回值,会作为第三个参数传给componentDidUpdate,如果你不想要返回值,可以返回null,此⽣命周期必须与componentDidUpdate搭配使⽤ - componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot) ,该⽅法在getSnapshotBeforeUpdate⽅法之后被调⽤,有三个参数prevProps,prevState,snapshot,表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要⽤到DOM元素的状态,则将对⽐或计算的过程迁移至getSnapshotBeforeUpdate,然后在componentDidUpdate中统⼀触发回调或更新状态。 卸载阶段: - componentWillUnmount: 当我们的组件被卸载或者销毁了就会调⽤,我们可以在这个函数⾥去清除⼀些定时器,取消⽹络请求,清理⽆效的DOM元素等垃圾清理⼯作

前端问答 2019-12-02 03:24:16 0 浏览量 回答数 0

回答

1、禁止使用 iframe(阻塞父文档 onload 事件); *iframe 会阻塞主页面的 Onload 事件; *搜索引擎的检索程序无法解读这种页面,不利于 SEO; *iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe,最好是通过 javascript 动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。 2、禁止使用 gif 图片实现 loading 效果(降低 CPU 消耗,提升渲染性能); 3、使用 CSS3 代码代替 JS 动画(尽可能避免重绘重排以及回流)css3 平面动画开启 translateZ(0),打开浏览器 3d 加速,在一定程度可缓解卡顿。不宜多用; 4、对于一些小图标,可以使用 base64 位编码,以减少网络请求。但不建议大图使用,比较耗费 CPU; 小图标优势在于: 1.减少 HTTP 请求; 2.避免文件跨域; 3.修改及时生效; 5、页面头部的<style></style> 会阻塞页面;(因为 Renderer 进程中 JS 线程和渲染线程是互斥的); 6、页面头部<script</script> 会阻塞页面;(因为 Renderer 进程中 JS 线程和渲染线程是互斥的); 7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程); 8、网页 Gzip,CDN 托管,data 缓存 ,图片服务器; 9、前端模板 JS+数据,减少由于 HTML 标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数 10、用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能。 11、当需要设置的样式很多时设置 className 而不是直接操作 style。 12、少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。 13、避免使用 CSS Expression(css 表达式)又称 Dynamic properties(动态属性)。 14、图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。 15、 避免在页面的主体布局中使用 table,table 要等其中的内容完全下载之后才会显示出来,显示比 div+css 布局慢。 对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘 IO。 向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行, 能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得, 本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。 减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如 join 查询), 减少磁盘 IO 指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。 16、通过改变 src 的情况下**.MP3(不同于 mp3)在移动端有可能不能播放。

kun坤 2019-12-02 03:23:30 0 浏览量 回答数 0

回答

Zepto 对象 不能自定义事件 例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如: $('').bind('cust', function(){}); Zepto 的选择器表达式: [name=value] 中 value 必须用 双引号 " or 单引号 ' 括起来 例如执行:$('[data-userid=123123123]') 结果:Error: SyntaxError: DOM Exception 12 解决办法: $('[data-userid="123123123]"') or \$("[data-userid='123123123']") 2-1.zepto 的选择器没有办法选出 \$("div[name!='abc']") 的元素 2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性 应该使用$('option').not(function(){ return !this.selected }) 比如:jq:$this.find('option[selected]').attr('data-v') * 1 zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1 但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性 参考网址:https://github.com/madrobby/zepto/issues/503 2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法 Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight() Zepto.js: 由盒模型( box-sizing )决定 jQery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding 、 border )解决方式就是使用 .css('width') 而不是 .width() 。 3-1.边框三角形宽高的获取 假设用下面的 HTML 和 CSS 画了一个小三角形: <div class="caret" > </div > .caret { width: 0; height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue; border-style: none dotted solid; } jQuery 使用 .width() 和 .css('width') 都返回 ,高度也一样; Zepto 使用 .width() 返回 ,使用 .css('width') 返回 0px 。 所以,这种场景,jQuery 使用 .outerWidth() / .outerHeight() ;Zepto 使用 .width() / .height() 。 3-2.offset() Zepto.js: 返回 top 、 left 、 width 、 height jQuery: 返回 width 、 height 3-3.隐藏元素 Zepto.js: 无法获取宽高; jQuery: 可以获取。 Zepto 的 each 方法只能遍历 数组,不能遍历 JSON 对象 Zepto 的 animate 方法参数说明 :详情点击-> zepto 中 animate 的用法 zepto 的 jsonp callback 函数名无法自定义 DOM 操作区别 jq 代码: (function($) { $(function() { var $list = $("<ul><li>jQuery 插入</li></ul>", { id: "insert-by-jquery" }); $list.appendTo($("body")); }); })(window.jQuery); jQuery 操作 ul 上的 id 不会被添加。 zepto 代码: Zepto(function($) { var $list = $("<ul><li>Zepto 插入</li></ul>", { id: "insert-by-zepto" }); $list.appendTo($("body")); }); Zepto 可以在 ul 上添加 id 。 事件触发区别 jq 代码: (function($) { $(function() { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js", id: "ui-jquery" }); $script.appendTo($("body")); $script.on("load", function() { console.log("jQ script loaded"); }); }); })(window.jQuery); 使用 jQuery 时 load 事件的处理函数 不会 执行 zepto 代码: Zepto(function($) { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js", id: "ui-zepto" }); $script.appendTo($("body")); $script.on("load", function() { console.log("zepto script loaded"); }); }); 使用 Zepto 时 load 事件的处理函数 会 执行。 zepto 阻止事件冒泡 zepto 的 slideUP 和 slidedown 事件到底部才能触发 document.addEventListener( "touchmove", function(event) { event.preventDefault(); }, false );

茶什i 2019-12-02 03:21:22 0 浏览量 回答数 0

问题

UI自动化体系建设的创新实践

云效平台 2019-12-01 20:57:08 2984 浏览量 回答数 0

回答

JavaScript (ECMAScript) :JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义,但是JavaScript并不是这么一点含义,它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。 组成部分包括语法,类型,语句,关键字,保留字,操作符,对象。 其中,文档对象模型(DOM , Document Object Model)是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构,开发人员借助DOM Api对节点进行操作。可以通过浏览器F12进入开发者模式,查看层级关系。当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 功能大致上: · JavaScript 能够改变页面中的所有 HTML 元素 · JavaScript 能够改变页面中的所有 HTML 属性 · JavaScript 能够改变页面中的所有 CSS 样式 · JavaScript 能够对页面中的所有事件做出反应 同时,浏览器对象模型(Browser Object Model)使用BOM控制浏览器显示页面意外的部分。 javaScript脚本加载方式 1 通过在网页中加入标记JavaScript的开始和结束,将JavaScript代码放到之间 2 也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名 3 原则上,放在之间。但视情况可以放在网页的任何部分 4 一个页面可以有几个,不同部分的方法和变量,可以共享。 javaScript语句开发 (1)对大小写敏感 (2)自动忽略多余的空格 (3)在文本字符串中使用反斜杠对代码行进行换行 (4)单行注释(//)多行注释(/* */) JavaScript 是一个程序语言。语法规则定义了语言结构。 JavaScript 字面量 在编程语言中,一般固定值称为字面量,如 3.14。 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。 字符串(String)字面量 可以使用单引号或双引号: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 函数(Function)字面量 定义一个函数: function myFunction(a, b) { return a * b;} **JavaScript 变量 ** 在编程语言中,变量用于存储数据值。 JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值: var x, length x = 5 length = 6 JavaScript 操作符 JavaScript使用 算术运算符 来计算值: (5 + 6) * 10 JavaScript使用赋值运算符给变量赋值: x = 5 y = 6 z = (x + y) * 10 JavaScript语言有多种类型的运算符: JavaScript 语句 在 HTML 中,JavaScript 语句向浏览器发出的命令。 语句是用分号分隔: x = 5 + 6; y = x * 10; JavaScript 关键字 JavaScript 关键字用于标识要执行的操作。 和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。 var 关键字告诉浏览器创建一个新的变量: var x = 5 + 6; var y = x * 10; JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。 以下是 JavaScript 中最重要的保留字(按字母顺序): JavaScript 注释 不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略: // 我不会执行 JavaScript 数据类型 JavaScript 有多种数据类型:数字,字符串,数组,对象等等: var length = 16; // Number 通过数字字面量赋值 var points = x * 10; // Number 通过表达式字面量赋值 var lastName = "Johnson"; // String 通过字符串字面量赋值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值 var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 数据类型的概念 编程语言中,数据类型是一个非常重要的内容。 为了可以操作变量,了解数据类型的概念非常重要。 如果没有使用数据类型,以下实例将无法执行: 16 + "Volvo" 16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢? "16Volvo" 你可以在浏览器尝试执行以上代码查看效果。 在接下来的章节中你将学到更多关于数据类型的知识。 JavaScript 函数 JavaScript 语句可以写在函数内,函数可以重复引用: 引用一个函数 = 调用函数(执行函数内的语句)。 function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的结果 } JavaScript 字母大小写 JavaScript 对大小写是敏感的。 当编写 JavaScript 语句时,请留意是否关闭大小写切换键。 函数 getElementById 与 getElementbyID 是不同的。 同样,变量 myVariable 与 MyVariable 也是不同的。 JavaScript 字符集 JavaScript 使用 Unicode 字符集。 Unicode 覆盖了所有的字符,包含标点等字符。 三 推荐学习网站 JS具体的语法内容还有很多,可以参考官方API或者学习网站完成掌握,简单易学,推荐网站 菜鸟教程:https://www.runoob.com/js/js-tutorial.html w3cschool:https://www.w3school.com.cn/js/index.asp 四 推荐学习书籍 引用自 https://www.cnblogs.com/xhqq/p/7561384.html 个人觉得不错的,没事可以翻翻的。书籍如下: 《javascript设计模式》,张容铭写的,可能不太适合零基础的,是非常不错的进阶书籍。 《javascript面向对象编程指南》,风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式呢。 《js权威指南》、《js高级程序设计》,这两本书经典是经典,但是太厚,适合把其中任意一章都当成一本书来读。洋洋洒洒,很难一口气看完。比较适合当做参考书。 《你不知道的javascript》狙击js核心细节,闭包、原型、this讲得都还清楚。 《js设计模式与开发实践》js设计模式也是要学的,此书把js的设计模式讲得非常清晰,一点不晦涩,看起来没多少难度。 《正则指引》,分析源码时,如果正则表达式不懂,没法进行下去的。此书相对来说讲得比较清晰。 《基于MVC的JavaScript Web富应用开发》,看完后,基本能写出自己的mvc框架了。是本好书。 《javascript函数式编程》,js是一门函数式语言,此书是函数式编程一个入门,函数是一等公民那是非常重要的。 《js忍者秘籍》,jq作者写的,没有传说中的那么难读,话说就算你看完并理解所有知识点,也不会达到世界高手级别的。因为你还没有做到随心所欲。 《javascript框架设计》,如果初看此书,会觉得此书有罗列代码之嫌。在我看来,此书讲究的是框架的全局观。以上书籍是我认为是成就高手之路上必须看的,也需要反复看。 css相关的书籍,说实话我看得比较少,总共有六七本吧。有两本必须推荐一下: 《css权威指南》,css基础知识点那是讲得非常清楚的。什么层叠优先级、line-height啥的。不是随便一本书都敢叫“权威指南”的。 《css揭秘》,此书我也是不断的看,此书才不屑于全面讲css3各属性呢。css规范文档能讲的,它只会讲你最不在意的。此书解决的47问题,解决思路和解决方案同等重要,很有启发性。以上各书你都可以不买,至少买本此书吧

问问小秘 2020-03-03 09:32:57 0 浏览量 回答数 0

回答

要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至seajsfunction styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } } 很遗憾,这次在其他的浏览器中,想判断CSS是否加载完成就不是那么方便了,FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕。而且需要使用setTimeout间隔事件轮询: 代码如下 复制代码 // 代码节选至seajs function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { poll(node, callback); }, 1); } } setTimeout(function() { poll(node, callback); }, 0); SeaJS给出的完整的处理是这样的: 代码如下 复制代码 function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } // polling for Firefox, Chrome, Safari else { setTimeout(function() { poll(node, callback); }, 0); // for cache } } function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { poll(node, callback); }, 1); } } // 我的动态创建LINK函数function createLink(cssURL,lnkId,charset,media){ var head = document.getElementsByTagName('head')[0], linkTag = null; if(!cssURL){ return false; } linkTag = document.createElement('link'); linkTag.setAttribute('id',(lnkId || 'dynamic-style')); linkTag.setAttribute('rel','stylesheet'); linkTag.setAttribute('charset',(charset || 'utf-8')); linkTag.setAttribute('media',(media||'all')); linkTag.setAttribute('type','text/css'); linkTag.href = cssURL; head.appendChild(linkTag); } function loadcss(){ var styleNode = createLink('/wp-content/themes/BlueNight/style.css'); styleOnload(styleNode,function(){ alert("loaded"); }); } 在看到seajs的代码的时候,我立刻想起了我看到Diego Perini的另一个解决方案: 代码如下 复制代码 /* Copyright (C) 2010 Diego Perini All rights reserved.* cssready.js - CSS loaded/ready state notification* Author: Diego Perini Version: 0.1 Created: 20100616 Release: 20101104* License: http://www.111cn.net * Download: http://javascript.nwbox.com/cssready/cssready.js*/ function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules', s = t ? 'styleSheet' : 'sheet', l = d.getElementsByTagName('link'); // passed link or last link node link || (link = l[l.length - 1]); function check() { try { return link && link[s] && link[s][r] && link[s][r][0]; } catch(e) { return false; } } (function poll() { check() && setTimeout(fn, 0) || setTimeout(poll, 100); })(); } 其实,如果你读过jQuery的domready事件的判断的代码,原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。 还有,Fackbook则是通过在动态创建的CSS样式中包含一个固定的样式,例如#loadcssdom,loadcssdom就是一个高度为1px样式。然后动态创建一个DOM对象,添加这个loadcssdom样式。然后也是setTimeout轮询loadcssdo是否已经有1px的高度了。这个处理方式的解决方案,大家可以下《CSSP: Loading CSS with Javascript – and getting an onload callback.》 而《JavaScript Patterns》的作者Stoyan则在他的博客里,比较详细的说明了《When is a stylesheet really loaded?》。 看完了这些,你可能会感叹:汗,判断CSS是否加载完毕,目前还真不是那么容易!其实我这里算是一个抛砖引玉,因为开发中,除了动态加载CSS,我们还要动态加载JavaScript,动态加载HTML的操作,有空我也会写关于动态加载JavaScript的相关内容,不过在那之前,我建议你看看这些: 《ensure – Ensure JavaScripts/HTML/CSS are loaded on-demand when needed》,这个库是专门处理动态加载HTML,CSS,JavaScript的。就像作者介绍的那样: ensure is a tiny JavaScript library that provides a handy function ensure which allows you to load JavaScript, HTML, CSS on-demand, and then execute your code. ensure www.111cn.net ensures that the relevant JavaScript and HTML snippets are already in the browser DOM before executing your code that uses them. 《Tell CSS that JavaScript is available ASAP》 看完这个后,你可能就不会纠结:When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not。 好了,这次就说这么多了,希望对对大家的开发和学习有帮助!来源网络

元芳啊 2019-12-02 00:54:41 0 浏览量 回答数 0

回答

1 js 的基本数据类型? 2 JavaScript 有几种类型的值? 3 什么是堆?什么是栈?它们之间有什么区别和联系? 4 内部属性 [Class] 是什么? 5 介绍 js 有哪些内置对象? 6 undefined 与 undeclared 的区别? 7 null 和 undefined 的区别? 8 如何获取安全的 undefined 值? 9 说几条写 JavaScript 的基本规范? 10 JavaScript 原型,原型链? 有什么特点? 11 js 获取原型的方法? 12 在 js 中不同进制数字的表示方式? 13 js 中整数的安全范围是多少? 14 typeof NaN 的结果是什么? 15 isNaN 和 Number.isNaN 函数的区别? 16 Array 构造函数只有一个参数值时的表现? 17 其他值到字符串的转换规则? 18 其他值到数字值的转换规则? 19 其他值到布尔类型的值的转换规则? 20 {} 和 [] 的 valueOf 和 toString 的结果是什么? 21 什么是假值对象? 22 ~ 操作符的作用? 23 解析字符串中的数字和将字符串强制类型转换为数字的返回结果都是数字,它们之间的区别是什么? 24 + 操作符什么时候用于字符串的拼接? 25 什么情况下会发生布尔值的隐式强制类型转换? 26 || 和 && 操作符的返回值? 27 Symbol 值的强制类型转换? 28 == 操作符的强制类型转换规则? 29 如何将字符串转化为数字,例如 '12.3b'? 30 如何将浮点数点左边的数每三位添加一个逗号,如 12000000.11 转化为『12,000,000.11』? 31 常用正则表达式? 32 生成随机数的各种方法? 33 如何实现数组的随机排序? 34 javascript 创建对象的几种方式? 35 JavaScript 继承的几种实现方式? 36 寄生式组合继承的实现? 37 Javascript 的作用域链? 38 谈谈 This 对象的理解。 39 eval 是做什么的? 40 什么是 DOM 和 BOM? 41 写一个通用的事件侦听器函数。 42 事件是什么?IE 与火狐的事件机制有什么区别? 如何阻止冒泡? 43 三种事件模型是什么? 44 事件委托是什么? 45 ['1', '2', '3'].map(parseInt) 答案是多少? 46 什么是闭包,为什么要用它? 47 javascript 代码中的 'use strict'; 是什么意思 ? 使用它区别是什么? 48 如何判断一个对象是否属于某个类? 49 instanceof 的作用? 50 new 操作符具体干了什么呢?如何实现? 51 Javascript 中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是? 52 对于 JSON 的了解? 53 [].forEach.call($$(''),function(a){a.style.outline='1px solid #'+(~~(Math.random()(1<<24))).toString(16)}) 能解释一下这段代码的意思吗? 54 js 延迟加载的方式有哪些? 55 Ajax 是什么? 如何创建一个 Ajax? 56 谈一谈浏览器的缓存机制? 57 Ajax 解决浏览器缓存问题? 58 同步和异步的区别? 59 什么是浏览器的同源政策? 60 如何解决跨域问题? 61 服务器代理转发时,该如何处理 cookie? 62 简单谈一下 cookie ? 63 模块化开发怎么做? 64 js 的几种模块规范? 65 AMD 和 CMD 规范的区别? 66 ES6 模块与 CommonJS 模块、AMD、CMD 的差异。 67 requireJS 的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?) 68 JS 模块加载器的轮子怎么造,也就是如何实现一个模块加载器? 69 ECMAScript6 怎么写 class,为什么会出现 class 这种东西? 70 documen.write 和 innerHTML 的区别? 71 DOM 操作——怎样添加、移除、移动、复制、创建和查找节点? 72 innerHTML 与 outerHTML 的区别? 73 .call() 和 .apply() 的区别? 74 JavaScript 类数组对象的定义? 75 数组和对象有哪些原生方法,列举一下? 76 数组的 fill 方法? 77 [,,,] 的长度? 78 JavaScript 中的作用域与变量声明提升? 79 如何编写高性能的 Javascript ? 80 简单介绍一下 V8 引擎的垃圾回收机制 81 哪些操作会造成内存泄漏? 82 需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案? 83 如何判断当前脚本运行在浏览器还是 node 环境中?(阿里) 84 把 script 标签放在页面的最底部的 body 封闭之前和封闭之后有什么区别?浏览器会如何解析它们? 85 移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时? 86 什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点? 87 如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)? 88 检测浏览器版本版本有哪些方式? 89 什么是 Polyfill ? 90 使用 JS 实现获取文件扩展名? 91 介绍一下 js 的节流与防抖? 92 Object.is() 与原来的比较操作符 '==='、'==' 的区别? 93 escape,encodeURI,encodeURIComponent 有什么区别? 94 Unicode 和 UTF-8 之间的关系? 95 js 的事件循环是什么? 96 js 中的深浅拷贝实现? 97 手写 call、apply 及 bind 函数 98 函数柯里化的实现 99 99. 为什么 0.1 + 0.2 != 0.3?如何解决这个问题? 100 原码、反码和补码的介绍 101 toPrecision 和 toFixed 和 Math.round 的区别? 102 什么是 XSS 攻击?如何防范 XSS 攻击? 103 什么是 CSP? 104 什么是 CSRF 攻击?如何防范 CSRF 攻击? 105 什么是 Samesite Cookie 属性? 106 什么是点击劫持?如何防范点击劫持? 107 SQL 注入攻击? 108 什么是 MVVM?比之 MVC 有什么区别?什么又是 MVP ? 109 vue 双向数据绑定原理? 110 Object.defineProperty 介绍? 111 使用 Object.defineProperty() 来进行数据劫持有什么缺点? 112 什么是 Virtual DOM?为什么 Virtual DOM 比原生 DOM 快? 113 如何比较两个 DOM 树的差异? 114 什么是 requestAnimationFrame ? 115 谈谈你对 webpack 的看法 116 offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别? 117 谈一谈你理解的函数式编程? 118 异步编程的实现方式? 119 Js 动画与 CSS 动画区别及相应实现 120 get 请求传参长度的误区 121 URL 和 URI 的区别? 122 get 和 post 请求在缓存方面的区别 123 图片的懒加载和预加载 124 mouseover 和 mouseenter 的区别? 125 js 拖拽功能的实现 126 为什么使用 setTimeout 实现 setInterval?怎么模拟? 127 let 和 const 的注意点? 128 什么是 rest 参数? 129 什么是尾调用,使用尾调用有什么好处? 130 Symbol 类型的注意点? 131 Set 和 WeakSet 结构? 132 Map 和 WeakMap 结构? 133 什么是 Proxy ? 134 Reflect 对象创建目的? 135 require 模块引入的查找方式? 136 什么是 Promise 对象,什么是 Promises/A+ 规范? 137 手写一个 Promise 138 如何检测浏览器所支持的最小字体大小? 139 怎么做 JS 代码 Error 统计? 140 单例模式模式是什么? 141 策略模式是什么? 142 代理模式是什么? 143 中介者模式是什么? 144 适配器模式是什么? 145 观察者模式和发布订阅模式有什么不同? 146 Vue 的生命周期是什么? 147 Vue 的各个生命阶段是什么? 148 Vue 组件间的参数传递方式? 149 computed 和 watch 的差异? 150 vue-router 中的导航钩子函数 151 两个router 的区别? 152 vue 常用的修饰符? 153 computed 和 watch 区别? 154 keep-alive 组件有什么作用? 155 vue 中 mixin 和 mixins 区别? 156 开发中常用的几种 Content-Type ? 157 如何封装一个 javascript 的类型判断函数? 158 如何判断一个对象是否为空对象? 159 使用闭包实现每隔一秒打印 1,2,3,4 160 手写一个 jsonp 161 手写一个观察者模式? 162 EventEmitter 实现 163 一道常被人轻视的前端 JS 面试题 164 如何确定页面的可用性时间,什么是 Performance API? 165 js 中的命名规则 166 js 语句末尾分号是否可以省略? 167 Object.assign() 168 Math.ceil 和 Math.floor 169 js for 循环注意点 170 一个列表,假设有 100000 个数据,这个该怎么办? 171 js 中倒计时的纠偏实现? 172 进程间通信的方式? 173 如何查找一篇英文文章中出现频率最高的单词? 174 174道 JavaScript 面试题,合集

剑曼红尘 2020-04-02 14:05:35 0 浏览量 回答数 0

回答

先说结论: 不要对接!不要对接!不要对接! 开个玩笑,以上仅代表个人观点,大家也知道这种“三体式警告”根本没有用的,我自己也研究如何对接,说不定做完后就觉得“真香”了。 为什么要对接? 首先讨论一下为什么要把 Flutter 对接到 Web 生态。 Flutter 现在是一个炙手可热的跨平台技术,能够一套代码运行在 Android、iOS、PC、IoT 以及浏览器上,被认为是下一代跨平台技术。相比于 Weex 和 React Native 可以很好地解决多平台一致性问题,原生渲染性能相近,上层没有 JS 那么厚的封装层次,整体性能会略好一些。 但是大部分兴冲冲去学 Flutter 的人疑惑的第一个问题就是:为什么 Flutter 要用 Dart?一个全新的语言意味着新的学习成本,难道 JS 不香吗?JS 不香不是还有 TypeScript 吗!事实上 Flutter 抛弃的岂止是 JS 这门语言,也抛弃了 HTML 和 CSS,设计了一套解耦得更好的 Widget 体系,Flutter 抛弃的是整个 Web,致力于打造一个新的生态,但是这个生态无法复用 Web 生态的代码和解决方案。尤其是之前所有跨平台方案 Hybrid、React Native、Weex 都是对接 Web 生态的,这让 Flutter 显得有些格格不入,也让大部分前端开发者望而却步。 下面是我整理出来的,前端开发者使用 Flutter 的各方面成本: 因为 Flutter 的开发模式和前端框架比较像(可以说就是抄的 React),所以框架的学习成本并不高,稍微高一些的是 Dart 语言的学习成本,另外还要学习如何用 Widget 组装 UI,虽然很多布局 Widget 设计得和 CSS 很像,灵活度还是差了很多。要想在真实项目中用起来,还要改造整个工具链,以“Native First”的视角做开发,开发 Flutter 和开发原生应用的链路是比较像的,和开发前端页面有较大差异。最高的还是生态成本,前端生态的积累无论是代码还是技术方案都很难复用,这是最痛的一点,生态也是 Flutter 最弱的一环。 无论是为了先进的技术理念还是出于商业私心,先不管 Flutter 为什么抛弃 Web 生态,现实问题是最大的 UI 开发者群体是前端,最丰富的生态是 Web 生态,我觉得 Web 技术也是开发 UI 最高效的方式。如果能在上层使用 Web 技术栈开发,在底层使用 Flutter 实现跨平台渲染,不是可以很好的兼顾开发效率、性能和跨平台一致性吗?还能复用 Web 技术栈大量的技术积累。 可能这些理由也不够充分,暂且先照着这个假设继续分析,最后再重新讨论到底该不该对接。 关于 Flutter 和 Web 生态的对接涉及两个方面: 从 Web 到 Flutter。就是使用 Web 技术栈来开发,然后对接到 Flutter 上实现跨平台渲染。对 Web 来说是解决性能和跨平台一致性问题,对 Flutter 来说是解决生态复用问题。从 Flutter 到 Web。就是官方已经实现的 Web support for Flutter,把已经用 Dart 开发好的 App 编译成 HTML/JS/CSS 然后运行在浏览器上,可以用于降级和外投场景。 如何实现“从 Web 到 Flutter”? 首先分析一下 Flutter 的架构图,看看可以从哪里下手。 Flutter 可以分为 Framework 和 Engine 两部分,Engine 部分比较底层也比较稳定了,最好不要动,需要改的是用 Dart 实现的 Framework。要想对接 Web 生态的话,JS 引擎肯定是要引入的,至于是否保留 Dart VM 有待讨论。图中最上面 Material 和 Cupertino 两个 UI 库前端是不需要的,前端有自己的。关键是 Widget 这部分,是替换成 HTML/CSS 的方式写 UI,还是继续保留 Widget 但是把语言换成 JS,不同方案给出的解法也不一样。 有不少方案可以实现对接,业界有挺多尝试的,我总结了下面三种方式: - TS 魔改:用 JS 引擎替换掉 Dart VM,用 JS/TS 重新实现 Flutter Framework(或者直接 dart2js 编译过来)。 - JS 对接:引入 JS 引擎同时保留 Dart VM,用前端框架对接 Flutter Framework。 - C++ 魔改:用 JS 引擎替换掉 Dart VM,用 C++ 重新实现 Flutter Framework。 TS 魔改 TS 魔改就是完全抛弃掉 Dart VM,用 TypeScript 重新实现一遍用 Dart 写的 Flutter Framework。 为啥是 TS 而不是 JS?这不是因为 TS 是个大热门嘛,而且向下兼容 JS,现在几乎所有时髦的框架都要用 TS 重写了。 这种方案的出发点是“如果能把 Flutter 的 Dart 换成 JS 就好了”,最容易想到的路就是把 Dart 翻译成 TS,或者直接用 dart2js 把代码编译成 js,但是编译出来的代码包含很多 dart:ui 之类的库的封装,生成的包也挺大的,也比较难定制需要导出的接口,不如干脆用 TS 重写一遍,工具链更熟悉一些,还可以加一些定制。 理论上讲翻译之后 Flutter 绝大部分功能都依然支持,可以复用各种 npm 包,还可以动态化,但是丧失了 AOT 能力,JS 语言的执行性能应该是不如 Dart 的。而且所有节点的布局运算都发生在 JS,底层只需要提供基础的图形能力就好了,就好像是基于 Canvas API 写了一套 UI 框架,性能未必有现存前端框架的性能高。 此外最大的问题是如何与官方 Flutter 保持一致,假如现在是从 v1.13 版本翻译过来的,以后官方升级到了 v1.15 要不要同步更新?这个过程没啥技术含量,而且需要持续投入,做起来比较恶心。 另外还需要考虑上层是用 Widget 的方式写 UI,还是用前端熟悉的 HTML+CSS。如果依然用 Widget 的话,那大部分前端组件还是用不了的,UI 还是得重写一遍。反正要重写的话,成本也没降下来,那就用 Dart 重写呗…… 直接用官方原版 Flutter 也避免每次更新都要翻译一遍 Dart 代码。所以既然选择了对接前端生态,那就要对接 CSS,不然就没有足够的价值。然而 CSS 和 Widget 的对接也是很繁琐的过程,而且存在完备性问题。 JS 对接 翻译代码的方式不够优雅,那就保留 Dart,把 JS/CSS 对接到 Widget 上面不就好了? 当然可以,这种方式是仅把 Flutter 当做了底层的渲染引擎,上层保持前端框架的写法,仅把渲染部分对接到 Flutter。现存的很多前端框架都把底层渲染能力做了抽象,可以对接到不同渲染引擎上,如 Vue/Rax 同时支持浏览器和 Weex,用同样的方式,可以再支持一个 Flutter。 这种方式对前端框架的兼容性比较好,但是链路太长了,业务代码调用前端框架接口做渲染,一顿操作之后发出了渲染指令,这个渲染指令要基于通信的方式传给 Flutter Framework,这中间涉及一次 JS 到 C++ 再到 Dart 的跨语言转换,然后再接收到渲染指令之后还要转成相应的 Widget 树,从 CSS 到 Widget 的转换依然很繁琐。而且 Widget 本身是可以带有状态的,本身就是响应式更新的,在更新时会重新生成 widget 并 diff,如果在前端更新 UI 的话,前端框架在 js 里 diff 一次 vdom,传到 Flutter 之后又 diff 一次 widget。 如果要绕过 Widget 直接对接图中的 Rendering 这一层,可以绕过 widget diff 但是得改 Flutter Framework 的渲染链路,既然要改 Flutter Framework 那为什么不直接用 TS 魔改呢,还绕过了 JS 到 Dart 的通信,又回到了第一种方案。 总结来说,这个方案的优点是:实现简单、能最大化保留前端开发体验,缺点是:渲染链路长、通信成本高、响应式逻辑冲突、CSS 转 Widget 不完备等。 C++ 魔改 想要干掉 Dart VM,就需要用其他语言重新实现用 Dart 开发的 Framework,用 JS/TS 可以,用 C++ 当然可以,最硬核的方式就是用 C++ 重新实现 Flutter 的 Framework,然后接入 JS 引擎,通过 binding 把 C++ 接口透出到 JS 环境,上层应用还是用 JS 做开发。 把 Framework 层下沉到 C++ 之后,不仅会有更好的性能,也能支持更多语言。原本 Flutter Framework 是在 Dart VM 之上的,必须依赖 Dart VM 才能运行,所以对 Dart 有强依赖;用 C++ 重新实现之后,JS 引擎是在 C++ 版 Framework 之上的,框架本身并不依赖 JS 引擎,还可以对接其他各种语言,如对接了 JVM 之后可以支持 Java 和 Kotlin,对接回 Dart VM 可以继续支持 Dart。 这个方案可以增强性能,也能保持和 Flutter 的一致性,但是改造成本和维护成本都相当高。C++ 的开发效率肯定不如 Dart,当 Flutter 快速迭代之后如何跟进是很大的问题,如果跟进不及时或者实现不一致那很可能就分化了。从 CSS 到 Widget 的转换也是不得不面对的问题。 几种方案对比 把上面几种方案画在同一张图里是这个样子的: 图中实线部分表示了跨语言的通信,太过频繁会影响性能,虚线部分表示了其他对接可能性。 从下到上,Flutter Engine 是不需要动的,这一层是跨平台的关键。Framework 则有三种语言版本,JS/TS、Dart、C++,性能是 C++ 版本最好,成本是 Dart 版本最低。然后还需要向上处理 HTML/CSS 和 Widget 的问题,可以直接对接一个前端框架,也可以直接在 C++ 层实现(不然需要透出的 binding 接口就太多了,用通信的方式也太过频繁了)。 如何实现“从 Flutter 到 Web”? 这个功能官方已经实现了,可以把使用 Dart 开发的 App 编译成 Web App 运行在浏览器上,官方文档以介绍用法和 API 为主,我这里简单分析一下内部具体的实现方案。 实现原理 结合 Flutter 的架构图来看,要实现 Web 到 Flutter 需要改造的是上层 Framework,要实现 Flutter 到 Web 需要改造的则是底层 Engine。 Framework 对 Engine 的核心依赖是 dart:ui,这是库是在 Engine 里实现的,抽象出了绘制 UI 图层的接口,底层对接 skia 的实现,向上透出 Dart 语言的接口。这样来看,对接方式就比较简单了: 使用 dart2js 把 Framework 编译成 JS 代码。基于浏览器的 API 重新实现 dart:ui,即 dart:web_ui。 把 Dart 编译成 JS 没什么问题,性能可能会有一点影响,功能都是可以完全保留的,关键是 dart:web_ui 的实现。在原生 Engine 中,dart:ui 依赖 skia 透出的 SkCanvas 实现绘制,这是一套很底层的图形接口,只定义了画线、画多边形、贴图之类的底层能力,用浏览器接口实现这一套接口还是很有挑战的。上图可以看到 Web 版 Engine 是基于 DOM 和 Canvas 实现的,底层定义了 DomCanvas 和 BitmapCanvas 两种图形接口,会把传来的 layer tree 渲染成浏览器的 Element tree,但是节点上仅包含了 position, transform, opacity 之类的样式,只用到 CSS 很小的一个子集,一些更复杂的绘制直接用 2D canvas 实现。 存在的问题 我编译了一个还算复杂的 demo 试了一下,性能很不理想,滑动不流畅,有时候图片还会闪动。生成出来的 js 代码有 1.1MB (minify 之后,未 gzip),节点层次也比较深,我评估这个页面用前端写不会超过 300KB,节点数可以少一半以上。 另外再看一下 Flutter 仓库的 issue,过滤出 platfrom-web 相关的,可以看到大量:文字编辑失效、找不到光标、ListView 在 ios 上不可滚动、checkbox/button 行为不正常、安卓滚动卡顿图片闪烁、字体失效、某些机型视频无法播放、文字选中后无法复制、无法调试…… 感觉 flutter for web 已经陷入泥潭,让人回想起前端当年处理各种浏览器兼容性的噩梦。 这些性能和兼容性问题,核心原因是浏览器未暴露足够的底层能力,以及浏览器处理手势、用户输入和方式和 Flutter 差异巨大。 实现 Flutter Engine 需要的是底层的图形接口和系统能力,虽然canvas 提供了相似的图形接口,如果全部用 canvas 实现的话很难处理可访问性、文本选择、手势、表单等问题,也会存在很多兼容性问题。所以真实方案里用的是 Canvas + DOM 混合的方式,封装层次太高了,渲染链路太长。就好像 Flutter Framework 里进行了一顿猛如虎的操作之后,节点生成好了、布局算好了、绘制属性也处理好了,就差一个画布画出来了,然后交到浏览器手里,又生成一遍 Element,再算一遍布局,在处理一遍绘制,最终才交给了底层的图形库画出来。 再比如长页面的滚动,浏览器里只要一条 CSS (overflow:scroll) 就可以让元素可滚动,手势的监听以及页面的滚动以及滚动动画都是浏览器原生实现的,不需要与 JS 交互,甚至不需要重新 layout 和 paint,只需要 compositing。如上图所示,在 Flutter 中 Animation 和 Gesture 是用 Dart 实现的,编译过来就是 JS 实现的,浏览器本身并不知道这个元素是否可滚,只是不断派发 touchmove 事件,JS 根据事件属性计算节点偏移,然后运算动画,然后把 transform 或者新的 position 作用到节点上,然后浏览器再来一遍完整的渲染流程…… 优化方案 性能和兼容性的问题还是要解决的,短期内先把 issue 解掉,长线的优化方案,官方有两种尝试: 使用 CSS Painting API 做绘制。 a, 这是还处于提案状态的新标准,可以用 JS 实现一些绘制功能,自定义 CSS 属性。 b. 目前还未实现,需要等浏览器先把 CSS Houdini 支持好。 使用 WebAssembly 版本的 Skia 做绘制 https://skia.org/user/modules/canvaskit a, 这样可以发挥 wasm 的性能优势,并且保持 skia 功能的一致。但是目前 wasm 在浏览器环境里未必有性能优势,这里不展开讨论了。 b. 已经部分实现,参考这里的配置启用功能: https://github.com/flutter/flutter/issues/41062#issuecomment-533952994 这两个方案都是想更多的利用到浏览器的底层能力,只有浏览器暴露了更多底层能力,才能更好的实现 Flutter 的 Web Engine。不过这个要等挺久的时间,我们也参与不了,现阶段想要使用 flutter for web,还是得保持现有架构,一起参与进去把 issue 解决掉,优先保障功能,其次优化性能。 一种适应性更好的架构 如果理想化一点,能不能从架构角度让 Flutter 和 Web 生态融合的更好一些呢? 回顾文章最开始的官方架构图,上面是 Framework(Dart),下面是 Engine(C++),切分在 Foundation 这一层,双方之间的交互是几何图形信息。如果还保持这个架构,把切分层次划分的更靠上一些,如下图所示,划分在 Widgets 和 Rendering 这一层,理论上讲对 Flutter 的开发者来说是无感知的,因为上层的开发语言和 Widget 接口都是不变的。 切分在这一层,Framework 和 Engine 之间的交互就不再是几何图形而是节点信息,Widget 的组合、setState 响应式更新、Widget diff 都还在 Dart 中,展开后的 RenderObject 的布局、绘制、裁剪、动画全都在 C++ 中,不仅有更好的性能,还可以与 Engine 有更好的结合。 或者说,还原本保留 Engine 的设计,把下沉的这部分逻辑上划分成 Renderer,就有了如下三层的结构: 这样划分出来的每一层都有明确的定位: Framework: 开发框架。为开发者提供可编程 API,实现响应式的开发模式,提供细粒度 Widget 供开发者自由封装和组合。Renderer: 渲染引擎。专门实现布局、绘制、动画、手势的的处理,这部分功能相对独立,是可以与开发框架解耦的,也不必与特定语言绑定。Engine: 图形引擎。实现跨平台一致的图形接口,合成输入的层并绘制到屏幕上,处理好平台力的接入和适配。 这样切分除了有性能优势以外,也使得渲染引擎摆脱了对 Dart 的依赖,能够支持多种语言,也能支持多种开发模式。对接到 Dart VM 就可以用 Dart 写代码,对接到 JS 引擎就可以用 JS 写代码,对接到 JVM 还可以写 Java,但是无论怎么写,底层的渲染能力是一样的,一套统一的布局算法,动画和手势的处理行为也是一致的。 在这样的架构下,对接 Web 生态就更容易了。Dart 和 Widget 是前端不想要的,希望能换成 JS 和 CSS,但是又想要底层的跨平台一致渲染引擎,那从 Renderer 层开始对接就好了,绕过了所有不想要的,也保留了所有想要的。 要实现 Flutter for Web 也更简单了一些。在 Engine 层做对接,一直苦于浏览器透出的底层能力不够,如果是在 Renderer 之上做对接就更容易一些,基于 JS/CSS/DOM/Canvas 的能力封装出一套 Rendering 接口,供 Widget 调用就好了,这样可以使渲染链路更短一些,但是依然要处理 Widget 和 DOM/CSS 之间的兼容性问题。 再讨论一遍:为什么要对接? 技术上已经分析完了,要想搞定 Flutter 生态和 Web 生态的对接,需要投入很大的成本,所以真正决定做之前,要先讨论清楚为什么要做对接?到底要不要做对接? 首先 Google 官方对 Flutter 的定位就是个问题。Flutter 设计之初就是不考虑 Web 生态的,甚至在刻意回避,倡导的是更贴近原生的开发方式。我之所以在开头说不要对接,原因也很简单:两种技术设计理念不同,不是朝着一个方向发展的,生态不通,技术方案不通,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的,如果 Google 抵制这个方向,那就不好做了。不过现在官方已经支持了 Flutter for Web,已经向 Web 生态迈了一步,未来是否进一步与 Web 融合,也是有可能的。 另外就是跨平台技术本身的问题,浏览器发展了二三十年,已经是个很强大的跨平台产品了,几乎是 Web 的代名词了,这一点无人能敌。但是也臃肿不堪,有大量历史包袱,性能和体验不够好,和 Native 的结合度差,尤其在移动和 IoT 平台。虽然硬件性能在不断提升,但这是所有软件共享的,浏览器的性能和体验总会比 Native 差一些,差的这一些很可能就是新业务和新场景的发挥空间。观察一下近几年新诞生的业务场景,很多都是利用到了 Native 新提供的能力才火爆起来的,如 AI/AR/ 视频 / 直播 等,有因为新的 Web API 而孵化生出来的商业模式吗? 原文链接: https://mp.weixin.qq.com/s?__biz=MzAxNDEwNjk5OQ==&mid=2650405725&idx=1&sn=0b7476f7c7c01df7fdafda578f9ceb98&chksm=83953345b4e2ba53917ac30b709c07be15bd1c2fd5ae2a8ecfbb129b3813f771621b8fac95ca&scene=27#wechat_redirect

剑曼红尘 2020-03-10 09:54:40 0 浏览量 回答数 0

问题

12个非常实用的JavaScript小技巧

技术小菜鸟 2019-12-01 21:37:52 3620 浏览量 回答数 1

问题

【精品问答】前端开发必懂之JS技术二百问

茶什i 2019-12-01 22:05:04 146 浏览量 回答数 0

问题

程序员报错行为大赏-配置报错

问问小秘 2020-06-11 13:18:25 6 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站