可我不爱聪明
  • 网页性能优化方案
    • dns预解析
      <link rel="dns-prefetch" href="//www.baidu.com" />
    • 静态资源使用cdn地址
    • 服务端开启gzip压缩
    • 使用http缓存静态资源
    • 页面中图片使用懒加载
    • 合并页面中小图标用雪碧图
    • js/css资源压缩合并，减少tcp链接消耗，减少报文传输大小
    • 构建项目，chunk分离，减少首次加载包大小
    • 优化代码
      • 缓存变量，减少作用域链查找
      • dom操作时，减少浏览器重排重绘次数
      • 动画使用animation, 开启gpu加速模式
  • 在浏览器输入url到页面展示经历了哪些过程
    • DNS查询
      • 浏览器缓存查询
      • 系统缓存查询
      • hosts查询
      • 本地域名服务器查询
    • 建立TCP连接
    • 发起http请求
    • 服务器处理请求并返回结果
    • 浏览器解析并渲染
      • 解析html构建DOM树
      • 解析css构建CSSOM树
      • 合并DOM和CSSOM生成渲染树
    • 断开连接
  • http状态码
    • 1xx 信息
    • 2xx 成功
    • 3xx 重定向
      • 301 永久重定向
      • 302 临时重定向
      • 304 使用缓存
    • 4xx 客户端错误
      • 403 禁止访问
      • 404 找不到页面
    • 5xx 服务端错误
      • 502 网关错误
  • http缓存方式
    • Expire 过期时间
    • cache-control
      • no-store 不适用缓存
      • prviate 客户端可缓存
      • public 客户端、路由器可缓存
      • max-age 最大缓存时间（s）
      • no-cache 对比缓存 未过期 服务端返回304状态码，本地使用缓存
        • Etag / IF-None-Match
          • 响应头返回唯一标识 / 请求头携带上次响应的资源唯一标识
        • Last-modified / if-modified-scene
          • 响应头返回资源上次修改时间 / 请求头携带上次响应资源修改时间
  • tcp/ip 三次握手 四次挥手
    • TCP 三次握
      • 客户端发起 SYN=1 seq=x
      • 服务端发起 ACK=1 SYN=1 ACKnum=x+1 seq=y
      • 客户端发起 ACK=1 SYN=0 ACKnum=y+1
    • TCP 四次挥手
      • 客户端准备断开连接
      • 服务返回可以断开连接了并等待
      • 服务端返回断开连接
      • 客户端断开连接
  • https是什么
  • 七层/五层 网络协议
    • 七层
      • 应用层
      • 表示层
      • 会话层
      • 传输层
      • 网络层
      • 数据链路层
      • 物理层
    • 五层
      • 应用层 HTTP
      • 传输层 TCP
      • 网络层 IP
      • 数据链路层 物理上传输的数据帧
      • 物理层 二进制物理硬件上传输数据
  • jsonp原理
  • xhr状态码
    • open -> send -> onreadystatechagne
    • 0 未初始化
    • 1 启动 已使用open未使用send
    • 2 发送 调用send，并接受到header
    • 3 接收 接收到部分响应报文
    • 4 完成 已接收全部数据
  • 移动端首屏优化
    • 基础优化方案与网页性能优化相同
    • 使用服务端渲染
    • 首次只加载首屏使用数据和资源，其他延后加载
    • 在客户端，使用离线包
    • 预加载下一页所需资源
  • 300ms延迟
    • 移动端有双击放大操作
  • fastclick原理
    • 在touchend结束后，触发一个自定义的click事件，取消浏览器的click事件
  • 淘宝flexble原理
    • 将设计稿宽度分为100分
    • 一份为1个单位a
    • 1rem = 10a
    • 例如：
      • 750宽的设计稿
      • 1rem = 75px
      • html标签上font-size就为75px
      • 适应到400宽度的手机屏幕上，html标签上font-size就为 400 / 75 = 53.6px
  • 移动端适配
    • 使用flexble，利用rem
    • 使用媒体查询，对不同尺寸屏幕，使用不同样式
  • 原型链
  • 闭包
  • new操作符做了哪些操作
  function creactObj(func) {
        const obj = {};
        obj.__proto__ = func.prototype;
        const result = func.call(obj);
        if (typeof result !== 'object') return obj;
        return result;
    }

  • promise是什么

  • import/export

  • BFC是什么

    • 块级格式上下文，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响
    • 1、float的值不是none。
    • 2、position的值不是static或者relative。
    • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
    • 4、overflow的值不是visible

  • flex布局

  • 垂直居中

    • 单行文本 line-height = height
    • 绝对布局 top: 50% , transform: translateY(-50%)
    • flex布局 align-item: center
    • display: table-cell; vertical-align: middle;
    • 绝对定位 四方都为0，margin: auto

  • react优势

    • 组件化思想，使得代码复用率变高，代码之间的耦合性也降低了
    • 使用数据控制视图，使得数据流向清晰
    • 能够实现服务端渲染
    • 使用虚拟dom，在更新视图时使用diff算法计算出需要更新的节点，减少不必要的重复操作，提高性能

  • react生命周期

    • 老版生命周期
      • 初始化
        • constructor
        • componentWillMount
        • render
        • componentDidMount
      • 更新
        • componentWillRecvieProps
        • shouldCompnentUpdate
        • compnentWillUpdate
        • render
        • compnentDidUpdate
      • 卸载
        • compoentWillUnmoment
    • 新版生命周期
      • 初始化
        • constructor
        • getDerivedStateFromProps
        • render
        • componentDidMount
      • 更新
        • getDerivedStateFromProps
        • shouldCompnentUpdate
        • render
        • getSnapshotbeforeUpdate
        • compnentDidUpdate
      • 卸载
        • compoentWillUnmoment

  • 什么是虚拟dom

    • 使用js对象表述dom节点
    • 减少不必要的更新
    • 更新dom的代价是很大的，这涉及到浏览器的重排跟重绘

  • diff算法是什么

    • 三个假设
      • 跨层级的dom操作比较少
      • 相同的组件生成的树结构相似
      • 同一层组件，可以使用id区分
    • 同层比较，只有创建和删除
    • 组件级比较
      • 同类组件，按照原策略进行比较
      • 不同类组件，则需要移除
      • 同类组件可能虚拟dom未变化，所有组件可以使用shouldcomponentupdate来决定是否需要对比
    • 同层子组件对比
      • 使用key唯一标识，若存在相同的则只需要做移动操作

  • redux是什么

    • 单一数据源
    • 不可变数据
    • 纯函数修改数据

  • 前端框架选型

    • 成本
      • 组内成员是否已掌握该框架
      • 若没有，上手难以如何
    • 框架生态
      • 良好的生态，说明该框架有良性的发展
      • 发现问题，可能会很容易解决
    • 使用该框架是否对组内成员有成长

  • js基本数据类型

    • boolean string undefined null number object symbol

  • 如何实现keep-alive

    • 使用renderPortal将缓存的组件渲染隐藏的容器中

  • 函数柯里化

    • 定义
      • 将接受多个参数的函数转换成介绍单一参数并返回结果的技术
      • 实际使用体现在高阶函数
    • 优势
      • 参数复用
      • 提前确认
      • 延迟执行

  • 跨域解决方案

    • 浏览器的同源策略，相同协议/域名/端口号才同源
    • 响应报文添加 Access-Control-Allow-Origin
    • jsonp
    • iframe
    • postMessage
    • nginx 反向代理
    • websocket

← N皇后 →