【每日前端面经】2023-02-27
题目来源: 牛客
CSS盒模型
CSS中的盒子包括margin|border|padding|content四个部分，对于标准盒子模型（content-box）的width=content，但是对于IE盒子模型（border-box）的width=content+border2+padding2
CSS选择器
- 标签选择器
- 类选择器
- ID选择器
- 参数选择器
- 通用选择器
- 组合选择器
- 子代选择器
- 后代选择器
- 兄弟选择器
- 相邻兄弟选择器
- 列表选择器
- 伪类选择器
- 伪元素选择器
JS数据类型
- Number
- String
- Object
- Undefined
- Null
- Boolean
- Symbol
- BigInt
Webpack打包的理解、性能优化
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器。当Webpack处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
- 提升基础环境版本
- 使用include/exclude避免重复打包
- 合理利用缓存
- 合理使用plugin
- 合理配置resolve
- 启用多进程打包
- 开发中使用热更新替换自动刷新
- 使用DIIPlugin插件优化时间
前端性能优化
- 浏览器
- 减少HTTP请求
- 使用HTTP2.0
- 设置浏览器缓存
- 白屏做加载动画
- 资源
- 静态资源CDN
- 静态资源单独域名
- GZIP压缩
- 做服务端渲染
- 头部放置CSS，底部放置JS
- 图片
- 字体图标代替图片图标
- 精灵图
- 图片懒加载
- 图片预加载
- 使用PNG格式的图片
- 图片转BASE64格式
- 代码
- 慎用全局变量
- 缓存全局变量
- 减少回流与重绘
- 节流防抖
- 少用闭包
- 减少数据读取次数
- 文档碎片优化节点
- 减少判断层级
- 字面量与构造式
- 项目
- 长列表优化
- web worker
- 避免iframe
- 打包
- 减少代码体积
- 按需加载
- 提取第三方库代码
- webpack dll优化
Vue2和Vue3的区别
- 生命周期
- 多根节点
- 组合式API
- 异步组件
- Teleport: 可以将部分DOM移动到APP之外的位置
- 响应式原理: Vue2的原理是Object.defineProperty；Vue3的原理是Proxy/Reflect
- 虚拟DOM: 新增patchFlag字段，优化渲染
- 事件缓存
- Diff算法优化
- 打包优化: 新增Tree-shaking
- TypeScript支持
Vue-Router的原理
路由描述的是URL与UI之间的映射关系，这种隐射是单向的，即URL变化引起UI变化（无需刷新页面）
- hash模式: 通过hashchange事件监听URL的变化
- history模式: 拦截pushState/replaceState的调用和标签的点击事件监听URL的变化
开发中遇到错误怎么排查
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
深入浅出vue-router原理
CSS 3 所有的选择器整理（2023.2）
判断Vue3与Vue2的区别
web前端性能优化（全汇总）
webpack 打包原理及流程解析，超详细！