• a标签点击后hover事件失效
    • a:link 未访问的样式
    • a:visited 访问后的样式
    • a:visited{} 后面再写a:hover 这样就能覆盖前面的样式
  • input事件
    • dom.onclick = ()=>{}
    • dom.onfocus = ()=>{}
    • dom.onmousedown = ()=>{}
    • dom.onmouseenter = ()=>{}
  • 响应式的好处：修改数据自动刷新视图，让开发者不用再去操作dom，有更多的时机思考业务逻辑
  • vue优缺点
    • 优点
      • 响应式 通过MVVM思想实现数据的双向绑定
      • 组件化
      • 虚拟DOM
    • 缺点
      • 不利于seo
      • 导航不可用
      • 初次加载耗时多
  • hash和history模式的区别

    • 和？

    • hash依靠onhashchange location.hash location.hash.slice(1)
    • history依靠h5 history新增方法pushState replaceState
  • null 和 undefined区别
    • null 无 undefined 未定义
    • null转换数字为0 undefined为NaN
    • null
      • 函数的参数，代表不是对象
      • 对象原型链的终点
    • undefined
      • 声明后没赋值的变量
      • 调用函数时提供的参数没提供
      • 对象没有赋值属性
      • 没有返回值 默认返回undefined

  • 冒泡排序

    1. for(let i=0;i<arr.length;i++){
    2. for(let j=0; j<arr.length-1-i;j++){
    3.   if(arr[j]>arr[j+1]){
    4.     arr[j] = arr[j+1] + arr[j];
    5.     arr[j+1] = arr[j] - arr[j+1];
    6.     arr[j] = arr[j] - arr[j+1];
    7.   }
    8. }
    9. }

  • promise

    • promise的状态一经改变不能再改变
    • .then .catch .finally 都会返回一个新的promise 传值必须是函数，不然会发生值透传
    • finally的回调参数不接受任何参数，没法知道promise是resolved还是rejected
    • .all 接受一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调
      • promise.all().then() 结果中的数组顺序和 all()中的顺序一样
      • 一个方法异常不会影响其他异步任务的执行
    • .race也是接受一组异步任务，只保留第一个执行完成的异步操作结果，其他的方法仍在执行，不过执行结果会被抛弃
    • promise的then和catch、finally方法会返回一个新的promise 所以可以允许链式调用
  • event loop事件循环：浏览器或node解决js单线程运行时不阻塞的一种机制，也就是异步的原理
    • js是单线程语言，大量任务时或耗时太长，网页会假死，因为js停不下来，无法响应用户行为。
    • 程序中设置两个线程，一个负责程序本身的运行，一个负责主线程与其他进程的通信，也就是ajax请求
  • window > document > html > body
  • addEventListener
    • event字符串
      • onclick
      • oncontextmenu 右击
      • ondblclick
      • onmousedown
      • …
    • function
    • useCapture 是否在捕捉或者冒泡阶段执行 默认false 冒泡时执行
  • Event
    • var e = document.createEvent(参数); 参数枚举：
      e.initEvent(事件名，是否冒泡，是否阻止浏览器默认行为)
      绑定dom：document.addEventListener(事件名，回调，false)
      触发监听：document.dispatchEvent(e);
  • 冒泡：button > li > ul >document >window 类似这样，，
  • 捕获：window > document > ul > li > button 类似这样，
  • 并不是所有的事件都有冒泡，以下就没
    • onblur onfocus onmouseenter onmouseleave
  • type 和 instanceof 的区别
    • typeof代表对某个变量类型的检测，基本数据类型除了null都能正常的显示为对应的类型 引用类型除了函数会显示为funciton 其他都显示为object
    • instanceof它主要用于检测某个构造函数的原型对象在不在某个对象的原型链上
  • this
    • 对于函数而言指向最后调用函数的那个对象，是函数运行时内部自动生成的一个内部对象，只能在函数内部使用。对于全局来说，this指向window
    • this的形成：函数调用时，指向最后调用的那个对象
  • call apply bind的作用就在于直接调用某个函数的方法并修改赋值
    • .call(this,…) 直接调用 可以接受多个参数，第一个参数是this
    • .apply(this,[…]) 直接调用 只能接收两个参数 第一个是this 第二个是数组
    • .bind(obj)() bind返回一个函数，可以延迟调用，加()就是直接调用
  • plugin是一个扩展器，丰富了webpack本身。loader仅是为了打包
  • HTTP的责任是定义数据
  • TCP是规定数据怎样传输才稳定高效传递与计算机之间
  • UDP是一个面向无连接的传输层协议
  • 字节流服务：将大块数据分隔为以报文段为单位的数据表进行管理
  • JSONP

