NightWatch

# HTTP面试题

# HTML语义化

HTML语义化：更容易读懂、没有CSS样式的情况，也能呈现很好的内容结构、代码结构

# script标签的defer和async

script标签会阻碍HTML解析，下载好脚本并执行完才会继续解析HTML

  • async：异步下载，下载成功后立即执行，阻断HTML的解析
  • defer：完全不会阻碍HTML的解析，解析完成后再按照顺序执行脚本

# 浏览器输入URL到请求返回发生了什么？

  • 解析协议、主机、端口、路径信息，构造一个HTTP请求√
  • DNS域名解析√
  • TCP连接：三次握手确认双方的发送和接收能力
  • http请求√
  • 服务器处理请求并返回HTTP报文√
  • 浏览器渲染页面√
  • 断开TCP连接

# 文档流

HTML文档流是指HTML文档从元素按照从左到右，从上到下的顺序依次排列形成的一种布局方式。浏览器解析HTML文档时，会按照文档流的顺序依次生成元素并排列。

如果设置了定位或浮动，就有可能脱离文档流，影响其他元素的位置和排列方式

它为页面的布局和排版提供基础。

# 脱离文档流的方式(3种)

  • 设置元素position属性absolute或fixed
  • 设置元素浮动
  • 设置元素属性为非block属性

# WEB存储

cookie：

  • 存储大小限制4kb
  • http请求时需要发送到服务器，增加请求数量
  • 只能用document.cookie来修改

localStorage和sessionStorage:

  • H5专门为存储设计的，最大5M
  • API简单易用，setItem,getItem
  • 不会随着http请求发送到服务器端

区别：

  • localStorage是永久存储，除非手动删除
  • sessionStorage存在于当前回话，浏览器关闭就会清空
  • 一般用localStorage多一些

# CSS面试题

# CSS选择器和优先级

内联>ID选择器>类选择器>标签选择器

优先级是由A、B、C、D的值决定的，计算规则如下：

  1. 如果存在内联样式，那么A=1,否则A=0
  2. B的值等于ID选择器出现的次数；
  3. C的值等于类选择器和属性选择器和伪类出现的总次数
  4. D的值等于标签选择器和伪元素出现

ABCD从左往右依次进行，较大者胜出，如果相等，继续往右移动一位。如果四位全部相等，后面的会覆盖前面的。

两个样式比较四元数的大小

# 回流和重绘

# 基本概念

  • 回流：元素的几何信息改变，浏览器需要重新计算元素在视口的几何属性
  • 重绘：通过构造渲染树和重排，将渲染树的每个节点转换为屏幕的实际像素

# 何时会发生回流重绘

当页面布局和几何信息发生变化的时候。

  • DOM的添加和删除
  • 元素位置和尺寸变化
  • 浏览器窗口尺寸变化

# 浏览器的优化机制

浏览器将修改操作放在队列中，直到过了一段时间或者到达一个阈值才会清空队列。

在获取布局信息时，会强制队列刷新

# 如何减少重排和重绘？(注意)

  1. 最小化重绘和重排，如样式集中改变
  2. 批量操作DOM，隐藏元素、应用修改、重新显示
  3. 对于复杂动画，用绝对定位使其脱离文档流
  4. 避免触发同步布局事件
  5. CSS硬件加速(GPU加速)
    • transform、opacity、filters这些动画不会回流重绘
    • 其他属性会提升性能
    • 但会带来占用内存的性能问题

# BFC

BFC（Block Formatting Context）即块级格式上下文，每个BFC都是一个独立的渲染区域，使得开发者能够更好的控制页面布局和元素显示

每个盒子的布局由尺寸、类型、定位、盒子的子元素或兄弟元素，视口的尺寸和位置等

margin塌陷是CSS1.0引入的一个规则

css2.0的BFC就是为了解决margin塌陷的问题

视觉格式化模型：

  • 块级元素：display:block table list-item，块级盒：竖直排列
  • 行内级元素：display为inline，inline-block，inline-table，行内盒：多行排列

定位方案：

  • 普通流：浏览器默认的HTML布局方式
    • 浮动元素不会被父元素计算高度 √
    • 非浮动元素会覆盖浮动元素的位置 √
    • margin会传递给父级 √
    • 两个相邻的元素上下margin会重叠 √
  • 浮动：盒位于当前行的开头或结尾，普通流环绕在浮动盒周围
  • 定位技术
    1. 静态定位：默认定位方式
    2. 相对定位：position:relative相对于自身的偏移量
    3. 绝对定位：position为absolute或fixed，脱离文档流，相对于它的包含块
    4. 固定定位：包含块是浏览器视窗

# 主要特性

  • BFC内部块级盒在垂直方向一个接一个排列
  • 浮动盒的区域不会和BFC重叠
  • 计算BFC的高度时，浮动元素也会参与计算

# 创建方法

  • body根元素
  • float 属性left或right√ 浮动元素本身是一个BFC
  • position 属性为 absolute 或 fixed √
  • display 属性为 inline-block, table-cell, flex, inline-flex 等非 block 属性√
  • overflow 属性为auto，hidden，overlay

注意：position:relative 相对定位不会脱离文档流

# 使用场景

  • 清除浮动带来的影响，防止父元素高度塌陷。√ 父元素开启BFC
  • 解决外边距合并问题，使得相邻元素的外边距不会互相影响。√ 两个元素分别开启BFC
  • 实现多列布局，防止列高不一的问题。父元素和中间开启BFC，左右子元素浮动√
  • 防止元素被浮动元素覆盖。√ 被覆盖的元素开启BFC

# 布局方式

# 实现两栏布局

  • 左浮动+右margin-left
  • 左浮动+右BFC
  • flex
  • 利用绝对定位，左absolute，右margin-left设置为左宽度

# 圣杯布局

目的：

  • 三栏布局，中间最先加载
  • 两侧固定，中间内容随着宽度自适应
  • 一般用于PC网页

技术总结：

  • 使用float布局
  • 两次使用margin负值，以便和中间内容横向重叠
  • 圣杯布局用padding，双飞翼布局用margin

# 水平垂直居中方式

  • 绝对定位到中心+translate移动
  • flex：justify-content，align-items

Flex布局

flex弹性布局，设置flex之后，子元素的float、clear、vertical-align属性将失效

容器的属性：

  • flex-direction：决定主轴的方向
  • flex-wrap：设置换行方式
  • flex-flow：是flex-direction和flex-wrap的简写
  • justify-content：项目在主轴上的对齐方式
  • align-items：项目在交叉轴上的对齐方式
  • align-content：多跟轴线的对齐方式

项目属性：

  • order:定义项目的排列顺序
  • flex-grow：定义项目的放大比例，默认为0,如果有剩余空间，也不会放大
  • flex-shrink：项目的缩小比例，默认为1，空间不足时，缩小
  • flex-basis：分配多余空间之前，项目占据主轴的空间，默认0%
  • flex：是flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto
Last Updated: 12/23/2024, 4:18:13 AM

← 数据类型√ →