浏览器模型

最新推荐文章于 2022-06-27 21:28:14 发布

中小余

最新推荐文章于 2022-06-27 21:28:14 发布

阅读量297

点赞数

分类专栏：网道js笔记 JavaScript基础

本文链接：https://blog.csdn.net/qq_18747089/article/details/116819792

版权

网道js笔记同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript基础

26 篇文章 0 订阅

订阅专栏

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

<script id="mydata" type="x-custom-data">
  console.log('Hello World');
</script>
/* 
type可以省略，省略时默认为text/javascript

将type属性的值设为浏览器不认识，那么它不会执行其中的代码。利用这一点，可以在<script>标签之中嵌入任意的文本内容，只要加上一个浏览器不认识的type属性即可。
*/

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

<script src="/assets/application.js"
  integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs=">
</script>
 /* 
* `integrity`值开始的至少一个串，每个串包括指示特定散列算法（目前允许的前缀的前缀`sha256`，`sha384`和`sha512`），然后用短划线，并与实际base64编码散列结束。
* 可以通过工具生成

*/

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

3、URL支付javascript:协议，意思是在URL的位置写入代码使用这个 URL 的时候就会执行 JavaScript 代码

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

浏览器的地址栏也可以执行javascript:协议。将javascript:console.log('Hello')放入地址栏，按回车键也会执行这段代码。

script元素

加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是 JavaScript 代码可以修改 DOM，所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。

如果外部脚本加载时间很长（一直无法完成下载），那么浏览器就会一直等待脚本下载完成，造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。
为了避免这种情况，较好的做法是将<script>标签都放在页面底部，而不是头部。
如果某些脚本代码非常重要，一定要放在页面头部的话，最好直接将代码写入页面，而不是连接外部脚本文件，这样能缩短加载时间。

- 解决script放在头部，DOM结构生成之前调用DOM节点

<!--  方法一：设定DOMContentLoaded事件的回调函数 -->
<head>
  <script>
    document.addEventListener(
      'DOMContentLoaded', //DOMContentLoaded事件只有在 DOM 结构生成之后才会触发,所以这块script放在网页头部也不会报错
      function (event) {
        console.log(document.body.innerHTML);
      }
    );
  </script>
</head>
<body>
    
</body>

<!--  方法二：使用<script>标签的onload属性 -->
        <script src="jquery.min.js" onload="console.log(document.body.innerHTML)">
    </script>
<!-- 当<script>标签指定的外部脚本文件下载和解析完成，会触发一个load事件，可以把所需执行的代码，放在这个事件的回调函数里面。 -->

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

defer属性

为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对<script>元素加入defer属性。它的作用是延迟脚本的执行，等到 DOM 加载生成后，再执行脚本。

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

//对于内置而不是加载外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。另外，使用defer加载的外部脚本不应该使用document.write方法。

浏览器开始解析 HTML 网页。
解析过程中，发现带有defer属性的<script>元素。
浏览器继续往下解析 HTML 网页，同时并行下载<script>元素加载的外部脚本。
浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。

async 属性

解决“阻塞效应”的另一个方法是对<script>元素加入async属性。

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

//async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染
//async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件里面的代码，不应该使用document.write方法。

浏览器开始解析 HTML 网页。
解析过程中，发现带有async属性的script标签。
浏览器继续往下解析 HTML 网页，同时并行下载<script>标签中的外部脚本。
脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
脚本执行完毕，浏览器恢复解析 HTML 网页。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

动态加载脚本

['a.js', 'b.js'].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false; //设置async属性为false，让脚本按顺度执行，而不是谁先下载完就先执行谁
  document.head.appendChild(script);
});

- 为动态加载的脚本指定回调函数

function loadScript(src, done) {
  var js = document.createElement('script');
  js.src = src;
  js.onload = function() {
    done();
  };
  js.onerror = function() {
    done(new Error('Failed to load script ' + src));
  };
  document.head.appendChild(js);
}

加载使用协议

// 默认使用HTTP协议下载
<script src="example.js"></script>

// 使用HTTPS下载
<script src="https://example.js"></script>

// 根据页面本身的协议来决定加载协议
<script src="//example.js"></script>

浏览器

浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）

渲染引擎

渲染引擎的主要作用是，将网页代码渲染为用户视觉可以感知的平面文档。

不同的浏览器有不同的渲染引擎。

Firefox：Gecko 引擎
Safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎

渲染引擎处理网页，通常分成四个阶段，这四个阶段并非严格按顺序执行所以会有页面的html代码还没有下载完但浏览器已有内容了。

解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
布局：计算出渲染树的布局（layout）。
绘制：将渲染树绘制到屏幕。

JavaScript引擎

JavaScript 引擎的主要作用是，读取网页中的 JavaScript 代码，对其处理后运行。

JavaScript 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。这样的好处是运行和修改都比较方便，刷新页面就可以重新解释；缺点是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言。

中小余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
浏览器模型

1、JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。<script id="mydata" type="x-custom-data"> console.log('Hello World');</script>/* type可以
复制链接

扫一扫