圆通速递一面

一、什么是 CSS 盒模型？

CSS 盒模型是指每个 HTML 元素可以被看作一个矩形盒子，这个盒子由多个区域组成。这些区域包括内容区域、内边距（padding）、边框（border）和外边距（margin）

盒模型的组成部分

1. 内容区域（Content）：包含元素的实际内容，如文本、图片等。内容区域的大小由 width 和 height 属性设置。
2. 内边距（Padding）：内容区域与边框之间的空间，内边距可以使内容与边框之间保持一定的距离。通过 padding 属性设置，四个方向的内边距可以单独定义或使用简写属性一次性设置。
3. 边框（Border）：围绕内边距和内容区域的边框，边框的样式、宽度和颜色可以通过 border 属性设置。
4. 外边距（Margin）：元素与相邻元素之间的空间，外边距用于调整元素的位置。通过 margin 属性设置，同样支持单独定义每个方向或使用简写属性。
5. 三个值：第一个值应用于上，第二个值应用于左右，第三个值应用于下
6. 四个值：按顺时针方向分别应用于上、右、下、左

---

二、promise常用的方法

pending进行中

fuilled成功 pending–》resolve

reject失败 pending–>reject

缺点：书写麻烦，不能实现异步代码，同步执行的需求（配合async函数使用即可）

---

三、闭包 优缺点 注意什么

闭包：当函数可以记住并访问外部作用域，就产生了闭包，那个外部作用域就叫做闭包

优点：避免全局变量被污染

缺点：使用不当会造成内存泄漏

形成的原因：外层函数的作用域对象无法释放。

---

四、事件循环机制

异步任务的回调函数被分为两类，存放在不同的队列中：

• 宏任务队列（MacroTask Queue）：包括 setTimeout、setInterval、DOM 事件回调、I/O 操作（如文件读写）等。
• 微任务队列（MicroTask Queue）：包括 Promise.then、MutationObserver、process.nextTick（Node.js 特有）等。
• 微任务优先于宏任务：每次执行栈清空后，先处理所有微任务，再执行一个宏任务。
• 执行同步代码
  所有同步任务直接进入执行栈（Call Stack）执行，遇到异步任务时，将其回调注册到对应的队列中。

---

五、var、let、const的区别

一、共同点
var、let、const都可以声明变量

二、不同点

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

var和let都是变量，var因为没有块级作用域的概念，所以它会有提升机制，而let有块级作用域所以并不存在提升机制，而const指向一个内存空间（我理解为仓库），这个仓库里面你放的东西你可以修改他们，但是这个仓库独此一份，不可以修改仓库的名字。

---

六、首屏优化有哪些方案

资源压缩与合并：

• 1.压缩css和JavaScript
• 2.合并静态资源

图片优化与懒加载：

• 1.选择高效图片格式
  优先使用webP(支持透明度和动画)、JPEG等格式，替代体积较大的PNG格式
• 2.图片懒加载
  通过loading='lazy'属性延迟加载非首屏内容，仅在用户滚动到特定区域时加载图片
• 3.响应式图片
  使用srcset和sizes属性根据屏幕尺寸动态调整图片分辨率，避免加载过大图片

缓存与CDN加速

• 1.浏览器缓存
  配置http缓存策略（如设置cache-control头部），减少重复请求
• 2.使用CDN
  将静态资源部署在内容分发网络（CDN），缩短用户访问延迟

避免复杂动画或过多元素干扰首次渲染，优先展示关键信息

https相比http的区别

https相比http的区别在于:https使用了SSL/TLS加密协议，确保数据传输的安全性和完整性，通信时需要证书验证。

https相比于http的区别主要在于安全性。https使用SSL/TLS加密传输数据，确保数据在客户端和服务器之间的通信是加密的，防止数据被窃听或篡改。而http是明文传输，没有加密，存在安全风险。此外，https需要通过CA认证获取数字证书，而http无需认证。