2019-11 中旬

# 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-19: base 64 编码原理,和二进制的区别

好好想想先 😌

# 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-14: 上传文件怎样获取进度

好好想想先 😌

# 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 分开发送)