JavaScript高级程序设计第四版学习--第二章

最新推荐文章于 2024-08-12 13:23:42 发布

再敲一行就睡觉

最新推荐文章于 2024-08-12 13:23:42 发布

阅读量272

点赞数 2

分类专栏： JavaScript学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/One_punchman_zxl/article/details/116921935

版权

JavaScript学习专栏收录该内容

27 篇文章 6 订阅

订阅专栏

title: JavaScript高级程序设计第四版学习–第二章
date: 2021-5-13 22:30:23
author: Xilong88
tags: JavaScript

本章内容
使用<script> 元素
行内脚本与外部脚本的比较
文档模式对JavaScript有什么影响
确保JavaScript不可用时的用户体验
可能出现的面试题:
谈谈js标签的属性?
谈谈js脚本几种加载模式?
谈谈html的文档模式?
js脚本会不会阻塞页面渲染?
前端性能优化,关于脚本大小和SPDY/HTTP2的关系
浏览器不支持js怎么处理?

知识点:
1.<script>元素是网景公司创造的,最早在Navigator2中实现的,后来被加入到HTML规范中
2.有以下八大属性:

async ：可选。表示应该立即开始下载脚本，但不能阻止其他页面
动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有
效。

charset ：可选。使用src 属性指定的代码字符集。这个属性很少
使用，因为大多数浏览器不在乎它的值。

crossorigin ：可选。配置相关请求的CORS（跨源资源共享）设
置。默认不使用CORS。crossorigin=“anonymous” 配置文件请
求不必设置凭据标志。crossorigin=“use-credentials” 设置凭
据标志，意味着出站请求会包含凭据。

defer ：可选。表示脚本可以延迟到文档完全被解析和显示之后再
执行。只对外部脚本文件有效。在IE7及更早的版本中，对行内脚
本也可以指定这个属性。

integrity ：可选。允许比对接收到的资源和指定的加密签名以验
证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源
的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执
行。这个属性可以用于确保内容分发网络（CDN，Content Delivery
Network）不会提供恶意内容。

language ：废弃。最初用于表示代码块中的脚本语言
（如"JavaScript" 、“JavaScript 1.2” 或"VBScript" ）。大
多数浏览器都会忽略这个属性，不应该再使用它。

src ：可选。表示包含要执行的代码的外部文件。

type ：可选。代替language ，表示代码块中脚本语言的内容类型
（也称MIME类型）。按照惯例，这个值始终都
是"text/javascript" ，尽管"text/javascript"
和"text/ecmascript" 都已经废弃了。JavaScript文件的MIME类
型通常是"application/x-javascript" ，不过给type属性这个
值有可能导致脚本被忽略。在非IE的浏览器中有效的其他值还
有"application/javascript" 和"application/ecmascript"
。如果这个值是module ，则代码会被当成ES6模块，而且只有这
时候代码中才能出现import 和export 关键字。

3.在<script> 元素中的代码被计算完成之前，页面的其余内容不会被加
载，也不会被显示

4.代码中不能出现字符串</script>
以下代码会报错:

<script>
function sayScript() {
  console.log("</script>");
  }
</script>

Chrome:Uncaught SyntaxError: Invalid or unexpected token
修改成:

<script>
  function sayScript() {
    console.log("<\/script>");
  }
</script>

用"“来转义”/"让浏览器不当成标签解析.

5.用src属性引入外部文件:

<script src="example.js"></script>

与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。

6.在XHTML文档中，可以忽略结束标签，比如：

<script src="example.js"/>

以上语法不能在HTML文件中使用，因为它是无效的HTML，有些浏览
器不能正常处理，比如IE。

7.使用了src 属性的标签中再包含其他JavaScript代码。如果两者都提供的话，
则浏览器只会下载并执行脚本文件，从而忽略行内代码。

8.按照惯例，外部JavaScript文件的扩展名是.js。这不是必需的，因为浏览器不会检查所包含JavaScript文件的扩展名。这就为使
用服务器端脚本语言动态生成JavaScript代码，或者在浏览器中将
JavaScript扩展语言（如TypeScript，或React的JSX）转译为
JavaScript提供了可能性。不过要注意，服务器经常会根据文件扩展
来确定响应的正确MIME类型。如果不打算使用.js扩展名，一定要确保服务器能返回正确的MIME类型。

百度百科MIME:

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

我的理解:一种文件的打开方式的标识,有了它就可以通知浏览器用对应方式打开某后缀的文件.

9.浏览器在解析js资源时，会向src 属性指定的路径发送一个GET 请
求，以取得相应资源。这个初始的请求不受
浏览器同源策略限制，但返回并被执行的JavaScript则受限制。当然，这
个请求仍然受父页面HTTP/HTTPS协议的限制。
来自外部域的代码会被当成加载它的页面的一部分来加载和解释。这个能力可以让我们通过不同的域分发JavaScript。

