前端知识梳理

Hermes
63 阅读7分钟

前端知识

工程化

Vite和Webpack

  • 使用过vite和webpack创建工程的经验，深有体会
  1. Vite启动很快，webpack启动较慢
  2. Vite冷启动很快仅需启动devserver，webpack需要将依赖整体打包，vite在需要使用时按需加载模块
  3. vite原生支持对vue文件ts文件的转换以及一些css预处理器的loader（如sass、less），webpack需要配置对应的loader
  4. vite更轻量化，适合小型项目；webpack支持的配置项更多更灵活

  • vite rollup esbuild什么关系？

    1. 开发阶段vite使用esbuild进行打包，将cjs模块转换为ESM，可以按需加载，项目启动快
    2. rollup在vite打包时使用，支持tree-shaking和代码分割

  • pnpm 和 npm区别，为什么pnpm更快

  • pnpm 幽灵依赖

    • 幽灵依赖是指未在package.json中明确声明却在包中引用的情况
    • pnpm通过软链接的方式在node_modules中保留了层级关系，对于相同的依赖在.pnmp文件夹下保存不同版本的依赖包

babel和polyfill

  • polyfill - 新增不支持的属性
  • babel - 将高级语法转义为低级语法

JS基础

  1. ES6新特性
    • 箭头函数
    • 解构赋值
    • Promise async/await
    • 可选链
  2. 位置相关属性
    • pageX 点击位置距离相对于整个文档的左侧 pageX = clientX + scrollLeft
    • scrollTop 页面已经被滚动去的部分
    • offsetX 点击位置相对于触发事件的元素的左侧 内容区域，不包括padding和边框
    • clientX 相对于浏览器窗口的位置

Array方法

  • indexOf 和 includes比较的原理
    • arr = [NaN] arr.indexOf(NaN) // -1 arr.includes(NaN) // true
    • 内部都是基于全等运算符===进行比较的，但是includes中对特殊值NaN进行处理
  • push pop shift unshift
  • slice splice
  • map reduce
  • some every

CSS相关

flex

  • 主轴方向
  • 水平垂直相关属性
  • flex：1的作用
容器属性
  • flex-direction 主轴方向
  • justify-content 主轴上元素的对齐方式
  • align-items 交叉轴上的对齐方式
  • align-content 多条轴线的对齐方式
  • flex-wrap 在轴线上排列不下的换行方式
项目属性
  • order 排序方式 整数 越小的越靠前 可为负数
  • flex 是flex-grow flex-shrink(可选) flex-basis(可选)的合并 -> flex-grow (flex-shrink) (flex-basis)
  • flex-grow 项目的扩展比例
  • flex-shrink 项目的缩小比例 0为不缩小
  • flex-basis 设置项目占据的固定空间 可设置为像素值px 默认为auto
  • align-self 可以单独为某个项目设置在交叉轴上的对其方式，会为单个元素覆盖其align-items属性

rem布局

CSS长度单位
  1. 绝对长度 in cm mm pt pc
  2. 相对长度 px % vw vh em rem
  3. em相当于父元素的字体大小 rem只会去看根元素html的字体大小

网络相关

状态码

  • 100 继续请求
  • 200 成功相关
    • 200 成功
    • 206 部分响应
  • 300 重定向
    • 301 永久重定向 浏览器会记录下新的location之后都去请求新的location
    • 302 临时重定向
    • 304 缓存未修改 可以进行缓存中读取 协商缓存
  • 400 客户端错误
    • 400 请求参数错误
    • 404 资源未找到
    • 403 未授权的操作
  • 500 服务器错误
    • 500 服务器错误
    • 503 服务不可用

强缓存和协商缓存

  • 强缓存
    • 使用cache-control响应头规定最大过期时间，过期后就抛弃缓存重新请求获取最新数据
  • 协商缓存
    • 每次请求都会询问服务器是否过期，如果过期服务器会返回状态码200和最新的数据；如果未过期会返回状态码304
    • 浏览器发送请求头If-Modify-Since是一个时间值，服务器判断在这个时间节点前是否修改，未修改响应304
    • 浏览器发送请求头If-None-Match是文件的hash值，服务器重新计算哈希值进行判断，如果相同响应304

Vue相关

响应式原理

teleport

自定义指令

