Docker 常用命令

精简 Docker 常用命令

2022-11-06 · 1 min read

项目管理

项目管理相关知识

2022-11-06 · 1 min read

JS沙箱sandbox的各种实现

我们把Js隔离机制常常称作沙箱

2022-09-18 · 1 min read

Amazing!Solid 比react还react

今天来介绍2个amazing的东东

2022-09-12 · 1 min read

puppeteer应用

使用傀儡师来操作浏览器这个傀儡吧

2022-09-11 · 1 min read

做一个web termianl

前端react, 后端nodejs, 直接可用版web termianl

2022-07-17 · 1 min read

TypeScript里常用的工具类型

经常用到的工具类型,提取抽离出来,供以后复用

2022-06-26 · 1 min read

Vim大法好

想要丢掉鼠标,试试Vim

2022-06-26 · 1 min read

碧血丹心

无论时光如何沾染风霜,也永似红日光

2022-05-10 · 1 min read

chrome V8 引擎中的垃圾回收机制

V8引擎就是nodejs的发动机

2022-03-03 · 1 min read

如何开发一个cli

命令行交互界面是程序员必备的工具,如何开发一个呢?

2022-02-21 · 1 min read

Javascript中的哲学

道生一,一生二,二生三,三生万物

2022-02-20 · 1 min read

React Redux 实现 (Context 版)

React Redux 实现 (Context 版)

2022-02-16 · 1 min read

mobx-react 使用

虽然不常用,但是可以学一下

2022-02-16 · 1 min read

Less中的for和forEach循环

循环的使用是保持代码干燥和避免重复的好方法

2022-02-15 · 1 min read

Webpack Splitchunks 详解

webpack 优化

2022-02-15 · 1 min read

ssh-keygen命令详解

为ssh生成、管理和转换认证密钥

2022-02-15 · 1 min read

使用CURL发送POST请求

curl 是常用的命令行工具,用来请求 Web 服务器。

2022-02-15 · 1 min read

Webpack Plugin 开发

让我们来学一下如何开发一个webpack插件

2022-02-14 · 1 min read

JS 实现两个大数相加?

algo-adding-large-numbers

2022-02-10 · 1 min read

字典树 trie

字典树 trie

2022-02-09 · 1 min read

浏览器原理问题

浏览器原理问题

2022-01-11 · 1 min read

MacBook快速进入一个文件夹目录

mac如何快速进入一个文件夹

2021-10-26 · 1 min read

react合成事件

react-synthetic-event

2021-10-25 · 1 min read

mini webpack实现

通过babel核心来实现迷你版的webpack

2021-10-10 · 1 min read

设计模式

在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于类

2021-10-10 · 1 min read

babel核心

babel核心介绍

2021-10-07 · 1 min read

React 15 和 React 16 的区别

react-15-16

2021-10-06 · 1 min read

React性能优化

浅谈react性能优化的方法

2021-10-05 · 1 min read

交通信号灯实现

如何用js来实现交通信号灯呢

2021-09-25 · 1 min read

内存管理

前端中的内存管理

2021-09-25 · 1 min read

前端安全

前端关于安全方面的知识

2021-09-25 · 2 min read

网络和并发

http各版本对于并发的支持,前端如何控制并发量?

2021-09-25 · 1 min read

跨域方法

总结了9种跨域方法

2021-09-24 · 1 min read

react virtualList 虚拟列表无限滚动实现

用react实现虚拟滚动

2021-09-16 · 1 min read

监控埋点方案

前端监控埋点方案

2021-09-16 · 1 min read

Mini useEffect实现

如何实现useEffect?

2021-09-11 · 1 min read

Mini useState 实现

我们来思考一下useState是怎么实现的呢?

2021-09-11 · 1 min read

React Fiber

react-fiber

2021-09-11 · 1 min read

React class组件和function组件异同

类组件和函数组件有何相同点有何不同点呢?

2021-09-11 · 1 min read

Lodash Get 实现

algo-lodash-get

2021-09-08 · 1 min read

手写reduce实现

algo-reduce

2021-09-08 · 1 min read

Hooks 原理概览

react-hooks

2021-09-05 · 1 min read

Hook原理——状态Hook

