BOM JS是浏览器内置脚本语言

本文主要是介绍BOM JS是浏览器内置脚本语言，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JS是浏览器内置脚本语言

1. JS嵌入网页的方法
<script>元素直接嵌入代码。:
<script>
var x = 1 + 5;
console.log(x);
</script>

<script>标签加载外部脚本
<script src="https://www.example.com/script.js"></script>
事件属性
<button id="myBtn" onclick="console.log(this.id)">点击</button>
URL 协议
<a href="javascript:console.log('Hello')">点击</a>

2.JS标签放在html底部的好处
2.1 避免加载js时间长页面出现阻塞效应
2.2 因为dom结构以及生成，不存在调用DOM报错的现象
2.3 脚本执行顺序按照页面script标签顺序执行，即使后者先下载完

2.4 defer属性。它的作用是延迟脚本的执行，等到 DOM 加载生成后，再执行脚本。

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

2.5 async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

浏览器遇到async的script标签， 继续往下解析html网页， 同时下载js。
当js下载完成 停止解析html，开始执行js，js执行完毕后继续解析html。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。

2.6 加载使用的协议

如果不指定协议，浏览器默认采用HTTP协议下载： <script src="example.js"></script>
如果想要https协议下载 ：<script src="https://example.js"></script>
如果我们希望根据页面本身的协议下载： <script src="//example.js"></script>

3. 浏览器，渲染引擎和JS解释器（JS引擎）
Firefox：Gecko 引擎
Safari：WebKit 引擎
Chrome：Blink 引擎（包含V8引擎）
IE: Trident 引擎
Edge: EdgeHTML 引擎

渲染引擎出来网页的阶段(并非严格按顺序执行)
1. 解析代码html => dom， css => cssom
2. 对象合成，将dom和cssom合成一颗渲染树 render tree
3. 布局： 计算渲染树的layout
4. 绘制： 将渲染树绘制到屏幕
--------------------------------------------------------------------------------
window对象

window.closed属性返回一个布尔值，表示窗口是否关闭。
window.opener属性表示打开当前窗口的父窗口。
window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离
和垂直距离（单位像素）。这两个属性只读。
window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，
即“视口”（viewport）的大小（单位像素）。这两个属性只读。
window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和
边框（单位像素）。
window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。

window.alert()、window.prompt()、window.confirm()都是浏览器与用户互动的全局方法。
它们会弹出不同的对话框，要求用户做出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，无法定制。
window.open方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。
window.close方法用于关闭当前窗口
window.stop()方法完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象。
window.moveTo()方法用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕
左上角的水平距离和垂直距离，单位为像素。
window.moveBy()方法将窗口移动到一个相对位置。它接受两个参数，分别是窗口左上角向右移动的
水平距离和向下移动的垂直距离，单位为像素。

window.resizeTo()方法用于缩放窗口到指定大小。
window.resizeBy()方法用于缩放窗口。它与window.resizeTo()的区别是，它按照相对的量缩放，
window.resizeTo()需要给出缩放后的绝对大小。

这篇关于BOM JS是浏览器内置脚本语言的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！