JavaScript高级程序设计——读书笔记第二回

最新推荐文章于 2024-07-12 16:27:40 发布

隔壁王大头

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量226

点赞数

分类专栏：高程笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_36052339/article/details/77414153

版权

高程笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第二章在HTML中使用JavaScript

前言

本章主要给我们介绍了<script>元素，嵌入脚本和外部脚本，文档模式以及<noscript>元素。讲述了如何在HTML文档中引入JavaScript（后面简称js）的两种方式，以及其它应该注意的地方，请听我慢慢道来。

<script>元素
a.属性
async:异步加载脚本，不必等待其它脚本加载且不阻塞文档的解析呈现。
charset:指定代码的字符集，大多数浏览器忽略此值。
defer：延迟加载脚本，等文档完全解析和显示之后再执行。
language：已废弃。
src：外部脚本文件的路径。不仅可以引入本地域的js文件还可以引入外部域的js文件，这一特性使<script>元素变得格外强大；也正因为这个特性让我们又多拥有了一项解决跨域问题的技术——“JSONP”（在后面的笔记中会涉及到）。
type：（language的替代属性）表示编写代码所使用的脚本语言的内容类型（MIME类型）；默认值为text/javascript，所以一般都不设置这个属性。
其中async仅对外部脚本文件有效，IE4~IE7还支持嵌入脚本的defer属性，之后的版本则只支持外部脚本！

b.标签位置

<! DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 内容 -->
</body>
</html>

根据传统的写法，我们会把<script>元素放到头部<head>元素中（当初我没接触前端也是这么做的，现在想起来好傻呀！）；很明显这样的做法是不可取的，原因就在于如果我们没有设置<script>元素的async属性和defer属性，那么当我们加载执行引入的js代码时，整个页面文档的解析和渲染工作都会停下来等待代码执行完；俗称“js阻塞文档呈现”。这样会导致页面延迟呈现给用户，严重的话会造成极差的用户体验！站在性能优化的角度，我们应该将<script>元素放到body元素的底部，由于文档的解析顺序是从上到下的，这样放到底部，等执行js代码的时候整个页面基本已经解析加载完成了，也就不会阻塞文档呈现了！正确写法如下

<! DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

对于延迟脚本，虽然会延迟到文档解析完成才执行，但是由于支持的问题，我们依旧将其放至底部；那么异步脚本呢？虽说异步脚本不会影响页面的解析，放哪都无所谓，但是笔者觉得还是约定俗成，按习惯来统一放至body元素的底部吧！
异步脚本注意
Ⅰ.由于是异步加载，那么多个异步脚本的加载顺序是不一定的，这就要求各脚本文件之间要互不依赖。
Ⅱ.指定async属性的目的是不让页面等待脚本下载和执行，从而异步加载页面的其它内容，为此，建议异步脚本不要在加载期间修改DOM。
2. 嵌入脚本和外部脚本

<! DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 内容 -->
<script type="text/javascript">
//嵌入脚本
    var a = 1;
    console.log(a);
</script>
</body>
</html>

<! DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 内容 -->
<!-- 外部脚本 -->
<script type="text/javascript" src="example1.js"></script>
</body>
</html>

两者各有各的应用场景，但前端开发者一般推荐使用外部脚本，在这列举几点外部脚本的优点：
Ⅰ.可维护性，将遍及多个页面的js代码集中到同一个文件夹下的多个js文件中，维护起来很方便。
Ⅱ.可缓存，加快页面加载速度。
Ⅲ.适应未来。

3.文档模式
主要有混杂模式和标准模式（IE搞鬼，搞了个准标准模式，其实与标准模式的差异可以忽略不计）；文档模式通过文档顶部的<！DOCTYPE>定义，若没定义，所有浏览器都默认开启混杂模式。即用混杂模式去解析文档，这样会影响CSS内容的呈现（如：在混杂模式下，标准盒模型会变成IE盒模型），在一定时候也会影响JS的解释执行。所以我们要尽量避免混杂模式，那么一定要记得这条语句哦！<！DOCTYPE html>。

4.<noscript>元素
在浏览器不支持js的时候或者js被禁用的时候会显示其内容；其它情况下打死都不显示，哪怕是页面内容的一部分！

总结

本章主要涉及到js的两种引入方式，几种脚本的注意点，文档模式以及<noscript>元素，基本上理解起来比较简单；不过还是帮我复习了性能优化相关知识点，还是不错的！

谢谢观赏，不对之处望大佬指出！

隔壁王大头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计——读书笔记第二回

第二章在HTML中使用JavaScript本章主要给我们介绍了<script>元素，嵌入脚本和外部脚本，文档模式以及<noscript>元素。讲述了如何在HTML文档中引入JavaScript（后面简称js）的两种方式，以及其它应该注意的地方，请听我慢慢道来。
复制链接

扫一扫