react-hook-state

2021-09-05 · 1 min read

手写Mini Redux实现

手写一个简易版的redux实现,包含了核心逻辑

2021-09-04 · 1 min read

legacy和concurrent模式

react-legacy-concurrent

2021-09-01 · 1 min read

react架构

总体 react 的核心可以用 ui=fn(state)来表示 3 大核心对象、3 大核心阶段、2 大工作循环 Scheduler(调度器): 排序优先级,让优先级高的任务先进行 reconcile Reconciler…

2021-09-01 · 2 min read

react核心api和jsx

为什么要有jsx,为什么会有虚拟bom

2021-09-01 · 1 min read

setState是同步的还是异步的

react-setstate-usestate

2021-08-31 · 1 min read

如何使用NodeJs创建HTTP服务?

如何使用NodeJs创建HTTP服务?

2021-08-17 · 1 min read

NodeJS 事件循环模型

nodejs-eventloop

2021-08-11 · 2 min read

Buffer

nodejs中的内存管理

2021-08-10 · 1 min read

微前端解决方案-qiankun

目前国内最好的微前端解决方案-qiankun

2021-08-10 · 1 min read

React Mini版实现(1)

学一门技术最好的方法就是做一个其玩具版的实现,我们来尝试实现一下react和react-dom最简单版本吧

2021-08-04 · 1 min read

brew安装

brew 是 MacOS 上的包管理工具,可以简化 macOS 和 Linux 操作系统上软件的安装。

2021-08-04 · 1 min read

CommonJS简易版实现

CommonJS我们经常用,如何实现一个简易版的commonJS呢?

2021-08-01 · 1 min read

极品透明Dashboard样式分享

一个极品透明Dashboard样式分享

2021-07-30 · 1 min read

Stream

nodejs中的流

2021-07-11 · 1 min read

NodeJS全局对象

JavaScript 中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在程序的任何地方访问,即全局变量。

2021-05-18 · 1 min read

如何部署Nodejs服务

如何快速的部署一个Nodejs服务到公网呢?

2021-05-12 · 1 min read

Events

events模块是node的核心模块之一,几乎所有常用的node模块都继承了events模块,比如http、fs等。

2021-05-11 · 1 min read

用JS绘制背景,让CSS直接使用 'background:paint(xxx)'

CSS对象新特性,新的background设置方式

2021-04-30 · 1 min read

如何使用Nodejs来创建一个TCP/UDP服务?

如何使用Nodejs来创建一个TCP/UDP服务?

2021-04-17 · 1 min read

Mac使用tree生成目录结构

程序员经常会有需求,需要列出项目的结构树。Mac或者Linux下可以使用tree列出项目结构

2021-04-04 · 1 min read

常见算法

一些比较常见算法

2021-03-20 · 1 min read

前端缓存

对于性能优化离不开缓存

2021-02-28 · 1 min read

前端答疑

一些比较常见的问题

2020-09-02 · 1 min read

Nodejs 网络 & HTTP

nodejs-network

2020-08-14 · 1 min read

JavaScript AST 抽象语法树

源代码的抽象语法结构的树状表现形式

2020-08-02 · 1 min read

nodejs里面向切面编程的一种范式

在一些场景下我们可能需要一种面向切面的编程方式

2020-08-01 · 1 min read

各种JS模块化特性

AMD、CMD、CJS、ESM

2020-05-30 · 1 min read

手写Ajax实现

使用HMR一步步实现Ajax

2020-05-30 · min read

手写PromiseA+实现

如何自己实现promiseA+规范,手写一个promise实现

2020-04-30 · 1 min read

debug和内存泄露

nodejs的debug方法

2020-04-08 · 1 min read

Javascript prototype 原型链

js-prototype

2019-09-07 · 1 min read

this指针、作用域

this是在执行时动态读取上下文决定的,不是在定义时决定

2019-06-14 · 1 min read

call、apply、bind的极简实现

使用symbol实

2019-06-03 · 1 min read

CSS联合选择器区分列表元素个数不同所要求的不同样式

对于列表,在有些时候针对于不同个数的item会有不同的显示,比如col份数,用js固然可以,是否可以用css更简便的实现呢?

