前端面试题三(初中级)二线城市offer给他拿下

1.ajax 是什么有什么优缺点

ajax 是一种创建交互网页应用的一门技术。
优点：
实现局部更新(无刷新状态下)，
减轻了服务器端的压力
缺点：
破坏了浏览器前进和后退机制(因为 ajax 自动更新机制)
ajax 请求多了，也会出现页面加载慢的情况。
搜索引擎的支持程度比较低。
ajax 的安全性问题不太好(可以用数据加密解决)。

2.同步和异步的区别

同步：
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步：
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

3.如何解决跨域问题

1.jsonp
2.cors
注：CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现
3.postMessage

// a.html
  <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe> //等它加载完触发一个事件
  //内嵌在http://localhost:3000/a.html
    <script>
      function load() {
        let frame = document.getElementById('frame')
        frame.contentWindow.postMessage('我爱你', 'http://localhost:4000') //发送数据
        window.onmessage = function(e) { //接受返回数据
          console.log(e.data) //我不爱你
        }
      }
    </script>
    // b.html
  window.onmessage = function(e) {
    console.log(e.data) //我爱你
    e.source.postMessage('我不爱你', e.origin)
 }

4.websocket
WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我爱你');//向服务器发送数据
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服务器返回的数据
    }
</script>
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('我不爱你')
  });
})

5. Node中间件代理(两次跨域)
   接受客户端请求 。
   将请求 转发给服务器。
   拿到服务器 响应 数据。
   将 响应 转发给客户端

// index.html(http://127.0.0.1:5500)
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $.ajax({
        url: 'http://localhost:3000',
        type: 'post',
        data: { name: 'admin', password: '123456' },
        contentType: 'application/json;charset=utf-8',
        success: function(result) {
          console.log(result) // {"title":"fontend","password":"123456"}
        },
        error: function(msg) {
          console.log(msg)
        }
      })
     </script>
// server1.js 代理服务器(http://localhost:3000)
const http = require('http')
// 第一步：接受客户端请求
const server = http.createServer((request, response) => {
  // 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  // 第二步：将请求转发给服务器
  const proxyRequest = http
    .request(
      {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
      },
      serverResponse => {
        // 第三步：收到服务器的响应
        var body = ''
        serverResponse.on('data', chunk => {
          body += chunk
        })
        serverResponse.on('end', () => {
          console.log('The data is ' + body)
          // 第四步：将响应结果转发给浏览器
          response.end(body)
        })
      }
    )
    .end()
})
server.listen(3000, () => {
  console.log('The proxyServer is running at http://localhost:3000')
})
// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'user', password: '123456' }
const server = http.createServer((request, response) => {
  if (request.url === '/') {
    response.end(JSON.stringify(data))
  }
})
server.listen(4000, () => {
  console.log('The server is running at http://localhost:4000')
})

6.nginx反向代理
7.window.name + iframe
8.location.hash + iframe
9.document.domain + iframe

4.浏览器的兼容性问题有哪些原因是什么如何解决.

使用hack

5.有哪些常用的 hack 技巧

1、属性级Hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。
2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

6.前端开发性能优化,你有什么经验

1. 减少 HTTP 请求
2. 使用 HTTP2
   注：http2解析速度快,首部压缩,优先级更高，流量控制，服务器推送
3. 使用服务端渲染
4. 静态资源使用 CDN
5. 将 CSS 放在文件头部，JavaScript 文件放在底部
6. 使用字体图标 iconfont 代替图片图标
7. 使用缓存，不重复加载相同的资源
8. 压缩文件
9. 图片优化
   注：图片延迟加载，响应式图片，调整图片大小，降低图片质量，CSS3 效果代替图片，使用 webp 格式的图片
10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
    注：这里的ES6转ES5指使用class函数
11. 减少重绘重排
12. 使用事件委托
13. 注意程序的局部性
14. if-else 对比 switch
    注：当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else
15. 查找表
16. 避免页面卡顿
17. 使用 requestAnimationFrame 来实现视觉变化
18. 使用 Web Workers
19. 使用位操作
20. 不要覆盖原生方法
21. 降低 CSS 选择器的复杂性
22. 使用 flexbox 而不是较早的布局模型
23. 使用 transform 和 opacity 属性更改来实现动画

7.css 如何实现一个幻灯片效果

1. 使用最笨的方法显示隐藏或者是移动距离
   2.使用swipt
   3.使用animation

8.promise 和 async/await 有什么区别

Async Await 是基于 promise 实现，是改良版的 promise，使代码看起来更加简洁，异步代码执行像同步代码一样。

9.如何删除事件监听，一个元素绑定了多个事件，你怎么确认删除的是哪个？

element.removeEventListener(type，handler，false/true)

type:事件类型
handler:事件执行触发的函数
false/true:false 为冒泡 ，true 为捕获，参数是 true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
需要注意的是，通过匿名函数是无法消除监听事件，只有通过实名函数才能

10.localStorage，session，cookie的区别是什么？

11.call，apply，bind 有什么区别

