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()需要给出缩放后的绝对大小。

 

上一篇:LoadRunner使用入门 进行Webservice负载测试


下一篇:tornado websocket