javascript 高级程序设计(第4版)阅读笔记(二)

最新推荐文章于 2023-06-02 09:52:29 发布

百撕可乐

最新推荐文章于 2023-06-02 09:52:29 发布

阅读量215

点赞数

分类专栏： javascript 高级程序设计文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/lqins/article/details/126838831

版权

javascript 高级程序设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第2章节，主要讲的是script元素、行内与外部脚本的比较、文档模式、js不可用时的做法。没有书，或者懒得看书的可以看我写的概括啦~尽量短小精辟会一直更下去der！

1、script元素

从上到下解释代码，按页面出现顺序进行执行(前提是没有使用async和defer)

· async：只对外部脚本有效，立即下载脚本，不保证能按照它们出现的次序执行，谁先下载完就加载谁，会在页面load事件前执行，不应该在加载期间修改dom，一些浏览器会忽略；

· defer：只对外部脚本有效，告诉浏览器立即下载，但延迟到文档完全解析后再执行，原则上按照它们被列出的次序执行，一些浏览器会忽略；

· charset：配合src属性指定代码字符集，大多浏览器不在乎；

· src：要被执行的外部文件，可以是url不受同源策略影响解析url时使用get请求，受父页面 HTTP/HTTPS 协议的限制；

· crossorigin：默认不使用 CORS，crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据；

· integrity：对比接收到的资源的签名与这个属性指定的签名是否匹配，否则页面会报错，脚本不会执行，可以防范安全问题，但不是所有浏览器都支持；

· type：这个值始终都是"text/javascript"；

2、使用script的方式

使用script的方式有两种，一种是在<script>元素中写代码(行内代码)，一种是src属性进行引入代码

第一种：(行内代码)

<script>
   function sayScript(){
      //代码中不能出现字符串</script>会报错被当成结束标签
      //配合使用转义字符“\”就可
       console.log("<\/script>");
    }
</script>

第二种：(外部引入)

<script src="example.js"></script>
//外部引入<script></script>闭合标签中不能再写行内代码，行内代码会被忽略

· 推荐使用外部引入文件：

不分散、集中好维护；浏览器会有缓存，只需要下载一次，加载更快；

3、script的标签位置

放在<head>标签内，js解析完了才渲染body页面，如果js比较多会有渲染延迟导致明显空白。

放在<body>元素中的页面内容后面，可以解决以上问题

<body>
  <!-- 这里是页面内容 -->
  <script src="example1.js"></script>
  <script src="example2.js"></script>
</body>

4、动态加载js

//这种方式相当于加了个async，属于异，并非所有浏览器都支持async属性
let script = document.createElement(‘script’);
script.src = “example.js”;
//-------start 加上以下这句，为同步加载
script.async = false;
//--------end
Document.head.appendChild(script);

影响队列的优先级可能会影响性能，让预加载器知道动态js的存在，在头部显式声明一下：

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

5、文档模式

混杂模式和标准模式、准标准模式

· 混杂模式：混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。这种约定并不合理，混杂模式在不同浏览器中的差异非常大。

· 准标准模式与标准模式：非常接近，很少需要区分，一般都直接叫标准模式。

标准模式通过下列几种文档类型声明开启：

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html>

准标准模式通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）来触发

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

6、js不可用时的做法

使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启

用脚本，则<noscript>元素中的任何内容都不会被渲染。

<noscript>
    <p>该浏览器不支持脚本，换个浏览器吧</p>
</noscript>

百撕可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 高级程序设计(第4版)阅读笔记(二)

javascria sync：只对外部脚本有效，立即下载脚本，不保证能按照它们出现的次序执行，谁先下载完就加载谁，会在页面load事件前执行，不应该在加载期间修改dom，一些浏览器会忽略；· integrity：对比接收到的资源的签名与这个属性指定的签名是否匹配，否则页面会报错，脚本不会执行，可以防范安全问题，但不是所有浏览器都支持；· defer：只对外部脚本有效，告诉浏览器立即下载，但延迟到文档完全解析后再执行，原则上按照它们被列出的次序执行，一些浏览器会忽略；浏览器会有缓存，只需要下载一次，加载更快；
复制链接

扫一扫