调用 call 和 apply 的函数会立即执行
call 和 apply 的返回值就是函数的返回值。
调用 call 和 apply 指向 undefined 或者 null ，会将 this 指向 window
调用 call 和 apply 指向一个值类型， 会将 this 指向由它们的构造函数创建的实例
调用 call 和 apply 指向一个引用类型， 会将 this 指向这个对象
call 接收多个参数，第一个为函数上下文也就是 this ，后边参数为函数本身的参数。
apply 接收两个参数，第一个参数为函数上下文 this，第二个参数为函数参数只不过是通过一个 数组 的形式传入的。
call/apply 改变了函数的 this 上下文后 马上 执行该函数。
bind 则是返回改变了上下文后的函数, 不执行该函数

12.vue2 和 vue3 有什么区别

响应式原理
生命周期钩子名称
自定义指令钩子名称
新的内置组件
diff 算法
Composition API
注：更详细的可以看 vue2与vue3区别超详细

13.http 状态码都有哪些

1 表示消息
100 （客户继续发送请求，这是临时响应） 这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端印当据需发送请求的剩余部分，或者如果请求已经完成，忽略这个响应，服务器必须在请求完成后向客户端发送一个最终响应
101 服务器根据客户端的请求切换协议，主要用于 websocket 或 HTTP2 升级

2 表示成功 200 （成功） 请求已成功，请求所希望的响应头或数据体将随此响应返回 201 （已创建）请求成功并且服务器创建了新的资源
202 （已创建）服务器已经接受请求，但尚未处理 203 （非授权信息）服务器已成功处理请求，但返回的信息可能来自另一来源 204
（无内容）服务器成功处理请求，但没有返回任何内容 205 （重置内容）服务器成功处理请求，但没有返回任何内容 206
（部分内容）服务器成功处理了部分请求

3 表示重定向
300 （多种选择）针对请求，服务器可执行多种操作。
301 （永久移动）请求的网页已永久移动到新位置。
302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应该继续使用原有位置来进行以后的请求
303 （查看其它位置）请求者应当对不同位置使用单独的 GET 请求来检索响应时，服务器返回此代码
305 （使用代理）请求者只能使用代理访问请求的网页。
307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求

4 表示请求错误
400 （错误请求）服务器不理解请求的语法
401 （未授权）请求要求身份验证。
403 （禁止）服务器拒绝请求
404 （未找到）服务器找不到请求的网页
405 （方法禁用）禁用请求中指定的方法
406 （不接受）无法使用请求的内容特性响应请求的网页
407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理
408 （请求超时）服务器等候请求时发生超时

5 表示服务器错误
500 （服务器内部错误）服务器遇到错误，无法完成请求
501 （尚未实施）服务器服务器不具备完成请求的功能
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应
503 （服务不可用）服务器目前无法使用，（由于超载或停机维护）
504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求
505 （ HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本

14.数组深拷贝

  // 定义一个浅拷贝函数
  function shallowCopy(obj) {
    const cloneObj = {}
    for (let i in obj) {
      if (obj.hasOwnProperty(i)) {
        cloneObj[i] = obj[i]
      }
    }
    return cloneObj
  }

  // 声明person
  let person = {
    name: "张三",
    hobbies: ["吃饭", "睡觉", "打豆豆"]
  }

  // 对person进行浅拷贝得到person1
  let person1 = shallowCopy(person)

  //修改值类型
  person1.name = '李四'

  //修改引用类型
  person1.hobbies[0] = '美女'

  console.log(person);
  console.log(person1);



// 定义一个深拷贝函数
  function deepClone(obj) {
    const cloneObj = new obj.constructor()
    if (obj === null) return obj
    if (obj instanceof Date) return new Date(obj)
    if (obj instanceof RegExp) return new RegExp(obj)
    if (typeof obj !== 'object') return obj
    for (let i in obj) {
      if (obj.hasOwnProperty(i)) {
        cloneObj[i] = deepClone(obj[i])
      }
    }
    return cloneObj
  }

  // 声明person
  let person = {
    name: "张三",
    hobbies: ["吃饭", "睡觉", "打豆豆"]
  }

  // 对person进行浅拷贝得到person1
  let person1 = deepClone(person)

  //修改值类型
  person1.name = '李四'

  //修改引用类型
  person1.hobbies[0] = '美女'

  console.log(person);
  console.log(person1);

15.es6 有哪些新特性

1. let const
2. 模块字符串``
3. 解构
4. 函数的参数默认值
5. Spread / Rest 操作符
6. 箭头函数
7. for of
8. class类
9. 导入导出
10. promise
11. async/await
12. Set集合

16.watch 和 computed 区别和使用场景

Computed：
它支持缓存，只有依赖的数据发生了变化，才会重新计算
不支持异步，当 Computed 中有异步操作时，无法监听数据的变化
如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用 computed
如果 computed 属性的属性值是函数，那么默认使用 get 方法，函数的返回值就是属性的属性值；在 computed 中，属性有一个 get 方法和一个 set 方法，当数据发生变化时，会调用 set 方法

Watch：
它不支持缓存，当一个属性发生变化时，它就会触发相应的操作
支持异步监听
监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
监听数据必须是 data 中声明的或者父组件传递过来的 props 中的数据，当发生变化时，会触发其他操作
函数有两个的参数：
immediate：组件加载立即触发回调函数
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化

17.ts 和 js 的优缺点

ts 是 js 的超集，即你可以在 ts 中使用原生 js 语法。
ts 需要静态编译，它提供了强类型与更多面向对象的内容。
ts 最终仍要编译为弱类型，基于对象的原生的 js，再运行

18.元素水平垂直居中的方法