每日思考（2020/02/28）

题目概览

• 对web workers的理解
• 怎么使用自定义字体？
• document的load 和ready有什么区别？
• 对本地存储的理解

题目解答

对web workers的理解

• 作用：为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭

• 基本用法：

  //主线程采用new命令，调用Worker()构造函数，新建一个 Worker 线程
  var worker = new Worker('work.js');
  //主线程调用worker.postMessage()方法，向 Worker 发消息
  worker.postMessage('Hello World');
  worker.postMessage({method: 'echo', args: ['Work']});
  //主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息
  worker.onmessage = function (event) {
    console.log('Received message ' + event.data);
    doSomething();
  }
  
  function doSomething() {
    // 执行任务
    worker.postMessage('Work done!');
  }
  //Worker 完成任务以后，主线程就可以把它关掉。
  worker.terminate();
  

• 更多用法：Web Worker 使用教程

怎么使用自定义字体？(CSS字体图标)

@font-face {
    font-family: '自定义字体名称';
    src: url('字体文件名.eot'); /* IE9 Compat Modes /
    src: url('字体文件名.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
    url('字体文件名.woff') format('woff'), / Modern Browsers /
    url('字体文件名.ttf') format('truetype'), / Safari, Android, iOS /
    url('字体文件名.svg#字体文件名') format('svg'); / Legacy iOS */
    font-style: normal;
    font-weight: normal;
}

document的load 和ready有什么区别？

• dom文档执行顺序：
  1. 解析HTML结构
  2. 加载外部脚本和样式表文件
  3. 解析并执行脚本代码
  4. 构建html dom模型 // ready
  5. 加载图片等外部文件
  6. 页面加载完毕 // load
• 主要执行顺序的区别，load：页面资源加载完成； ready：是dom加载完成。一般我们都在js脚本都写在onload 保证dom节点都能获取。但是有时只需要dom节点加载完成就执行代码，提前执行js脚本就可放到ready里面 jQuery也为此提供了onReady方法
• 参考：jQuery网页加载的不同方式

对本地存储的理解

• 概念：通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据

• HTML 本地存储提供了两个在客户端存储数据的对象：

  • window.localStorage - 存储没有截止日期的数据，当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

    //方式1
    // 存储
    localStorage.setItem("lastname", "Gates");
    // 取回
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    
    //方式2
    // 存储
    localStorage.lastname = "Gates";
    // 取回
    document.getElementById("result").innerHTML = localStorage.lastname;
    //删除 "lastname" localStorage 项目的语法如下：
    localStorage.removeItem("lastname");
    

  • window.sessionStorage - 等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。