相关概念

像素

像素类型

• 物理像素: 设备实际拥有的像素点数
• 逻辑像素：实际用来成像的最小像素
  • 通常由多个物理像素组成
  • 程序里面获取到的是逻辑像素

像素比：Device Pixel Ratio，DPR

物理像素和逻辑像素之比，获得方法：window.devicePixelRatio

1px边框问题

原因：1逻辑像素获得了多个物理像素，显得线比较宽

解决方式：

1. 媒体查询像素比：-webkit-min-device-pixel-ratio
2. 根据像素比缩放：transform:scale(0.5)

filter在移动端设备卡顿的问题

解决方式： 通过在同一个元素上添加transform:translate(0)解决

冒泡与捕获

当事件发生在一个具有父元素的元素上时，会发生捕获阶段和冒泡阶段，现代浏览器默认使用冒泡模式

• 捕获阶段 从html元素开始，检查元素上是否注册相同事件，然后逐层向里检查，直到到达实际点击的元素
• 冒泡阶段 从实际被点击的元素开始，检查元素上是否有注册此事件，有则触发事件，然后逐层向外检查父元素上是否注册相同事件
  • 使用event.stopPropagation()来阻止冒泡，若在捕获阶段使用此方法，将使冒泡阶段的事件全部失效
  • 利用冒泡，event对象实现事件委托

盒模型

• BFC：块级格式化上下文

元素如何触发BFC：

• 浮动
• 绝对定位或者固定定位
• 表格布局或者弹性布局
• overflow不为visible

布局规则：

• 内部元素与外部元素不会相互影响

• 内部元素垂直方向一个个排列

• 在同一个BFC内的相邻元素上下外边距会重叠

• 触发BFC的盒子，高度将包括BFC盒子内的浮动元素（通过触发BFC清除浮动带来的影响）

• 每个BFC盒子内的元素都与盒子的左边缘相接触（包括浮动元素）

• BFC的元素区域不会跟浮动元素重叠

• IFC：行级格式化上下文

布局规则：

• 从盒子的顶部开始水平方向一个个排列
• 水平方向的内外边距和边框有效，垂直方向无效
• 不能指定宽高，宽度由包含的内容决定，高度由行高决定

进程与线程

进程是 CPU资源分配的最小单位；线程是 CPU调度的最小单位

1. 一个进程拥有多个线程和一个对应的内存资源，所有线程共享这些资源。
2. 多进程：各个进程互不干扰，就像写代码和听音乐一样
3. 多线程：各个线程互相协作，每个进程可以根据需要创建多个线程并行执行互相配合完成任务

当打开浏览器的一个tab时，就是创建了一个进程，该进程创建了如下的线程：

• GUI 渲染线程
• JavaScript引擎线程
• 定时触发器线程
• 事件触发线程
• 异步http请求线程

JavaScript引擎线程：

• 为什么js是单线程的? 反推，如果是多线程的，同一时间分别进行dom的修改和移除，就会增加复杂性，所以js是单线程的，减少了这类复杂性

• web worker 使js变成多线程 但依然限制dom操作，避免这类复杂性