2019-04-30 · 1 min read

TypeScript基础

介绍TypeScript基础知识

2019-04-30 · 1 min read

JS中的变量提升

为什么js当时要这样设计

2019-03-07 · 1 min read

ES6之Class

关于ES6里的class, 我们有什么不知道的事?

2019-03-01 · 1 min read

HTTP详解

HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传输协议

2019-02-17 · 2 min read

极简代码实现节流Throttle和防抖Debounce

使用各9行代码实现节流和防抖函数

2019-01-30 · 1 min read

Javascript 事件循环 EventLoop

js-eventloop

2018-09-07 · 1 min read

POST和GET区别

POST和GET区别是什么呢?

2018-08-14 · 1 min read

正则表达式

正则表达式一锅端

2018-07-30 · 1 min read

cloneDeep 深克隆实现

algo-clonedeep

2017-09-07 · 1 min read

webpack

engin-webpack

2017-09-07 · 1 min read

http1.1和http2.0有什么区别

http1.1和http2.0有什么区别

2017-06-14 · 1 min read

手写EventEmitter事件巴士

咱们来手写实现一个EventEmitter事件巴士

2017-01-10 · 1 min read

OOP 面向对象编程

对象是什么?为什么要面向对象?

2016-05-08 · 1 min read
Stay hungry & Stay foolish
战歌
16
The Reluctant Warrior
Immediate Music
To Glory
Two Steps From Hell
Victory
Two Steps From Hell
Empire of Angels
Thomas Bergersen
Serenata Immortale
Immediate Music
Cornfield Chase
Hans Zimmer
Tennessee
Hans Zimmer
He's a Pirate
Martin Ermen
Rise
Hans Zimmer
On Thin Ice
Hans Zimmer
Angels Will Rise
Twisted Jukebo
When It All Falls Down
Audiomachine
Icarus
Ivan Torrent
Star Sky - Instrumental
Two Steps From Hell
亡灵序曲
L
Up Is Down
Hans Zimm
回到首页

浏览器原理问题

袁官东
January 11th, 2022 · 1 min read
图:Mako Tsereteli

地址栏输入一个 url 开始,浏览器都做了什么工作?

1.URL 解析

浏览器先去判断这个 URL 是否是正确的 URL,若是正确合法的 url, 那么浏览器进程会根据输入的内容进行下一步操作。

2.DNS 查询

通过根域名服务器->顶级域名服务器->二级权限域名服务器逐级进行迭代查询,到达最终的服务器

3、TCP 连接

在确定目标服务器的 IP 地址后,则经历三次握手建立 TCP 连接

4、发起 HTTP 请求

当建立 tcp 连接之后,就可以发送 http 请求到目标服务器 请求的内容包括:请求行、请求头、请求主体

5、收到 http 响应请求

服务器收到请求后进行逻辑操作,处理完成之后返回一个 http 响应消息,包括:状态行、响应头、响应正文 服务器响应之后,由于现在 http 默认开启长链接 keep-alive,当页面关闭之后,tcp 链接则会经过四次挥手完成断开

6、页面渲染

当浏览器接收到服务器响应的资源后,首先会对资源进行解析:

  • 查看响应头的信息,根据不同的指示做对应处理,比如重定向,存储 cookie,解压 gzip,缓存资源等等

  • 查看响应头的 Content-Type 的值,根据不同的资源类型采用不同的解析方式

  • 解析 HTML,构建 DOM 树

  • 解析 CSS, 生成 CSS 规则树

  • 合并 DOM 树和 CSS 规则,生成 render 树

  • 布局 render 树(Layout/reflow),负责各元素尺寸、位置的计算

  • 绘制 render 树(paint),绘制页面像素信息

  • 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成(composite),显示在屏幕上

js 会阻塞 HTML 的解析过程吗?为什么?

会,当 HTML 解析器碰到 script 标签的时候,它会停止 HTML 文档的解析从而转向 JavaScript 代码的加载,解析以及执行。因为 js 里会执行 document.wirte 等能改变 dom 的动作,html 的解析不得不等 js 执行完毕之后再进行解析

