← 返回首页

DN-02：前端杂记

随手记的前端零散笔记，第二篇。

发布 2017年4月03日 标签 #javascript #frontend #notes

~/posts/dn-02 $ cat post.md

/ 语言 EN / 中文
/ 主题 / /

DOM 操作

  1. 创建新节点
    • createDocumentFragment()：创建一个 DOM 片段。
    • createElement()：创建一个具体的元素。
    • createTextNode()：创建一个文本节点。
  2. 添加、移除、替换、插入
    • appendChild()
    • removeChild()
    • replaceChild()
    • insertBefore()：在已有的子节点之前插入新节点。
  3. 查找
    • getElementsByTagName()：按标签名。
    • getElementsByName()：按 name 属性（IE 容错较强，会顺带把 id 等于 name 的元素也返回）。
    • getElementById()：按 id，唯一。

iframe 的优缺点

优点：

  • 解决加载缓慢的第三方内容（图标、广告等）的加载问题。
  • security sandbox。
  • 并行加载脚本。

缺点：

  • iframe 会阻塞主页面的 onload 事件。
  • 即使内容为空，加载也需要时间。
  • 没有语义。

网站文件和资源优化

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

哪些操作会造成内存泄漏

  • “内存泄漏” 指对象在不再需要后仍然存在。
  • 垃圾回收器定期扫描对象，统计每个对象被其它对象引用的次数。引用计数为 0，或者唯一引用是循环引用时，对象可以被回收。
  • setTimeout 的第一个参数传字符串而不是函数会引发泄漏。
  • 闭包、控制台日志、循环引用（两个对象互相持有并互相保留）。

从输入 URL 到页面加载完成发生了什么

  1. 发出 URL 请求时（无论是页面 URL 还是页面上每个资源的 URL），浏览器开一个线程处理请求，同时向远程 DNS 启动一次解析，拿到目标 IP。
  2. 浏览器与远程 Web 服务器经过 TCP 三次握手建立 TCP/IP 连接：客户端发起 SYN，服务器回 SYN-ACK，客户端再回 ACK。
  3. TCP 连接建立后，浏览器在连接上发送 HTTP GET 请求。服务器找到资源，用 HTTP 响应返回。状态码 200 表示成功。
  4. 此时服务器提供资源，客户端开始下载。

JS 对象的几种创建方式

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

JS 继承的 6 种方法

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

同源策略

指协议、域名、端口三者都相同。同源策略是一种安全机制：脚本只能读取来自同一来源的窗口和文档的属性。

JS 无阻塞加载

  • 把脚本放在页面底部，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 代码并执行。
  • 应避免使用：不安全，性能差（要解析两次：一次解析为 JS 语句，一次执行）。
← 返回首页