wordpress直接上传视频网站吗,网站做公司,易语言源码论坛,查看网站开通时间关于web性能一些特性汇总 DOMContentLoaded load load事件是window对象上的事件。指的是网页资源已经加载完毕#xff08;包括但不限于DOM、图片、音频、脚本、插件资源以及CSS#xff09;。 DOMContentLoaded事件是document对象上的事件。指的是DOM已经加载完毕。IE中…关于web性能一些特性汇总 DOMContentLoaded load load事件是window对象上的事件。指的是网页资源已经加载完毕包括但不限于DOM、图片、音频、脚本、插件资源以及CSS。 DOMContentLoaded事件是document对象上的事件。指的是DOM已经加载完毕。IE中有个私有的事件onreadystatechange事件跟这个标准事件类似。 因此DOMContentLoaded事件都会比load事件提前触发(jQuery重点ready event 就是兼容各种情况的DOMContentLoaded实现感觉DOMContentLoaded时JS脚步也跑完了毕竟放在body前。 event.target event.currentTarget event.delegateTarget 在事件冒泡过程中的当前DOM元素。 触发事件的DOM元素。 绑定了当前正在调用jQuery 事件处理器的元素。 async defer script TAG) async 异步下载下载后立即执行 defer 异步下载按顺序执行,执行区间大致在DOMContentLoaded 和window.load 之间 FPSFrames Per Second每秒传输帧数 正如Andrey Kosyakov Chromium 的博客中提到的即使你的程序没有很多动画帧的概念也是有用的因为浏览器在处理输入事件时会生成重复动作的序列。如果你在一帧中留有足够的时间处理这些事件就会使你的程序看上去有更好的响应性这意味着更好的用户体验。 如果我们的目标是60fps, 那么最多有 16.66ms 去做所有的事情。这个时间并不多所以尽可能从动画中挤出时间来提高性能还是很重要的。 CSS阻塞与JS阻塞 JS阻塞所有浏览器在下载JS的时候会阻止一切其他活动比如其他资源的下载内容的呈现等等。 直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 为了提高用户体验新一代浏览器都支持并行下载JS但是JS下载仍然会阻塞其它资源的下载例如.图片css文件等。 由于浏览器为了防止出现JS修改DOM树需要重新构建DOM树的情况所以就会阻塞其他的下载和呈现。 嵌入JS会阻塞所有内容的呈现而外部JS只会阻塞其后内容的显示 2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载但会阻塞外部脚本的执行。 CSS阻塞CSS本来是可以并行下载的在什么情况下会出现阻塞加载了(在测试观察中IE6下CSS都是阻塞加载 当CSS后面跟着嵌入的JS的时候该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面就不会出现阻塞的情况了。 根本原因因为浏览器会维持html中css和js的顺序样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载所以就会出现上面CSS阻塞下载的情况。 CSS匹配规则 HTML 经过解析生成 DOM Tree这个我们比较熟悉而在 CSS 解析完毕后需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree最终用来进行绘图。Render Tree 中的元素WebKit 中称为「renderers」Firefox 下为「frames」与 DOM 元素相对应但非一一对应一个 DOM 元素可能会对应多个 renderer如文本折行后不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视比如 display:none 的元素。在建立 Render Tree 时WebKit 中的「Attachment」过程浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果Style Rules来确定生成怎样的 renderer。对于每个 DOM 元素必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的在遍历 DOM Tree 时从 Style Rules 中去寻找对应的 selector。因为所有样式规则可能数量很大而且绝大多数不会匹配到当前的 DOM 元素因为数量很大所以一般会建立规则索引树所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。如果正向解析例如「div div p em」我们首先就要检查当前元素到 html 的整条路径找到最上层的 div再往下找如果遇到不匹配就必须回到最上层那个 div往下再去匹配选择器中的第一个 div回溯若干次才能确定匹配与否效率很低。逆向匹配则不同如果当前的 DOM 元素是 div而不是 selector 最后的 em那只要一步就能排除。只有在匹配时才会不断向上找父节点进行验证。但因为匹配的情况远远低于不匹配的情况所以逆向匹配带来的优势是巨大的。同时我们也能够看出在选择器结尾加上「*」就大大降低了这种优势这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。文档说明 此文档的所有资源都是来源网络仅在此做了分类整理备忘持续更新,所有精华之处并非原创所有原创之处并不优秀。 参考链接 js中的window.onload和jquery中的load区别的讲解CSS阻塞与JS阻塞script之deferasync使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能Sizzle引擎markdown转载于:https://www.cnblogs.com/advence-liz/p/6101551.html