什么情况下会触发回流/重排?浏览器本身会有什么优化动作吗?

  • 添加或删除元素
  • 元素的尺寸大小
  • 位置发生改变
  • 内容改变
  • 一开始渲染时
  • 浏览器窗口大小改变时

时会发生重排,当颜色变化时会发生回流,还有当 js 获取诸如

1offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

也会发生重排和回流,原因是浏览器对于重排和回流做的优化的副作用引起的 浏览器为了减少重排发生的频率,把重排的动作放在一个队列里,直到过了一段时间或者操作达到了一个阈值进行一次性清空队列的操作,而我们获取 offsetTop 肯定是希望拿到最新的值,所以浏览器不得不清空重绘和回流的队列

如何尽量避免回流的出现?

  • 如果想设定元素的样式,通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
  • 避免设置多项内联样式
  • 应用元素的动画,使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
  • 避免使用 table 布局,table 中每个元素的大小以及内容的改动,都会导致整个 table 的重新计算
  • 对于那些复杂的动画,对其设置 position: fixed/absolute,尽可能地使元素脱离文档流,从而减少对其他元素的影响
  • 使用 css3 硬件加速,可以让 transform、opacity、filters 这些动画不会引起回流重绘,比如做动画时,尽量不要使用 top,left,width , 尺寸大小,位置等属性的改变来做,而使用 transform 属性来做
  • 避免使用 CSS 的 JavaScript 表达式
  • 需要获取 offset 等属性的时候, 最好用一个变量缓存起来, 不要每次都去获取

浏览器多进程架构的好处是什么?

容错性

Chrome 会为每个 tab 单独分配一个属于它们的渲染进程(render process)。举个例子,假如你有三个 tab,你就会有三个独立的渲染进程。

当其中一个 tab 的崩溃时,你可以随时关闭这个 tab 并且其他 tab 不受到影响。可是如果所有的 tab 都跑在同一个进程的话,它们就会有连带关系,一个挂全部挂。

安全性和沙盒性

因为操作系统可以提供方法让你限制每个进程拥有的能力,所以浏览器可以让某些进程不具备某些特定的功能。例如,由于 tab 渲染进程可能会处理来自用户的随机输入,所以 Chrome 限制了它们对系统文件随机读写的能力。

每个进程可以拥有更多内存

因为每个进程都会分配一块独立的内存空间, 所以理所当然的, 每个进程都会有更多的内存。

z-index 的生效规则

只有定位元素才会生效

z-index 这个属性并不是在所有的元素上都有效果。它仅仅只在定位元素(定义了 position 属性,且属性的值为非 static 值的元素)上有效果

层叠顺序

background/border —— 形成层叠上下文的元素的背景和边框,也是层叠上下文中的最低等级。

z-index <0 —— 层叠上下文内有着 负 z-index 值 的子元素。

block 块级盒 —— 文档流中非行内非定位子元素。

float 浮动盒 —— 非定位浮动元素。

inline/inline-block 行内盒 —— 文档流中行内级别非定位子元素。

z-index: 0 —— 定位元素,这些元素将形成了新的层叠上下文。

z-index > 0 —— 定位元素。 层叠上下文中的最高等级。

所有的元素层级是按照上面的排序进行的, 也就是说 z-index > 0 的层级最高, 最靠近屏幕前的我们, 也就是观察者.

同级比较

有的时候我们发现 z-index9999 居然比 z-index 100 更低? 为什么??

这时候我们要知道 z-index 是同级比较, 比如下面的例子

1div1 z-index:10
2 div2 z-index:200
3 div3 z-index:999
4div4 z-index:20

展示的层级高度是怎样的顺序?

是 div4 > div3 > div2 > div1

因为 div1 和 div4 是同级的, div4 比整体的 div1 高.

完整的写一下高度, 效果类似于:

1div1: 10;
2div2: 10 - 200;
3div3: 10 - 999;
4div4: 20;

More articles from Favori 重剑

MacBook快速进入一个文件夹目录

mac如何快速进入一个文件夹

October 26th, 2021 · 1 min read

react合成事件

react-synthetic-event

October 25th, 2021 · 1 min read
© 2016–2022 Favori 重剑
Link to $https://github.com/yuanguandongLink to $https://favori.zcool.com.cn/Link to $https://codepen.io/favori