浅谈Script / JavaScript

浅谈Script标签:

属性

<script>拥有7个属性。

async boolean异步执行该脚本，但不保证按照指定它们的先后顺序执行

defer boolean通知浏览器该脚本将在文档完成解析后遇到</html>，并会按照它们出现的先后顺序执行。但会在触发 DOMContentLoaded 事件前执行。

integrity包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据

src type text cross origin使那些将静态资源放在另外一个域名的站点打印错误信息,就是将跨域报错变为同源报错

在XHTML文档中，要把async属性设置为 async = "async", defer = "defer"

知道了那几个属性接下来，来看看下面这个图：

第一个<script>说明了，在html解析中，如果有<script>的话，html会在Script下载并且执行的时候，暂停解析。

第二个带async属性的<script>，如图所示，也就是它下载Script的时候是异步的，但是只要Script文件下好了，那么就马上执行。

第三个带defer属性的<script>，其实和上面带async属性一样都是异步执行去下载Script文件的。但是在这个带有defer的则是在html全部解析完毕之后才去执行Script文件。而且它是按照加载顺序执行脚本的，这一点要善加利用。显然 defer 是最接近我们对于应用脚本加载和执行的要求的

使用动态创建的<script>标签元素来下载并执行代码

var script = document.createElement('script');

script.type = "text/javascript";

script.src = "file1.js";

document.getElementByTagName("head")[0].appendChild(script);

这个技术的重点在于：

无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

参考书籍：《高性能JavaScript》

使用XHR对象下载JS代码注入页面

function loadScript(url, callback){
 var script = document.createElement(
"e");
 script.type = "text/javascript";
 if(script.readyState){ //ie
 script.onreadystatechange = function(){
 if(script.readyState == "loaded" || script.readyState == "complete"){
 script.onreadystatechage = null;
 callback();
 }
 };
 } else {
 script.onload = function(){
 callback();
 }
 }
}
loadScript("the-rest.js", function(){
 Application.init()
});
这样做实现了动态创建标签元素并下载，其次当第二个脚本文件下载时，应用所需的所有DOM结构已经创建完毕，并做好了交互的准备,从而避免了需要另一个事件来检测页面是否准备好。

1.跨域是什么，怎么解决?

跨域指的是浏览器出于安全考虑的同源策略，当从一个地址向另外一个地址请求资源时，协议、域名、端口号任意一个不同都属于跨域

解决：

JSONP

CORS

document.domain + iframe跨域

window.name + iframe跨域

html5的 postMessage

img的src属性、link的href属性

websocket

2.重绘与回流

渲染树的结点发生了结构性变化, 例如宽度、高度或者位置上的变化时，那么会触发Reflow(回流)

渲染树结点发生了非结构性变化，例如背景色等的变化时，那么会触发Repaint(重绘)

display:none;的方式隐藏一个结点会导致repaint与reflow

visibility:hidden;进行dom隐藏仅仅导致repaint(没有结构性变化，仅仅看不见而已)

Reflow 的成本比 Repaint 的成本高得多的多

3.函数的闭包

闭包就是能够读取其他函数内部变量的函数。

例如在javascript中，只有函数内部的子函数才能读取局部变量，

所以闭包可以理解成“定义在一个函数内部的函数“。

在本质上，闭包是将函数内部和函数外部连接起来的桥梁

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

闭包有什么用，使用场景

当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会“污染”全局的变量时，就可以用闭包来定义这个模块。

闭包的缺点

闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

函数套函数就是闭包吗？当一个内部函数被其外部函数之外的变量引用时，才会形成了一个闭包。

4.JSON 与 JSONP 的区别

json是理想的数据交换格式，但没办法跨域直接获取，于是就将json包裹(padding)在一个合法的js语句中作为js文件传过去。

这就是json和jsonp的区别，json是想要的东西，jsonp是达到这个目的而普遍采用的一种方法，当然最终获得和处理的还是json。

所以说json是目的，jsonp只是手段。json总会用到，而jsonp只有在跨域获取数据才会用到。

5.documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

6.tpyeof可以返回多少种值                     （6种）

let a = 'd'; // string

let num = 3232; // number

let str = new String('dd'); // object

let un = undefined; // undefined

let bool = true; // boolean

function aa(){} // function

7.预解析

所谓的预解析就是：在当前作用域中，JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义。

声明和定义： var num = 24;

声明：var num; 告诉浏览器在全局作用域中有一个num变量了，如果一个变量只是声明了，但是没有赋值，默认值是undefined。

定义：num = 12; 定义就是给变量进行赋值。

var声明的变量和function声明的函数在预解析的区别

var声明的变量和function声明的函数在预解析的时候有区别，

var声明的变量在预解析的时候只是提前的声明，

function声明的函数在预解析的时候会提前声明并且会同时定义。

也就是说var声明的变量和function声明的函数的区别是在声明的同时有没同时进行定义。

预解析只发生在当前的作用域下

程序最开始的时候，只对window下的变量和函数进行预解析，只有函数执行的时候才会对函数中的变量很函数进行预解析。

8.get和post的区别

· GET 请求可被缓存

· GET 请求保留在浏览器历史记录中

· GET 请求可被收藏为书签

· GET 请求不应在处理敏感数据时使用

· GET 请求有长度限制

· GET 请求只应当用于取回数据

· POST 请求不会被缓存

· POST 请求不会保留在浏览器历史记录中

· POST 不能被收藏为书签

· POST 请求对数据长度没有要求

9.DNS

DNS（Domain Name System，域名系统），

万维网上作为域名和IP地址相互映射的一个分布式数据库，

能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

DNS端口为53 UDP，是用来做DNS解析的。

10.str为什么会有length属性

在调用length的时候, JS引擎会先对原始类型数据进行包装

new String("abcd")

然后对其方法进行调用 new String("abcd").length