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
引擎