DN-02

2017-04-03

DN_02 (April 3)

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1. 创建新节点
   • createDocumentFragment() //创建一个DOM片段
   • createElement() //创建一个具体的元素
   • createTextNode() //创建一个文本节点
2. 添加、移除、替换、插入
   • appendChild()
   • removeChild()
   • replaceChild()
   • insertBefore() //在已有的子节点前插入一个新的子节点
3. 查找
   • getElementsByTagName() //通过标签名称
   • getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)
   • getElementById() //通过元素Id，唯一性

iframe的优缺点？

1. iframe优点：
   • 解决加载缓慢的第三方内容如图标和广告等的加载问题
   • Security sandbox
   • 并行加载脚本
2. iframe的缺点：
   • iframe 会阻塞主页面的 Onload 事件；
   • 即时内容为空，加载也需要时间
   • 没有语意

你如何对网站的文件和资源进行优化？

• 文件合并
• 文件最小化/文件压缩
• 使用 CDN 托管
• 缓存的使用（多个域名来提供缓存）
• 其他

哪些操作会造成内存泄漏？

• 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
• 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
• setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
• 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 当发送一个URL请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的IP地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
4. 此时，Web服务器提供资源服务，客户端开始下载资源。

javascript对象的几种创建方式

1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式

javascript继承的6种方法

1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承

请解释一下 JavaScript 的同源策略。

• 这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。 指一段脚本只能读取来自同一来源的窗口和文档的属性。

Javascript无阻塞加载具体方式

• 将脚本放在底部。还是放在head中，用以保证在js加载前，能加载出正常显示的页面。script 标签放在 body 前。
• 成组脚本：由于每个script标签下载时阻塞页面解析过程，所以限制页面的script总数也可以改善性能。适用于内联脚本和外部脚本。
• 非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在window.onload事件发出后开始下载代码。
  • defer属性：支持 IE4 和 firefox-3.5 更高版本浏览器
  • 动态脚本元素：文档对象模型（DOM）允许你使用 js 动态创建 HTML 的几乎全部文档内容。代码如下：

  var script=document.createElement(“script”); script.type=”text/javascript”; script.src=”file.js”; document.getElementsByTagName(“head”)[0].appendChild(script);

eval 是做什么的？

• 它的功能是把对应的字符串解析成JS代码并运行；
• 应该避免使用 eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。