生命周期hook
  1. bind 初始化阶段一次性配置
  2. inserted 元素被绑定到父节点
  3. update vnode更新时触发
  4. componentUpdate vnode当前节点和子节点全部更新后
  5. unbind 解绑时触发一次

vueRouter

  1. 两种模式

    • History
      • history.pushState history.replaceState 不会引起页面刷新
      • 需要nginx配合转发到前端SPA入口文件由前端做页面路由，否则会404
    • Hash
      • 监听window上的hashchange事件

  2. 路由hook

    • 全局hook
      • beforeEach
      • afterEach
    • 组件内hook
      • beforeRouteEnter
      • beforeRouteUpdate
      • beforeRouteLeave
    • 路由独享hook
      • beforeEnter

Vue2 Vue3的区别

1. 响应式原理
  • vue2基于Object.defineProperty实现，是对对象的每个属性单独设置getter和setter，所以新增的属性不能被响应式获取到；
  • Vue3基于Proxy实现，直接对整个对象进行代理，省去了vue2原本需要递归去为每一个对象属性添加监听的操作
  • 为什么Vue2修改数组索引无效？ 基于Object.defineProperty对数据进行监听，在数组对象中无法为每个索引增加getter和setter监听，可以通过数组方法实现响应式更新，因为vue内部重写了数组的方法并在之后通知了订阅这个数据的watcher将变化patch到对应的视图上
2. API模式不同
  • vue2是选项式API，可以通过mixin抽离；只支持单根组件，必须在外层用一个div包裹
  • vue3是组合式API，便于抽离；支持多根组件
3. 性能优化
  • vue3优化了虚拟dom算法
  • vue3中v-if优先级高于v-for vue2中 v-for优先级更高
  • vue3中生命周期去除 beforeDestroy/destroyed 改为beforeUnmount/unmounted
4. 开发生态
  • vue2脚手架默认是webpack 状态管理用vuex
  • vue3脚手架默认为vite 状态管理推荐用pinia

Git

  1. git fetch 和 git pull
    • git fetch会将所有分支的信息都拉取过来，但是不自动进行合并
    • git pull会将当前活跃分支的远程仓库内容拉取下来并自动进行合并
  2. git rebase
    • 变基
    • git rebase -i 合并多个提交

优化相关

错误上报、埋点

  • 采集
    • 浏览器onerror
    • 框架自带错误回调
  • 上报
    • gif图片上传
    • sendBeacon
    • source-map
  • 入库分析
    • 构建上层监控平台

场景相关

换肤

  • 主题全局sass less变量

axios

  • 如何取消重复请求

Websocket

  • 心跳机制
      1. 连接建立后定期发送心跳数据
      1. 服务端接收到心跳数据后进行回应
      1. 如果未收到回应进行重连
      1. 重连成功后重置重连计数
      1. 重连次数达到上限时取消连接

微前端

  • qiankun

    • 原理 类似于vue-router实现方式，single-SPA应用，通过监听浏览器path的变化将匹配到的路由对应的子应用渲染到容器上

    • 如何实现通信

        1. 通过发布订阅模式设计
        1. 主应用中首先初始化全局变量initGlobalState，在注册子应用时传递
        // 主应用
import { initGlobalState } from 'qiankun';
const state = { user: 'admin' };
const actions = initGlobalState(state);
// 注册子应用时传递 actions
registerMicroApps([{ 
  entry: '//localhost:8080', 
  props: { actions } 
}]);
        1. 子应用中获取/修改变量
          mount(props) {
    props.onGlobalStateChange((state) => {
      console.log('状态变更:', state);
    }, true); // true 表示立即触发回调
    props.setGlobalState({ user: 'guest' }); // 修改状态
  }

    • 如何实现js隔离

        1. 快照沙箱 在应用激活时将当前window进行快照保存，恢复时将快照逐一恢复
        1. 改进的快照沙箱 避免了全部遍历window对象造成的开销
        1. Proxy沙箱 直接在监控对象上进行修改，每个应用有一个独立的Proxy对象

    • 解决了那些问题？

      • 模块太多，每次构建上线都需要整体打包
      • 项目启动时需要整体打包编译
      • 拆分模块，可以跨框架，A应用Vue B应用React

MutationObserver 和 IntersectionObserver

  • MutationObserver 监控DOM变化 添加子节点 属性变更等
  • IntersectionObserver 判断是否与视口有交叉 可以做图片懒加载功能
avatar
文章
阅读
粉丝