js文件和html文件域不同是不会涉及跨域问题的,但是要涉及安全问题.

10.一般将js标签放最后,这样一来，页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

11.推迟执行脚本,defer,这个属性表示脚本在执行的时候不会改变页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script> 元素中设置defer
属性，相当于告诉浏览器立即下载，但延迟执行。

HTML5规范要求脚本
应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟
的脚本之前执行，而且两者都会在DOMContentLoaded 事件之前执行
（第17章会详细介绍事件）。不过在实际当中，推迟执行的脚本不一
定总会按顺序执行或者在DOMContentLoaded 事件之前执行，因此最好
只包含一个这样的脚本。

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script defer src="example1.js"></script>
  <script defer src="example2.js"></script>
  </head>
  <body>
  <!-- 这里是页面内容 -->
  </body>
</html>

12.defer 属性只对外部脚本文件才有效。这是HTML5中明确
规定的，因此支持HTML5的浏览器会忽略行内脚本的defer 属性。

13.异步执行脚本 async 属性。从改变脚本处理方式上
看，async 属性与defer 类似。当然，它们两者也都只适用于外部脚
本，都会告诉浏览器立即开始下载。不过，与defer 不同的是，标记
为async 的脚本并不保证能按照它们出现的次序执行

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script async src="example1.js"></script>
  <script async src="example2.js"></script>
  </head>
  <body>
  <!-- 这里是页面内容 -->
  </body>
</html>

给脚本添加async 属性的目的是告诉浏览器，
不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下
载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM

14.对于XHTML文档，指定defer 属性时应该写
成defer=“defer” 。
对于XHTML文档，指定async 属性时应该写
成async=“async” 。

15.异步脚本保证会在页面的load 事件前执行，但可能会在DOMContentLoaded （第17章会详细介绍事件）之前或之后,使用async 也会告诉页面你不会使用document.write.

不过好的Web开发实践根本就不推荐使用这个方法。

16.动态加载脚本

let script = document.createElement('script');

script.src = 'gibberish.js';
document.head.appendChild(script);

默认情况下，以这种方式创建的<script> 元素是以异步方
式加载的，相当于添加了async 属性。

不过这样做可能会有问题，因为
所有浏览器都支持createElement() 方法，但不是所有浏览器都支
持async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其
设置为同步加载

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的。
要想让预加载器知道这些动态请求
文件的存在，可以在文档头部显式声明它们：

<link rel="preload" href="gibberish.js">

这是性能优化方面的内容,后续会继续讲,暂时留意一下.

17.在XHTML中使用JavaScript必须指定type 属性且值为text/javascript

18.虽然可以直接在HTML文件中嵌入JavaScript代码，但通常认为最佳实践
是尽可能将JavaScript代码放在外部文件中。

可维护性 :JavaScript代码如果分散到很多HTML页面，会导致维
护困难。而用一个目录保存所有JavaScript文件，则更容易维护，这
样开发者就可以独立于使用它们的HTML页面来编辑代码。

缓存 :浏览器会根据特定的设置缓存所有外部链接的JavaScript文
件，这意味着如果两个页面都用到同一个文件，则该文件只需下载
一次。这最终意味着页面加载更快。

19.在SPDY/HTTP2中，预请求的消耗已显著降低，以轻量、独立JavaScript组件形式向客户端送达脚本更具优势
。如果还想支持那些比较老的浏览器，可能还是用一个大文件更合适。

20.IE5.5发明了文档模式的概念，即可以使用doctype 切换文档模式。总共三种：混杂模式（quirks mode）和标准模式（standards mode）准标准模式（almost standards
mode）

前两种模式的主要区别只体现在通
过CSS渲染的内容方面，但对JavaScript也有一些关联影响，或称为副作用

两种模式的区别

盒模型的解析：混合模式盒模型的宽高=内容的宽高；标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。
当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

混杂模式在所有浏览器中都以省略文档开头的doctype 声明作为开关。
21.判断模式类型

if(document.compatMode=="CSS1Compat" ) {

　　console.log('标准模式');

}else {

　　console.log('混杂模式');

}

22.<noscript>元素出现，被用于给不支持JavaScript的浏览
器提供替代内容

<noscript>元素可以包含任何可以出现在<body> 中的HTML元
素，<script> 除外。在下列两种情况下，浏览器将显示包含
在<noscript> 中的内容：
浏览器不支持脚本；
浏览器对脚本的支持被关闭。

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script defer="defer" src="example1.js"></script>
  <script defer="defer" src="example2.js"></script>
  </head>
  <body>
  <noscript>
    <p>This page requires a JavaScript-enabled browser.</p>
  </noscript>
  </body>
</html>

以上可以让不支持JavaScript脚本的浏览器显示,“This page requires a JavaScript-enabled browser.”

总结:本章主要讲了<script>标签的使用问题,比较重要的就是关于脚本推迟加载和异步加载的问题,这个问题之前面试考过,没有回答太清楚.