javaScript教程(三)-阿里云开发者社区

开发者社区> webmirror> 正文

javaScript教程(三)

简介: 浏览器模型 浏览器环境概述 https://wangdoc.com/javascript/bom/indexeddb.html JavaScript 是浏览器的内置脚本语言。也就是说,浏览器内置了 JavaScript 引擎,并且提供各种接口,让 JavaScript 脚本可以控制浏览器的各种功能。
+关注继续查看

浏览器模型

浏览器环境概述

JavaScript 是浏览器的内置脚本语言。也就是说,浏览器内置了 JavaScript 引擎,并且提供各种接口,让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本,浏览器加载网页,就会去执行脚本,从而达到操作浏览器的目的,实现网页的各种动态效果。

这里开始介绍浏览器提供的各种 JavaScript 接口。首先,介绍 JavaScript 代码嵌入网页的方法

代码嵌入网页的方法

网页中嵌入 JavaScript 代码,主要有四种方法:

script 元素嵌入代码

<script>
  var x = 1 + 5;
  console.log(x);
</script>

1.text/javascript:这是默认值,也是历史上一贯设定的值。如果你省略type属性,默认就是这个值。对于老式浏览器,设为这个值比较好

2.application/javascript:对于较新的浏览器,建议设为这个值

由于

<script id="mydata" type="x-custom-data">
  console.log('Hello World');
</script>

浏览器不会执行也不会显示内容,因为不认识它的type属性;但是,这个

document.getElementById('mydata').text // console.log('Hello World');

script 元素加载外部脚本

<script src="https://www.example.com/script.js"></script>

如果脚本文件使用了非英语字符,还应该注明字符的编码

<script charset="utf-8" src="https://www.example.com/script.js"></script>

所加载的脚本必须是纯的 JavaScript 代码,不能有HTML代码和

<script charset="utf-8" src="example.js">
  console.log('Hello World!');
</script>

为了防止攻击者篡改外部脚本,script标签允许设置一个integrity属性,写入该外部脚本的 Hash 签名,用来验证脚本的一致性

<script src="/assets/application.js" integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs="></script>

上面代码中,script标签有一个integrity属性,指定了外部脚本/assets/application.js的 SHA256 签名。一旦有人改了这个脚本,导致 SHA256 签名不匹配,浏览器就会拒绝加载

事件属性

网页元素的事件属性(比如onclick和onmouseover),可以写入 JavaScript 代码。当指定事件发生时,就会调用这些代码

<button id="myBtn" onclick="console.log(this.id)">点击</button> //如果有多个语句,使用分号分隔即可

URL 协议

URL 支持javascript:协议,即在 URL 的位置写入代码,使用这个 URL 的时候就会执行 JavaScript 代码

<a href="javascript:console.log('Hello')">点击</a>

浏览器的地址栏也可以执行javascript:协议。将javascript:console.log('Hello')放入地址栏,按回车键也会执行这段代码;如果 JavaScript 代码返回一个字符串,浏览器就会新建一个文档,展示这个字符串的内容,原有文档的内容都会消失

<a href="javascript: new Date().toLocaleTimeString();">点击</a>

上面代码中,用户点击链接以后,会打开一个新文档,里面有当前时间;如果返回的不是字符串,那么浏览器不会新建文档,也不会跳转

<a href="javascript: console.log(new Date().toLocaleTimeString())">点击</a>

javascript:协议的常见用途是书签脚本 Bookmarklet。由于浏览器的书签保存的是一个网址,所以javascript:网址也可以保存在里面,用户选择这个书签的时候,就会在当前页面执行这个脚本。为了防止书签替换掉当前文档,可以在脚本前加上void,或者在脚本最后加上void 0

<a href="javascript: void new Date().toLocaleTimeString();">点击</a>
<a href="javascript: new Date().toLocaleTimeString();void 0;">点击</a>

script 元素

工作原理

浏览器加载 JavaScript 脚本,主要通过

1.浏览器一边下载 HTML 网页,一边开始解析;也就是说,不等到下载完,就开始解析

2.解析过程中,浏览器发现

3.如果

4.JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复往下解析 HTML 网页

加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后再继续渲染;原因是 JavaScript 代码可以修改 DOM,所以必须把控制权让给它,否则会导致复杂的线程竞赛的问题。如果外部脚本加载时间很长(一直无法完成下载),那么浏览器就会一直等待脚本下载完成,造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。为了避免这种情况,较好的做法是将

<head>
  <script>
    console.log(document.body.innerHTML);
  </script>
</head>
<body></body>

上面代码执行时会报错,因为此时document.body元素还未生成

一种解决方法是设定DOMContentLoaded事件的回调函数

