2025/02/11 小西科技

• 技术创新类
• 旗下业务板块
  • 灵狐数据：移动应用数据分析平台
  • 莫邪互娱：卡牌和休闲游戏研发与发行
  • 神龙云：云计算解决方案

反问环节

1. 方便问一下公司前端使用的技术栈吗
2. 可以问一下公司开发团队规模吗
3. 岗位的主要职责和期待人选吗
4. 岗位是否稳定

• 是什么
  • 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
  • 重绘：当计算好盒模型的位置、大小和其他属性后，浏览器根据每个盒子特性进行绘制
  • 浏览器渲染机制：
    • 解析html，生成dom树，解析css，生成cssom树
    • 将dom树和cssom树结合，生成渲染树（render tree）
    • layout回流：根据渲染树，进行回流，得到节点的几何信息（位置、大小）
    • painting重绘：根据渲染树记忆回流的几何信息，得到节点的绝对像素
    • display：将像素发送给gpu，展示在页面上
• 如何触发
  • 回流触发时机
    • 添加或删除可见的dom元素
    • 元素位置发生变化
    • 元素尺寸发生变化（外边框、内边框、边框大小、高度、宽度）
    • 元素内容发生变化，文本变化、图片被另一个不同尺寸的图片所替换
    • 页面一开始渲染
    • 浏览器窗口尺寸变化
    • 这些属性都有一个共性：需要通过即时计算得到
    • getComputedStyle
  • 重绘触发时机
    • 颜色修改
    • 文本方向修改
    • 阴影修改
    • 触发回流一定会触发重绘
  • 浏览器优化机制
    • 浏览器会将操作放入对列表中，批量执行优化重排过程
    • 当需要获取正确的布局信息时，会强制队列刷新，这样offsetTop等方法都会返回最新的数据
• 如何减少
  • 想要设置元素样式，通过改变元素的class类型
  • 避免设置多项内联样式
  • 对于复杂的动画，设置position:fixed/absolute，使其脱离文档流
  • 避免使用table布局，table中每个元素的大小以及内容改动，都会导致整个table的重新计算
  • css3硬件加速，让transform、opacity、filters这些动画不会引起回流重绘

• id选择器 #box
• 类选择器 .one
• 标签选择器 div
• 后代选择器 #box div
• 子选择器 .one>one_1
• 相邻同胞选择器 .one+.two
• 群组选择器 div,p
• 伪选择器 :hover
• 伪元素选择器 :first-letter :before
• 属性选择器 [attribute=value]
• 伪类选择器 :nth-child

1. 内联样式
2. id选择器
3. 类、伪类、属性选择器
4. 标签、伪元素选择器
5. 通配符、子类选择器、兄弟选择器

• 块级元素
  • div、p、h1、ul、li
• 行内元素
  • span、a、img、input

• 根据内容的解构，选择合适的标签，让浏览器的爬虫和机器能够更好地解析
• 这是为了使页面在没有css的情况下，也能很好的展示出页面结构
• 有利于seo
• 提高代码可读性

1. url解析，分析协议、域名、端口、路由、传参
2. dns查询，获取目标服务器的ip地址
3. tcp连接，经历3次握手建立tcp连接
4. 发送http请求
5. 响应请求
6. 页面渲染
   • 解析html，构建dom树
   • 解析css，构建css规则树
   • 合并dom树和css规则，生成render树
   • 布局render树，负责个元素尺寸、位置计算
   • 绘制render树
   • 浏览器将各层信息发给GPU，GPU将各层合成，显示在屏幕上

• cookie
  • 大小限制4kb左右
  • 一般由服务器生成，可以设置失效时间
  • 浏览器生成Cookie，默认关闭浏览器后失效
  • 每次都会携带在http头中
  • 常用：验证用户登录是否过期
• localStorage
  • 持久化本地存储
  • 一般为5mb
  • 仅在客户端浏览器保存
  • 存放token
• sessionStorage
  • 数据只有在同一个会话中的页面才能访问
  • 绘画：浏览器窗口没有关闭
  • 一般为5mb

• 使用router.addRoutes方法动态添加路由
• router.addRoute
  • 还可以动态添加嵌套路由

• 路由权限
  • 用户登录后只能看到自己有权访问的导航菜单，只能访问自己有权访问的路由地址，否则跳转404提示页面
  • 方式一：初始化挂载全部路由，在路由上标记权限信息，每次路由跳转在路由钩子里做校验
    • 没必要加载所有路由，消耗性能大
    • 全局路由守卫里，每次路由跳转都要做权限判断
    • 菜单信息写死在前端
    • 路由跟菜单耦合在一起
  • 方式二：初始化时先挂载不需要权限控制的路由（登录、404等页面），如果用户通过url强制访问，直接进入404
  • 登录后，获取用户权限，筛选有权限访问的路由，在全局路由守卫里调用addRoutes添加路由
  • 按需挂载，路由就需要知道用户的路有权限
    • 全局路由守卫里每次路由跳转都要做判断
• 视图方面
  • 用户只能看到自己有权浏览的内容和有权操作的控件
  • 按钮权限
    • 方式一：v-if判断用户权限role
    • 方式二：自定义指令进行按钮权限判断
  • 菜单权限
    • 路由和菜单都由后端返回
• 接口权限
  • 越权请求将在前端进行拦截
  • 采用jwt进行验证，没通过返回401，跳转登录页面重新登陆
  • 登录完拿到token，放到localstorage存起来，axios请求携带token

• state 数据存放地
  • 可以直接修改state里面的值
  • vux需要通过mutation进行修改
• actions 异步
• getters 计算属性

• 在下次dom更新循环结束之后执行延迟回调
• 在修改数据之后，立即调用这个方法，可以获取更新后的dom