第二章 HTML中的JavaScript
本章主要写了JavaScript和html的关系,如何在html中引用JavaScript,如何确保用户体验。
一、 <script>元素
我们一般使用<script>元素将JavaScript插入到Html中。该元素主要有如下属性:
- async :异步执行脚本。(只对外部文件生效)
- charset
- crossorigin
- defer:表示脚本可以延长到文档完全被解析和显示后再执行。(只对外部文件生效)
- integrity
- language(废弃)
- scr:表示包含要执行的代码的外部文件
- type
1. 标签位置(确保JavaScript不可用时的用户体验)
过去往往将JavaScript放在head标签内,这意味着必须将所有js代码下载解析解释完成后才能开始渲染页面,这会使页面渲染明显延迟。
为了解决这个问题,现在往往将script标签放在body中的最后。
2. 延迟执行脚本
使用前文提到的defer标签(只对外部文件生效)可以表示脚本会在整个页面都解析完毕后再执行。相当于告诉浏览器立即下载,延后执行。
3. 异步执行脚本
使用async标签,告诉浏览器立即下载,但是不确保脚本执行的次序。相当于告诉浏览器,不必等脚本下载和执行后再加载页面,也不必等到该异步脚本下载和执行后再加载其他脚本。
因此,异步脚本不应该在加载期间修改DOM。
4. 动态加载脚本
这个涉及到DOM,暂时不想看。
二、行内代码和外部代码
推荐使用外部代码的理由:
- 可维护性
- 缓存
- 适应未来
三、<noscript>元素
如果浏览器不支持脚本,可以使用<noscript>元素指定显示的内容。如果浏览器支持脚本,该元素中的任何内容都不会被渲染。
更多推荐
第二章 HTML中的JavaScript
发布评论