2019-04前端月报

新闻

• Chrome75将支持原生图片懒加载属性

  • 在img和iframe标签上添加一个loading属性，用于原生支持懒加载
  • loading有三个值：lazy(懒加载)、eager(立即加载)、auto(默认)
  • 提供了polyfill方案兼容不支持的浏览器
  • 建议在各家浏览器稳定支持还是不要用了

• 基于Chromium的预览版Edge 终于来了

技术

• 理解webpack原理，手写一个100行的webpack
  • 照着youtube官方的视频搞得，感觉作为新人理解webpack应该很不错
• 深入 setState 机制
• 你不知道的浏览器页面渲染机制
  • 构建DOM的过程中：
    • 将字节数据=>字符串=>Token=>Node=>DOM。
    • Token会标识出当前token是startTag，还是endTag。
    • 构建DOM的过程中，不是等所有Token都转换完成后再去生成节点对象，而是一边生成Token一边消耗Token来生成节点对象。也就是每个Token被生成后，会立刻消耗这个Token创建出节点对象。
  • 构建渲染树：
    • 在渲染过程中遇到js时，不只是阻塞DOM的构建，它会导致CSSOM也阻塞DOM的构建。
    • 因为js不只可以改DOM，它还可以更改样式，也就是它可以更改CSSOM。不完整的CSSOM是无法使用的，如果js想访问CSSOM并更改它，那么在执行js时，必须要能拿到完整的CSSOM。
    • 因此浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM

文章

• 浅谈：前端如何赋能业务
• 前端专业方向的尽头
• 学习路线启示
  • 大神也有不擅长的地方
  • 学习自己感兴趣的领域

工具

• 基于react的加载动画库
  • 利用favicon展示页面加载进度
• js执行可视化，学习上下文、闭包

每月金句

每家公司都说：”我们非常重视您的隐私和安全。”请不要再说这种话了，大多数公司并不关心数据的隐私或安全，而是为了数据被盗时，他们有一个向客户解释的说辞。