JavaScript代码嵌入网页的方法

script标签: 代码嵌入网页

<script>
  console.log('Hello World');
</script>

这个标签的有个type属性用于指定脚本类型, 但是我们可以不用写, 因为script就是引用JavaScript代码的.
type属性有两个值:

text/javascript：默认值
application/javascript：对于较新的浏览器，建议设为这个值。

如果type属性的值不是上面的两个, 则浏览器不会执行script中的代码

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

我们可以使用text属性读取内容

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

script标签: 加载外部脚本

script标签通过src属性加载外部的脚本
若脚本文件中有非英文字符, 则需要用charset属性注明编码

<script charset="utf-8" src="example.js"></script>

加载外部脚本的方法和直接添加代码块的方法不能混用, 否则直接添加的代码块的会被忽略

<script src="example.js">
  console.log('Hello World!');  //console.log会被忽略
</script>

可以使用script标签的integrity属性验证所要加载的脚本的一致性, 属性值为外部脚本的Hash标签名

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

通过事件属性

可以通过某些html元素的事件属性进行添加, 如onclick

<div onclick="alert('Hello')"></div>

通过URL协议

对于a标签可以使用javascript:协议

<a href="javascript:alert('Hello')"></a>

点击a标签后它执行后面的alert函数
若javascript:返回的是字符串, 则会新建一个文档展示字符串的内容

//javascript:返回字符串
<a href="javascript:new Date().toLocaleTimeString();">
  What time is it
</a>

script标签

工作原理

我们通常将script标签放在body标签内的尾部, 保证执行script标签时DOM已经生成了.
多个script标签会同时下载, 但是执行的时候是按照顺序执行的.

defer属性

可以给script标签添加defer属性防止下载脚本时阻塞页面渲染
defer属性对内置的JavaScript代码及动态生成的script标签不起作用
若使用defer属性, 则加载的脚本中不应使用document.write

async属性

async属性也可以解决阻塞效应, 有这个属性的script标签, 下载时不会阻塞渲染.
采用这个属性无法保证脚本的执行顺序呢
有async属性的脚本中也不应该使用document.write方法
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。
如果同时使用async和defer属性，defer属性不起作用，浏览器行为由async属性决定

加载使用的协议

浏览器默认使用http协议下载
我们可以指定下载的协议:

<script src="https://example.js"></script>  //使用https协议下载(需要服务器支持)
<script src="//example.js"></script>    //根据页面本身的协议决定加载协议

浏览器组成

浏览器核心有渲染引擎和JavaScript引擎.

渲染引擎

这个引擎的主要作用是将网页代码渲染为用户视觉可以感知的文档
不同的浏览器有不同的渲染引擎:

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

它们处理网页时, 通常有四个阶段:

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

上面四步的执行顺序并非严格按顺序执行

重流和重绘

渲染树转换为网页布局，称为“布局流”(flow), 这一阶段称为重流；布局显示到页面的这个过程，称为“绘制”(paint), 这一阶段称为重绘. 因此重流一定会导致重绘, 但重绘不一定导致重流

JavaScript引擎

JavaScript引擎是为了处理网页中的JavaScript代码. JavaScript是解释型语言.
为了提高运行速度, 浏览器会对JavaScript进行一定程度的编译, 会生成类似字节码的中间代码以提高运行速度
字节码运行在虚拟机上, 因此也把虚拟机成为JavaScript引擎

浏览器环境概述