缺点：只能GET请求 ————— 优点： 兼容性好，在一些古老的浏览器中都可以运行

  • 跨域的产生来自同源策略 协议名，域名，端口名 都一样才能访问一样的cookie localstorage 以及访问页面的ajax请求或者DOM 如果不同源，就是跨域
  • 跨域只存在浏览器端，因为浏览器很开放，需要对它有所限制 ；DOM同源策略可以防止恶意网站利用iframe嵌入盗取信息的网站
  • 跨域资源共享，允许浏览器向跨源服务器发出请求的前提 1浏览器要支持此功能 2服务端要同意这种跨域请求，通常是这些配置：access-contrl-allow-origin 等
  • Vue响应原理
    • 监测数据变化，更新需要的视图部分 | 数据劫持 依赖收集 发布订阅模式
    • 检测方法：Object.defineProperty和ES6的Proxy 对数据进行劫持或代理
  • CommonJs模块是在运行时加载，ES6 Modules是编译时输出接口
  • 实现一组异步请求按顺序执行
    • reduce 传一个resolve过去
      • 数组.reduce(total,item)=>new Promise((resolve)=>…,Promist.resolve())
    • foreach
    • for..await..of
  • webpack 几种 hash 的实现原理
    • 如果是和整个项目有关的，有文件修改，整个项目构建的hash值都会修改，并且全部文件都共用hash值
    • 如果是chunkhash，会根据不同的入口分型依赖文件解析，构建对应的chunk模块，生成对应的hash值。只有被修改的chunk模块在重新构成后才会生成新的hash值，不会影响其他的chunk
    • 如果是contentHash，和每个生成的文件有关，只有当内容改变才会给该文件生成新的hash，并不会影响其他文件
  • webpack处理图片
    • file-loader 相当于import/require
    • url-loader 当图片小于limit参数时，将图片进行base64编码，否则依然使用file-loader
  • 回流和重绘
    • 回流：对DOM结构修改，如width,height,padding,marign,left,top,border等 还有节点增删移动 重新经过样式计算，建立图层树，生成回执列表，开销很大
    • 重绘：DOM的修改导致了样式的变化，且没有影响几何属性，会导致重绘，由于没有导致DOM几何属性变化，元素的位置不需要更新，会跳过生存布局树和建立图层树，直接生成绘制列表
    • 避免回流和重绘:
      • 避免频繁使用style，采用修改class
      • 将动画效果应用到absolute或者fixed的元素上
      • 对于resize，scroll进行防抖，节回流处理（通过监听scroll，设置定时器）
      • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
      • 利用css3的transform,opacity,filter这些属性可以实现合成的效果，也就是GPU加速
  • display:flex;justify-content:cneter;align-items:center;
  • flex IE6-9不支持

  • 移动端初始化根元素字体大小：

    • 设置一个函数，在页面初始化和窗口缩放的时候调用，获取页面宽度来设置字体大小，并限定最大和最小范围。html.style.fontSize = 根元素字体大小
    • 如果没有设置，默认是16px

  • 原型 prototype proto

    • 原型链
    • 原型继承
  • meta 替换 https
  • http请求可以被nginx也可以被网关拦截
  • keep-alive 是 HTTP的一个头部字段Connection中的一个值，保证http请求能建立一个持久性的链接。也就是建立TCP链接可多次请求和响应数据的交互。
  • webpack没有使用http的响应头，所以也没有跨域的限制
  • 前端安全
    • XXS 网页恶意代码
      • 储存型 服务端攻击 最常见的是评论区插入
        • 对输入内容中的script 和 iframe 等标签进行转义或过滤
      • 反射型 脚本混合在URL中
        • 设置httpOnly
      • DOM型 不经过服务器 混合在URL中
        • 开启CSP 白名单
    • CSRF 跨站请求伪造
      • 验证 TOKEN
      • 验证 Referer 请求头伪造
      • 验证 SameSite 让cookie不跨站请求发出
    • 点击挟持 点击看似无害的按钮 监听鼠标移动事件 使用HTML5拖拽技术执行敏感操作
      • x-frame-options 防止iframe嵌套的劫持攻击
      • js判断顶层视口的域名是不是和本页面的域名一致 top.location.hostname self.location.hostname
      • 敏感操作使用更复杂的步骤（验证码，输入项目名称以删除）
    • requestAnimationFrame 浏览器用于定时循环的一个接口，类似setTimeout 按帧对网页进行重绘 对js动画 使用requestAnimationFrame 更适合
  • ES6
    • import export
    • class
    • 函数默认参数
    • 箭头函数 ()=>
    • … 扩展运输符允许展开数组
    • 解构 const { key } =obj
    • 字符串模板
    • promise
    • let const
    • Map Set
    • 对象属性同名 let obj ={ name,age }
  • ES7
    • includes
    • ** 求幂运算符
  • ES8
    • async/await
    • Object.values()
    • Object.keys()
    • padStart(长度，补全符)
    • padEnd(长度，补全符)

  • ES9
    • for…await…of
    • promise.finally()
    • …收集剩余参数
  • ES10
    • flat()
    • flatMap()
    • fromEntries()
    • trimStart
    • trimEnd
    • matchAll
    • BigInt
    • tyr / catch
    • Function.toString()