云社区 博客 博客详情
云社区 博客 博客详情

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

华为云官网技术团队 发表于 2020-07-22 15:09:07 07-22 15:09
华为云官网技术团队 发表于 2020-07-22 15:09:07 2020/07/22
0
0

【摘要】 本文将简单介绍当前主流web开发,JavaScript的现状与问题。

本课程主要内容:

  • 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


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消