Chrome web.dev Live 2020总结】第一天第9集:JS的轻松实现

网友投稿 606 2022-05-30

【Chrome web.dev Live 2020总结】第一天第9集:JS的轻松实现

本课程主要内容:

1. 简单介绍当前主流web开发,JavaScript的现状与问题。

2. 介绍如何通过amp-script执行JavaScript

1 JavaScript现状

在当前主流web应用中,JavaScript非常流行,甚至在很多web开发者严重,JavaScript无所不能。但是,过多的JavaScript会严重影响web应用的性能,比如我们在刷手机时,经常就会盯着手机等待页面响应。对于提升页面性能,可以通过实现更多的js来提升页面的性能,但是引入的越多,web体积就会越庞大。

JavaScript为了避免线程执行出错,有自己完整的执行队列:

JavaScript单线程执行,浏览器web UI是单线程操作,页面渲染只有有一个线程可以修改DOM,Js如果多线程执行可能操作页面crash。js多线程的可行性,在很早之前就有过分析的,但是因为一些限制,无法替换JavaScript单线程执行。

2 amp-script

AMP旨在为用户提供更快,更稳定的网站。过多的JavaScript可能会使网页变慢。但是有时您需要创建AMP组件不提供的功能。在这种情况下,您可以使用该组件编写自定义JavaScript。

在2018年引入的WorkerDom,是Main thread的副本,web开发者只会修改WorkerDom,当WorkerDom修改时,会postMessage通知主Dom,同步修改实现修改真实Dom。当真实Dom修改时,也会postMessage去同步WorkerDom。存在开发者可以在主线程之外去操作dom。

在Web Worker中运行JavaScript。Web Workers无法直接访问DOM,因此允许其访问DOM的虚拟副本,该副本与真实DOM保持同步。提供许多常见DOM API的仿真,您几乎可以使用通常的方式在JavaScript中使用所有这些仿真。

如果您随时需要调试脚本,则可以使用与任何JavaScript相同的方式在Web Worker中的JavaScript中设置断点,您只需要知道在哪里可以找到它,更多使用指导详见:

amp-script指导:https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript-tutorial/

参考文档:https://amp.dev/documentation/components/amp-script/?format=websites

视频直播 web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:丁哥看软件(四):考试容易漏掉人才
下一篇:XML DOM 获取节点值
相关文章