<head>
  <script>
    document.addEventListener(
      'DOMContentLoaded',
      function (event) {
        console.log(document.body.innerHTML);
      }
    );
  </script>
</head>

DOMContentLoaded事件只有在 DOM 结构生成之后才会触发

另一种解决方法是使用

<script src="jquery.min.js" onload="console.log(document.body.innerHTML)"></script>

但是,如果将脚本放在页面底部,就可以完全按照正常的方式写,上面两种方式都不需要。如果有多个script标签,比如下面这样:

<script src="a.js"></script>
<script src="b.js"></script>

浏览器会同时并行下载a.js和b.js,但是,执行时会保证先执行a.js,然后再执行b.js,即使后者先下载完成,也是如此。也就是说,脚本的执行顺序由它们在页面中的出现顺序决定,这是为了保证脚本之间的依赖关系不受到破坏。当然,加载这两个脚本都会产生“阻塞效应”,必须等到它们都加载完成,浏览器才会继续页面渲染。解析和执行 CSS,也会产生阻塞。Firefox 浏览器会等到脚本前面的所有样式表,都下载并解析完,再执行脚本;Webkit则是一旦发现脚本引用了样式,就会暂停执行脚本,等到样式表下载并解析完,再恢复执行。

此外,对于来自同一个域名的资源,比如脚本文件、样式表文件、图片文件等,浏览器一般有限制,同时最多下载6~20个资源,即最多同时打开的 TCP 连接有限制,这是为了防止对服务器造成太大压力。如果是来自不同域名的资源,就没有这个限制。所以,通常把静态文件放在不同的域名之下,以加快下载速度

defer 属性

为了解决脚本文件下载阻塞网页渲染的问题,一个方法是对

<script src="a.js" defer></script>
<script src="b.js" defer></script>

上面代码中,只有等到 DOM 加载完成后,才会执行a.js和b.js

defer属性的运行流程如下:

1.浏览器开始解析 HTML 网页

2.解析过程中,发现带有defer属性的

3.浏览器继续往下解析 HTML 网页,同时并行下载

4.浏览器完成解析 HTML 网页,此时再回过头执行已经下载完成的脚本

有了defer属性,浏览器下载脚本文件的时候,不会阻塞页面渲染。下载的脚本文件在DOMContentLoaded事件触发前执行(即刚刚读取完

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端开发教程:Javascript中如何定义类?
很多新手朋友第一次建网站时候,如何选择一款适合的网站源码是比较困惑的问题,选择一款好的网站源码可以节约大量时间和金钱,但是由于网站源码参差不齐,免费的,收费的,淘宝几元钱购买的,几万块钱的都有,那么怎么看一个网站源码是否值得使用呢,下面从专业的角度来分析。
592 0
最简单的Docker镜像教程:从头基于空镜像scratch创建一个新的Docker镜像
我们在使用Dockerfile构建docker镜像时,一种方式是使用官方预先配置好的容器镜像。优点是我们不用从头开始构建,节省了很多工作量,但付出的代价是需要下载很大的镜像包。 比如我机器上docker images返回的这些基于nginx的镜像,每个都超过了100MB,而一个简单的Ubuntu的容器超过了200MB,如果安装了相关的软件,尺寸会更大。
1620 0
7 个基于CSS/JavaScript的鼠标悬停效果教程
鼠标悬停效果是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,现在我们同样也可以使用CSS和JavaScript来实现。   本文中,我们将推荐一些非常不错的鼠标悬停特效教程,希望对大家有所帮助! 1.  Hover and Click Trigger for Circular Elements with jQuery 这个教程介绍如何使用jQuery处理一个真正的圆形元素的悬停效果,使用:hover实现悬停。
624 0
《JavaScript和jQuery实战手册(原书第2版)》——3.2节教程:使用条件语句
本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第3章,第3.2节教程:使用条件语句,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看
1101 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9564 0
Linux (x86) Exploit 开发系列教程之八 绕过 ASLR -- 第三部分
绕过 ASLR – 第三部分 译者:飞龙 原文:Bypassing ASLR – Part III 预备条件: 经典的基于栈的溢出 绕过 ASLR – 第一部分 VM 配置:Ubuntu 12.04 (x86) 在这篇文章中,让我们看看如何使用 GOT 覆盖和解引用技巧。
1035 0
TypeScript小白入门教程
TypeScript是由微软开发的一种开源编程语言,它是JavaScript的超集,在其基础上添加了可选的静态类型和基于类的面向对象编程。TypeScript可以编译成纯JavaScript,支持所有的JavaScript语法,因此可以在任何浏览器、任何计算机和任何操作系统上运行。TypeScript使得开发者可以使用一些未来JavaScript标准中的特性,让大型JavaScript应用可以使用
5235 0
+关注
webmirror
Good good study, day day up
122
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载