摘要：没有返回值，不进行跳转点击浏览器的地址栏也可以执行协议。浏览器的组成浏览器的核心是两部分渲染引擎和解释器又称引擎。
1.代码嵌入网页的方法
1.1script 元素嵌入代码
1.2script 元素加载外部脚本
1.3事件属性
1.4URL 协议
2.script 元素
2.1工作原理
2.2defer 属性 同步下载生成dom后执行按顺序
2.3async 属性 同步下载直接中断开始执行不按顺序
2.4脚本的动态加载 生成dom后不按顺序执行 可以设async false后按顺序执行
2.5加载使用的协议
3.浏览器的组成
3.1渲染引擎
3.2重流和重绘
3.3JavaScript 引擎
网页中嵌入 JavaScript 代码，主要有三种方法。
"
如果type属性的值，浏览器不认识，那么它不会执行其中的代码。但是，这个
"
如果脚本文件使用了非英语字符，还应该注明字符的编码。
为了防止攻击者篡改外部脚本，script标签允许设置一个integrity属性，写入该外部脚本的 Hash 签名，用来验证脚本的一致性
"
"
网页元素的事件属性（比如onclick和onmouseover），可以写入 JavaScript 代码
"
URL 支持javascript:协议，即在 URL 的位置写入代码，使用这个 URL 的时候就会执行 JavaScript 代码。没有返回值，不进行跳转
"
点击
//浏览器的地址栏也可以执行javascript:协议。将javascript:console.log("Hello")放入地址栏，按回车键也会执行这段代码。不进行跳转
"
如果 JavaScript 代码返回一个字符串，浏览器就会新建一个文档，展示这个字符串的内容，原有文档的内容都会消失。
点击
上面代码中，用户点击链接以后，会打开一个新文档，里面有当前时间。
javascript:协议的常见用途是书签脚本 Bookmarklet。由于浏览器的书签保存的是一个网址，所以javascript:网址也可以保存在里面，用户选择这个书签的时候，就会在当前页面执行这个脚本。为了防止书签替换掉当前文档，可以在脚本前加上void，或者在脚本最后加上void 0。
"
点击
点击
"
Void执行 但不返回值
上面这两种写法，点击链接后，执行代码都不会网页跳转
1.html一边下载一边解析
2.遇到script标签，停止解析，把网页渲染的控制权转交给 JavaScript 引擎
3.内部的js直接执行，外部的js下载和执行js代码.多个js文件同时下载，按顺序执行。如果有css，css在这之前下载解析，或者在js遇到css，停下后去解析css
3.执行完成后，继续html下载解析。
加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是 JavaScript 代码可以修改 DOM，所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。
解析和执行 CSS，也会产生阻塞。Firefox 浏览器会等到脚本前面的所有样式表，都下载并解析完，再执行脚本；Webkit则是一旦发现脚本引用了样式，就会暂停执行脚本，等到样式表下载并解析完，再恢复执行。
此外，对于来自同一个域名的资源，比如脚本文件、样式表文件、图片文件等，浏览器一般有限制，同时最多下载6～20个资源，即最多同时打开的 TCP 连接有限制，这是为了防止对服务器造成太大压力。如果是来自不同域名的资源，就没有这个限制。所以，通常把静态文件放在不同的域名之下，以加快下载速度。
解决js在dom结构生成之前调用报错，可以把script标签放在页面最后。
另一种解决方法是设定DOMContentLoaded事件的回调函数。
‘
另一种解决方法是，使用
上面代码中，指定DOMContentLoaded事件发生后，才开始执行相关代码。DOMContentLoaded事件只有在 DOM 结构生成之后才会触发
为了解决脚本文件下载阻塞网页渲染的问题，有了defer和async属性，区别在defer在dom加载完成以后按顺序执行，async直接不按顺序执行。
2.2defer 属性defer属性的运行流程如下。
浏览器开始解析 HTML 网页。
1.解析过程中，发现带有defer属性的
根据页面本身的协议来决定加载协议，这时可以采用下面的写法。
浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。
3.1渲染引擎将网页代码渲染为用户视觉可以感知的平面文档
Firefox:gecko 引擎
safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎
渲染引擎处理网页，通常分成四个阶段
1.解析代码：html解析dom css解析为cssom
2.对象合成：合成dom和cssom为渲染renderr tree
3.布局：计算渲染树布局layout
4.绘制：将渲染树绘制到屏幕
往往第一步还没完成，第二步和第三步就已经开始
3.2重流和重绘渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）
作为开发者，应该尽量设法降低重绘的次数和成本。比如，尽量不要变动高层的 DOM 元素，而以底层 DOM 元素的变动代替；再比如，重绘table布局和flex布局，开销都会比较大。
优化技巧。
读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
缓存 DOM 信息。
不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
使用documentFragment操作 DOM
动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
只在必要时才显示隐藏元素。
使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
使用虚拟 DOM（virtual DOM）库
下面是一个window.requestAnimationFrame()对比效果的例子。
"
// 重绘代价高
function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + "px";
}
all_my_elements.forEach(doubleHeight);
// 重绘代价低
function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + "px";
});
}
all_my_elements.forEach(doubleHeight);
"
上面的第一段代码，每读一次 DOM，就写入新的值，会造成不停的重排和重流。第二段代码把所有的写操作，都累积在一起，从而 DOM 代码变动的代价就最小化了
JavaScript 引擎的主要作用是，读取网页中的 JavaScript 代码，对其处理后运行
不需要编译，由解释器实时运行。这样的好处是运行和修改都比较方便，刷新页面就可以重新解释；缺点是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言
下面是目前最常见的一些 JavaScript 虚拟机：
Chakra (Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106083.html
摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。 概述 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。 这些属性我们可以把它...
摘要：概述最近公司在做一个大型的应用，总结如下建模软件建模自定义一套语义化的模型格式，并编写模型格式转化插件把建模软件的模型格式转成自定义格式。 概述 最近公司在做一个大型的webgl应用，总结如下: 1.建模软件建模(3d Max revit) 2.自定义一套 语义化的模型格式，并编写模型格式转化插件,把建模软件的模型格式转成自定义格式。 为什么要自定义语义化的模型格式呢？ 因为，现在浏览...
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
阅读 3478·2023-04-25 21:43
阅读 3099·2019-08-29 17:04
阅读 799·2019-08-29 16:32
阅读 1537·2019-08-29 15:16
阅读 2147·2019-08-29 14:09
阅读 2736·2019-08-29 13:07
阅读 1625·2019-08-26 13:32
阅读 1324·2019-08-26 12:00
