标签：浏览器 脚本语言 JS window 引擎 BOM 窗口 加载 属性
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()需要给出缩放后的绝对大小。
标签：浏览器,脚本语言,JS,window,引擎,BOM,窗口,加载,属性 来源： https://www.cnblogs.com/ives-xu/p/14835708.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。