blog
blog copied to clipboard
chenjigeng
个人博客
之前面试今日头条的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度 1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方  2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项  3. 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 # css加载会阻塞DOM树的解析渲染吗？ 用代码说话： ```html css阻塞 h1 { color: red !important } function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0)...
# 机器码 计算机直接使用的程序语言，是电脑CPU直接读取运行的机器指令，运行速度最快，但是晦涩难懂。机器指令码是用于指挥计算机应做的操作和操作数地址的一组二进制数。 缺点：与硬件设备相关，针对不同的系统架构，需要不同的机器码。 # 字节码 字节码是一种中间码，它比机器码更抽象，需要直译器转译后才能成为机器码的中间代码。 实现方式：通过编译器和虚拟机。编译器将源码编译成字节码，特定平台上的虚拟机将字节码转译为可以直接执行的指令。字节码的典型应用为Java bytecode。 优点：是通过高级语言编译得来的，与特定机器码无关，因此可以跨平台执行。 缺点：依赖虚拟机/解释器执行。  # 高级语言 高级语言（High-level programming language）是一种独立于机器，面向过程或对象的语言，如C、C++、Python、Java。 高级语言主要是相对于汇编语言、机器码等低级语言来说的，**与计算机的硬件结构及指令系统无关**，因此它有更强的表达能力。而且是**可移植**的。仅需稍作修改甚至不用修改，就可将一段代码运行在不同类型的计算机上。 # 高级语言如何执行 我们编程用的基本都是高级语言，计算机不能直接理解高级语言，**只能理解和运行机器码**，所以必须要把高级语言翻译成机器语言，计算机才能运行高级语言所编写的程序。 # 高级语言划分 - 解释型语言：python、JavaScript - 编译型语言：C/C++、Pascal/Object ## 编译型语言 编译型语言的首先将源代码编译生成机器语言，再由机器运行机器码。...
# VScode 技术架构 ## Electron技术架构 Electron: **Chromium + Nodejs + 自定义 API**  - 1 个主进程：一个 Electron App 只会启动一个主进程，它会运行 package.json 的 main 字段指定的脚本 - N 个渲染进程：主进程代码可以调用 Chromium API 创建任意多个 web...
# Enum Enum 在编译后，会变成一个对象，key 和 value 都会变成编译对象的 key ``` enum A { b = 2, c = 6 } ``` 编译后 ``` "use strict"; var A; (function (A) { A[A["b"]...
Webpack 本质上是一个模块打包器，可以根据依赖图来将我们的文件打包。  # 原理 Webpack 的生命周期借助于 tapable 。tapable 类似于发布订阅库，webpack 的 hooks 就是 webpack 的生命周期，里面都是 tapable 一个实例，webpack 在适当的时机会触发这些生命周期。plugins 本质上则是通过监听 hooks 来做一些自定义处理。 1. 根据文件配置，找到入口文件。 1. 编译入口文件，使用配置的 loader 来处理文件。 1. 将 loader...
## 前言 最近要对旧的项目进行重构，统一使用全新的react技术栈。同时，我们也决定尝试使用React hooks来进行开发，但是，由于React hooks崇尚的是使用(也只能使用)function component的形式来进行开发，而不是class component，因此，整个开发方式也会与之前产生比较大的差异。所以，我这里就积累了下实际项目中遇到的问题以及思考，看下能不能帮助大家少走弯路。 ## 正文 接下来就直接进入正文。我会将项目中遇到的问题一一列举出来，并且给出解决方案。 ### 执行初始化操作的时机 当我转到React hooks的时候，首先就遇到了这个问题： 一般来说，业务组件经常会遇到要通过发起ajax请求来获取业务数据并且执行初始化操作的场景。在使用class component编程的时候，我们就可以在class component提供的生命周期钩子函数(比如componentDidMount, constructor等)执行这个操作。可是如果转到React hooks之后，function component里是没有这个生命周期钩子函数的，那这个初始化操作怎么办呢？总不能每次遇到这种场景都使用class component来做吧？ 解决方案：**使用useEffect**(想知道useEffect是什么的话，可以[点击这里](https://reactjs.org/docs/hooks-effect.html)) useEffect，顾名思义，就是执行有副作用的操作，你可以把它当成`componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` 的集合。它的函数声明如下 ```javascript useEffect(effect: React.EffectCallback,...
曾经我觉得我自己已经很了解箭头函数了，不可能再被坑了。可是前几天我遇到了一个很奇怪的问题，在苦恼了很久后，发现就是箭头函数带来的坑。因此，就有了这一篇文章~ ### 问题描述 比如我有一个基类 Animal，它有一个基础方法 sayName。之后每一个继承于它的子类，都需要自己实现这个 sayName 方法来证明自己的身份。基类代码实现很简单: ```javascript class Animal { sayName = () => { throw new Error('你应该自己实现这个方法'); } } ``` 那么我现在要继承于 Animal 基类来实现一个 Pig 子类，实现也很简单： ```javascript class...
回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。 ## 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自[MDN](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn)）  从上面这个图上，我们可以看到，浏览器渲染过程如下： 1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树 2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree) 3. Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） 4. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 5. Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，这里我们不展开，之后有机会会写一篇博客） 渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。 ### 生成渲染树  为了构建渲染树，浏览器主要完成了以下工作： 1. 从DOM树的根节点开始遍历每个可见节点。 2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。 3. 根据每个可见节点以及其对应的样式，组合生成渲染树。 第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括： *...
let和const是es6新出的两种变量声明的方式，接下来我来分别针对这两个，聊一聊。 ## let let它的出现，我认为主要是解决了块级作用域的需求。因为js以前本身是没有什么块级作用域的概念的(顶多就算上一个函数作用域),因此这也导致了很多变量污染的问题，很多时候由于你没有处理好作用域的影响，导致了奇怪的问题。因此我们一般都采取函数作用域的方式来防止变量的污染。不过既然有了let的出现，我们就可以很方便的解决这个问题. #### 块级作用域 ```javascript for (var i = 0; i < 5; i++) { console.log(i) } console.log(i) // 5 for (let j = 0; j < 5;...
在2019年末的时候，突然想搞点大事，思来想去，感觉只有跳槽是最刺激的。 由于我比较懒，不想换城市，所以这次只面试了头条、微信和 shopee。十分幸运，都拿到了 offer。接下来就简单的说下大家关心的面试题吧。问题的答案的话，之后有空我再补一下吧。 **由于我之前的公司是有专门的重构工程师写 css 样式的，所以当面试官开始问 css 的时候，我都会跟面试官说我对 css 可能不是很熟，讲明原因。** ## 头条 ### 一面 1. position 有哪些属性 2. position: sticky 用过没，有啥效果 3. typeof 的原理，与 instanceOf 、 Object.toString.call() 的区别 ...