【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组件不提供的功能。在这种情况下，您可以使用该<amp-script>组件编写自定义JavaScript。

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

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

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

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

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