分析 webWorker

拼搏现实的明天。 2022-11-03 10:51 40阅读 0赞

### 目录 ###

*   *   *  分析 webWorker
         *  分析浏览器内核
         *  less 常见的特性及案例

### 分析 webWorker ###

webWorker：多线程 主要 API。

1.  **new Worker()**: 创建一个分线程，返回值代表当前分线程。
2.  **postMessage()**: 主线程向分线程，分线程向主线程 传递数据。
3.  **onmessage 事件**: 分线程或主线程接收到其他线程发送的数据后 自动触发，事件函数的event事件对象中的data属性，就是发送的数据。
4.  **close() 方法**： 在分线程关闭当前线程，terminate() 方法：在主线程中关闭某个分线程，在分线程中，this 代表当前分线程。
    
    **缺点：**
    
    1.  不可以操作DOM。
    2.  不能跨域加载 js。

### 分析浏览器内核 ###

不同的浏览器可能不一样

1.  Chrome, opera: Blink
2.  Safari: webkit
3.  firefox : Gecko
4.  IE : Trident

内核由很多模块组成

1.  **主线程**  
    js 引擎模块: 负责 js 程序的编译与运行。  
    html, css 文档解析模块: 负责页面文本的解析。  
    DOM/CSS 模块: 负责 dom/css 在内存中的相关处理。  
    布局和渲染模块: 负责页面的布局和效果的绘制(内存中的对象)。
2.  **分线程**  
    定时器模块: 负责定时器的管理。  
    DOM 事件响应模块: 负责事件的管理。  
    网络请求模块: 负责ajax请求。

### less 常见的特性及案例 ###

1.  less 注释: `//不能解析 /**/ 可以解析`。
2.  less 变量：@num:0;
3.  less 嵌套
4.  less Mixin：`.混合名(){css代码}`。
5.  less 模式匹配：对比参数内容是否一致 @\_参数代表全部匹配。
6.  less 重载：对比参数的个数选择对应的混合。
7.  less 守卫：根据when提供的判断条件选择混合。
8.  字符串插值和转义(~)：变量和其他拼接 并取掉字符串符号 `~'@{变量名}px'`。
9.  less 引入：`@import "./01.less"`。
10. less 函数：ceil( ) floor( ) …等。