「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
在浏览器中运行的脚本语言就是 JavaScript 了，JavaScript 是前端实际开发中接触最多的内容，我们这一部分是 html，不会去展开 js 内容本身，主要是看一些涉及到的 html 元素。
加载 js 使用的是 script 标签，这个大家再熟悉不过了，在此之前我们先看一下 noscript 标签。
noscript
noscript 用于在浏览器不支持 js 时显示提示内容，由于现代 web 应用几乎都离不开 js，某些 SSR 渲染的静态站点可能回去了支持无 js 访问，我们可以在开发者工具中打开设置，debugger 选项下面有 disable javascript 的功能开关，用来模拟无 js 的场景，当然实用性比较小，不过在某些网站可以通过禁用 js 来实现一些特殊的操作（可以跳过 **DN 不登录无法复制）。
script
script 是用来加载 js 的标签，可以直接写 js 程序也可以引入外部脚本资源，用法上大家都比较熟悉，这里不关注 js 语法，看一下 script 标签自身的一些属性。
async 和 defer 是两个常用于性能优化的属性，在此之前我们回顾一下 html 的解析流程：浏览器会从上到下读取并解析 html，遇到 js 时会解析执行脚本内容，这个过程会阻塞 html 处理，在页面上会影响首屏加载。设置 async 或 defer 属性都可以避免加载流程阻塞，但是二者的处理机制是不同的：async 是异步加载，设置为 async 的 script 标签会被放在延缓队列中，它们会并行请求尽快加载，不保证执行顺序，追求的是加载效率，defer 是推迟加载，就是单纯的把加载时机放到 html 加载之后，还是会按照次序执行，而且只有全部加载完成后才会触发 DOMContentLoaded 事件。
另一个值得关注的是 type 属性，它可以设置值为 module，此时会按照 ES Module 来加载模块。
此外其他与加载和网络请求相关的属性之前在 link 等标签中已经见过，这里表达的含义也基本是一致的，不做额外说明。
除了 script 标签外，还有一个和 js 密不可分的标签就是 canvas，canvas 标签本身只会渲染一个画布，其内容完全是由 js 脚本逻辑决定的，本篇剩余内容我们看一下 canvas 标签。
canvas
canvas 标签可以设置宽高属性，指定一个固定大小的画布，之后就可以在上面进行绘图了，canvas 绘图部分属于 js API，这里简单看一下 context 相关的内容。
canvas 最常用的 context 是 2d，它是使用一组原生的 js API 进行绘制的，除了 2d，还可以使用 WebGL 进行 2d 或 3d 绘图，WebGL 是 OpenGL ES 2.0 的浏览器实现，可以调用 GPU 的绘制能力进行 2d 或 3d 图形渲染。此外正在开发中的 WebGPU API 也是在 canvas 画布上实现的绘图。
