2019-11 中旬

  • 创建于：2019-11-11
  • 更新于：2023-03-16

# 2019-11-20: 什么是重绘（repaint）和回流（reflow），怎样优化 ✅

好好想想先 😌

  • 参考链接

  • 一句话

    • 浏览器使用流式布局
    • 回流必将引起重绘，重绘不一定会引起回流
    • 会导致回流的操作：
      • 页面首次渲染
      • 浏览器窗口大小发生改变
      • 元素尺寸或位置发生改变
      • 元素内容变化（文字数量或图片大小等等）
      • 元素字体大小变化
      • 添加或者删除可见的 DOM 元素
      • 激活 CSS 伪类（例如：:hover）
      • 查询某些属性或调用某些方法
    • 重绘
      • 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
    • 性能
      • 浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
    • 怎样优化
      • CSS
        • 避免使用 table 布局。
        • 尽可能在 DOM 树的最末端改变 class。
        • 避免设置多层内联样式。
        • 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
        • 避免使用 CSS 表达式（例如：calc()）。
      • JavaScript
        • 避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。
        • 避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。
        • 也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
        • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
        • 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

# 2019-11-18: 输入 url 到浏览器返回页面的过程？✅

好好想想先 😌

# 2019-11-17: ES6 模块和 CommonJS 模块的区别 ✅

好好想想先 😌

  • 参考链接

  • 一句话

    • CommonJs 导出的是变量的一份拷贝，ES6 Module 导出的是变量的绑定（export default 是特殊的）
    • CommonJs 是单个值导出，ES6 Module 可以导出多个
    • CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
    • CommonJs 的 this 是当前模块，ES6 Module 的 this 是 undefined

# 2019-11-16: JS 实现精确定时器 ✅

好好想想先 😌
  • 一句话
    • 循环或递归进行时间比对
    function manualTimeout(callback, time) {
  var target = performance.now() + time
  var recall = function () {
    if (performance.now() > target) {
      callback()
    } else {
      setTimeout(recall, 0)
    }
  }
  recall()
}
    • 运用相对精确，下一次定时器补上上一次的时间差
    var start = new Date().getTime(),
  time = 0,
  elapsed = '0.0'
function instance() {
  time += 100
  elapsed = Math.floor(time / 100) / 10
  if (Math.round(elapsed) == elapsed) {
    elapsed += '.0'
  }
  document.title = elapsed
  var diff = new Date().getTime() - start - time
  window.setTimeout(instance, 100 - diff)
}
window.setTimeout(instance, 100)

# 2019-11-15: ASCII, unicode, utf-8 编码原理，三者之间有什么关系 ✅

好好想想先 😌

# 2019-11-13: 为什么 [] == false 而 !![] === true ✅

好好想想先 😌

# 2019-11-12: 什么是 DevOps ✅

好好想想先 😌

  • 参考链接

  • 一句话

    • 它是一种重视“软件开发人员（Dev）”和“IT 运维技术人员（Ops）”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变更”的流程，来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。

# 2019-11-11: get 和 post 区别 ✅

好好想想先 😌

  • 参考链接

  • 一句话

    • get 用来获取数据，post 用来提交数据
    • get 参数有长度限制（受限于 url 长度，具体的数值取决于浏览器和服务器的限制，最长 2048 字节），而 post 无限制。
    • get 请求的数据会附加在 url 之 ，以 " ？ "分割 url 和传输数据，多个参数用 "&"连接，而 post 请求会把请求的数据放在 http 请求体中。
    • get 是明文传输，post 是放在请求体中。
    • get 可被缓存。
    • 部分浏览器 post 会发送客户端会发送两个数据包（header 和 body 分开发送）
< 2019-11 上旬 2019-11 下旬 >