百度前端面经学习

今天一定不拖延
261 阅读8分钟
  • websocket 心跳机制实现的过程
  • 为什么一定要心跳机制？判断有无断线，在发消息时候看反馈不是也可以吗？
  • CSS 场景题：有一个容器，其中首行中有a、a、一段文本、c、c五个节点，a和c是固定宽高的div。要求实现这一行中，随着文本宽度增加，当五个节点宽度和=容器的宽度时，文本节点宽度不变，溢出部分省略号。
  • forEach和Map，各自功能和区别，return的话会退出来吗？
  • 如果我要在数组中找一个元素，找到后返回并停止查找，你有哪些方法？都说一说
  • vue3生命周期有哪些？
  • 说一说computed、watch，用法、区别。两个都一定要return吗？如果我想进行异步操作，两个都可以吗？
  • 你项目中写的首屏加载在处理之前最慢有1分钟，这是为什么呢？说说原因。
  • 初次打包8MB，按照现在的网速，也不至于那么慢呀，为什么呢？
  • 了解过跨域吗？原因和应对策略说一下。
  • 浏览器发生跨域是出现在一次完整请求过程的哪个阶段？

websocket 心跳机制实现的过程

  1. 客户端发送心跳消息： 在客户端，通过定时器设置一个间隔时间，定时向服务器发送一个心跳消息。
const socket = new WebSocket('ws://example.com');

// 发送心跳消息
function sendHeartbeat() {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send('heartbeat');
  }
}

// 每隔一段时间发送心跳消息
const heartbeatInterval = setInterval(sendHeartbeat, 5000); // 5秒发送一次心跳
  1. 服务器接收心跳消息： 在服务器端，监听客户端发送的消息，当收到心跳消息时，回复一个确认消息。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  // 监听客户端发送的消息
  ws.on('message', (message) => {
    if (message === 'heartbeat') {
      // 收到心跳消息，回复确认消息
      ws.send('heartbeat-reply');
    } else {
      // 处理其他业务消息
    }
  });
});
  1. 客户端处理心跳回复： 在客户端，监听服务器发送的消息，当收到心跳确认消息时，表示连接是活跃的。
// 监听服务器发送的消息
socket.addEventListener('message', (event) => {
  const message = event.data;

  if (message === 'heartbeat-reply') {
    // 收到心跳确认消息，连接是活跃的
    console.log('Received heartbeat reply from server');
  } else {
    // 处理其他业务消息
  }
});

为什么一定要心跳机制？判断有无断线，在发消息时候看反馈不是也可以吗？

CSS 场景题：有一个容器，其中首行中有a、a、一段文本、c、c五个节点，a和c是固定宽高的div。要求实现这一行中，随着文本宽度增加，当五个节点宽度和=容器的宽度时，文本节点宽度不变，溢出部分省略号。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Example</title>
  <style>
    .container {
      display: flex;
      width: 100px; /* 设置容器的宽度 */
    }
    .fixed {
      width: 50px; /* 固定宽度的节点 */
      height: 50px; /* 固定高度的节点 */
      background-color: lightblue;
      margin-right: 10px; /* 为节点之间增加一些间距 */
    }

    .text {
     flex-grow: 1; /* 允许文本节点自动拉伸 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed">a</div>
    <div class="fixed">a</div>
    <div class="text">一段文本fdfhskdfhkjsdhfkjdshfjlkdshfdskjfhdskjfhdjskfhdsjkhfjksdahfkdshfduywerewuhun</div>
    <div class="fixed">c</div>
    <div class="fixed">c</div>
  </div>
</body>
</html>

forEach和map，各自功能和区别，return的话会退出来吗？

forEach用于数组：对数组元素遍历的一种方法，不会创建新的数组。return不会退出，会一直执行到数组中每个元素都被遍历

map用于集合类型:对元素遍历，会创建新的数组。return会影响当前元素的处理，但是他还是会继续执行数组的遍历。

如果我要在数组中找一个元素，找到后返回并停止查找，你有哪些方法？都说一说

  • for循环
  • some
let fin
arr.some(e=>{
  console.log(e)
  if(e===3){
    fin=e
    return true;
  } 
})
console.log(fin)
  • find
let arr=[1,2,3,4,5]
let fin=arr.find(e=>e===3)
console.log(fin)

vue3生命周期有哪些？

image.png

说一说computed、watch，用法、区别。两个都一定要return吗？如果我想进行异步操作，两个都可以吗？

computed：用来声明计算属性，当数据发生变化的时候他会重新计算，计算属性是基于响应式数据的。必须要return，不支持异步，如果存在异步操作时无效，无法监听数据的变化。

watch：用于监听指定数据变化，数据变化时执行回调函数，wacth可以监听任何数据的变化。不用返回值，支持异步操作，

了解过跨域吗？原因和应对策略说一下。

原因：是由浏览器的同源策略引起的，当协议、域名、端口不同就会发生跨域，实际上也是一种安全机制，可以有效防止用户不小心点击了有害网站，被网站拿到用户凭证来对原网站进行攻击，也就是CSRF攻击。

解决：

  • 代理
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标服务器的地址
        changeOrigin: true, // 改变源，以便正确处理跨域
        pathRewrite: {
          '^/api': '' // 重写路径，去掉 '/api' 前缀
        }
      }
    }
  }
};
  • jsonp：利用script标签不受跨域限制
  <script>

    window.init=function(data){
      console.log(data)
    }
  </script>
  <script src="http://127.0.0.1:5500/062-jsonp.js"></script>
  • CORS：通过预检请求的方式，先向服务器发送一个预检请求，请求头包括（origin、access-control-request-method），服务器确定是否允许这类型请求，然后通过在服务器端设置相应的 HTTP 头部， Access-Control-Allow-Origin 等，允许跨域请求。
  • websocket：不受跨域限制

浏览器发生跨域是出现在一次完整请求过程的哪个阶段？

出现在发送请求的阶段，但是跨域会导致接收响应的时候响应被拦截。

一次完整的请求

  1. DNS 解析： 浏览器首先需要将用户输入的域名解析为对应的 IP 地址。如果浏览器的缓存中没有该域名对应的 IP 地址，就会进行 DNS 解析
  2. 建立 TCP 连接： 使用域名和端口号，浏览器和服务器之间建立 TCP 连接。TCP 是一种可靠的、面向连接的协议，确保数据的可靠传输。
  3. 发起 HTTP 请求： 浏览器通过已建立的 TCP 连接向服务器发送 HTTP 请求。请求中包括请求行、请求头和请求体等信息。
  4. 服务器处理请求： 服务器接收到请求后，根据请求的内容进行处理。这可能涉及到动态生成页面、数据库查询等操作。
  5. 服务器返回 HTTP 响应： 服务器根据请求的处理结果，生成 HTTP 响应。响应包括响应行、响应头和响应体等信息。
  6. 浏览器接收响应： 浏览器接收到服务器的响应后，首先检查状态码。状态码表示请求的成功、失败或其他情况。
  7. 解析 HTML（或其他类型）： 如果响应的内容是 HTML，浏览器开始解析 HTML 文档，构建 DOM 树。同时，会解析和执行页面中的 CSS 和 JavaScript。
  8. 渲染页面： 浏览器根据 DOM 树和 CSS 样式表进行页面的渲染，将页面呈现给用户。这包括计算布局、绘制页面和处理用户交互。
  9. 关闭 TCP 连接： 页面加载完成后，浏览器和服务器之间的 TCP 连接会被关闭。这发生在浏览器解析完 HTML 文档，并处理其中的资源（如图片、样式表、脚本）之后。

补充：

浏览器的完整渲染过程

  • 1. 解析 HTML: 浏览器从服务器获取 HTML 文档。 HTML 文档会被解析为一个 DOM（文档对象模型）树，代表页面的结构。
  • 2. 解析 CSS: 浏览器获取 CSS 文件（内联或外部）。CSS 被解析为一个 CSSOM（CSS 对象模型）树，表示页面的样式信息。
  • 3. 构建渲染树: 渲染树是 DOM 树和 CSSOM 树的结合，包含了要显示的元素及其样式。不会包括不可见元素（如 <head> 中的元素或 display: none 的元素）。
  • 4. 布局（回流）: 根据渲染树计算每个节点的确切位置和大小。这一步称为布局或回流。这涉及到计算视口的大小和每个元素的尺寸。
  • 5. 绘制（绘图）: 将渲染树的内容转换为屏幕上的像素。这包括绘制文本、颜色、图像等。绘制的结果通常是一个绘图指令序列，浏览器会将这些指令转化为屏幕上的图像。
  • 6. 合成:在一些情况下，浏览器会使用图层来优化绘制过程。比如一个鼠标hover在元素上有动画效果，浏览器初步绘制，会将这个元素绘制在同一层上，当动画触发，会将这个元素提升到新的合成层，来单独处理这个元素，不用重新计算整个文档流.使用合成层的优势在于：性能提升：合成层利用 GPU 渲染，可以显著提高动画的帧率。降低重排：只需要重绘合成层中的内容，而不需要重新计算整个页面的布局。这通常发生在使用 CSS 变换、动画和某些效果时。 -7. 重绘与重排
avatar
文章
阅读
粉丝