前端面试题详解整理57|大前端的理解，攻击类型，二叉树最远节点的距离 跨端通信，vue组件通讯cookie和ssesion的区别，

金色的雨570
50 阅读12分钟

百度前端二面

1.大前端的理解

"大前端"是一个相对新的概念，通常用来描述在Web开发中，前端工程师需要掌握更多的技能和领域，以应对日益复杂的需求和发展趋势。它扩展了传统前端开发的范畴，涵盖了更广泛的技术和领域，包括Web开发、移动开发、桌面开发、前端工程化、人机交互、数据可视化等方面。

以下是对大前端的一些理解和特点：

  1. 技术范围广泛：大前端不仅限于传统的Web前端开发，还涉及到移动端开发（如React Native、Flutter等）、桌面端开发（如Electron）、小程序开发、AR/VR开发等多个领域。

  2. 技术深度增加：大前端要求前端工程师对于所涉及的各个领域都有一定的了解和掌握，需要具备更多的技术深度，包括网络原理、浏览器渲染机制、移动端开发技术等。

  3. 前后端一体化：大前端强调前后端的融合和协作，前端工程师需要熟悉后端开发的基础知识，能够理解后端接口的设计和开发，以及数据库的操作等。

  4. 工程化和规范化：大前端倡导前端工程化和规范化，包括代码规范、模块化开发、自动化构建、持续集成等方面的实践，提高开发效率和项目质量。

  5. 用户体验和交互设计：大前端注重用户体验和交互设计，前端工程师需要了解用户行为和心理，能够设计出更加友好和便捷的界面和交互效果。

  6. 跨平台和跨终端：大前端强调在不同平台和终端上保持一致的用户体验，需要使用适配性强的技术和框架，如响应式设计、多端统一开发等。

综上所述，大前端是对传统前端开发的扩展和延伸，要求前端工程师具备更广泛的技术视野和更深入的技术功底，能够应对多样化和复杂化的需求。

2.前端的受到的攻击类型，如何防范？

前端在Web应用中可能受到多种攻击类型的影响，以下是一些常见的攻击类型以及相应的防范措施：

  1. 跨站脚本（XSS）攻击：

    • 攻击者在网页中注入恶意脚本，当用户访问该页面时，脚本会在用户浏览器中执行，从而窃取用户信息或篡改页面内容。
    • 防范措施：对用户输入进行严格的过滤和转义，避免直接将用户输入内容插入到HTML中；使用Content Security Policy（CSP）限制页面的资源加载和脚本执行；在设置Cookie时使用HttpOnly标志，禁止通过JavaScript访问敏感Cookie。

  2. 跨站请求伪造（CSRF）攻击：

    • 攻击者利用用户在已登录的情况下发起恶意请求，以用户身份执行未经用户授权的操作，如转账、修改密码等。
    • 防范措施：在关键操作中使用CSRF令牌进行验证，确保请求是由用户自身发起的；使用SameSite属性来限制Cookie的发送，防止跨域请求携带Cookie。

  3. 点击劫持攻击：

    • 攻击者将目标网站嵌入到一个透明的iframe中，并覆盖在一个看似无害的页面上，当用户点击页面上的内容时，实际上是触发了嵌入的目标网站上的操作。
    • 防范措施：使用X-Frame-Options头部来限制页面是否可以被嵌入到iframe中，或使用Content Security Policy中的frame-ancestors指令来限制页面可以被嵌入的域。

  4. 数据泄露：

    • 不恰当的数据处理或不当的API设计可能导致敏感信息泄露，如密码明文存储、接口未经授权访问等。
    • 防范措施：使用HTTPS加密传输敏感数据；对敏感信息进行加密存储；严格控制API的访问权限，使用身份验证和授权机制限制访问。

  5. 拒绝服务（DoS/DDoS）攻击：

    • 攻击者通过发送大量的请求或占用大量系统资源，导致目标服务器无法正常响应合法用户的请求，从而造成服务不可用。
    • 防范措施：使用Web应用防火墙（WAF）来检测和过滤恶意流量；配置服务器资源限制和负载均衡；使用CDN分发网络来分担流量压力。

以上是一些前端常见的受到的攻击类型及相应的防范措施。在实际开发中，应该综合考虑不同类型的攻击，并根据具体情况采取相应的安全措施，保护Web应用的安全性。

3.实现浏览器跨端通信？

实现浏览器跨端通信可以通过以下几种常见的方式：

  1. PostMessage API：

    • PostMessage API允许在不同的窗口（包括不同域名下的窗口）之间发送消息。
    • 使用window.postMessage()方法发送消息，并通过message事件接收消息。
    • 在接收消息的窗口中，可以通过监听message事件来处理收到的消息。

  2. Broadcast Channel API：

    • Broadcast Channel API允许在同一浏览器的不同标签页或窗口之间进行通信。
    • 使用BroadcastChannel对象创建广播频道，通过postMessage()方法发送消息，并通过message事件接收消息。
    • 在接收消息的窗口中，可以通过监听message事件来处理收到的消息。

  3. WebSocket：

    • WebSocket是一种全双工通信协议，可以在浏览器和服务器之间建立持久连接，并进行双向通信。
    • 可以在不同浏览器之间建立WebSocket连接，实现跨浏览器通信。
    • 在WebSocket连接上，可以发送和接收文本或二进制数据。

  4. Server-Sent Events (SSE)：

    • Server-Sent Events允许服务器向浏览器推送事件流。
    • 通过EventSource对象在客户端监听服务器发送的事件，并进行处理。
    • SSE适用于单向通信，只能从服务器向浏览器发送消息。

  5. WebRTC：

    • WebRTC是一种支持实时音视频通信的技术，也可以用于实现浏览器之间的通信。
    • 可以使用WebRTC建立点对点的数据通道，实现浏览器之间的直接通信。
    • WebRTC提供了丰富的API，可以实现音视频通话、文件传输等功能。

以上是常见的实现浏览器跨端通信的方式，开发者可以根据具体需求选择合适的方式进行跨端通信的实现。

4.vue组件通讯的方式？

在Vue.js中，组件之间可以通过多种方式进行通讯，常见的方式包括：

  1. Props/Events（父子组件通信）：

    • 父组件通过props向子组件传递数据。
    • 子组件通过emit事件向父组件发送消息。
    • 这种方式适用于父子组件之间的简单通信。

  2. emit/emit/on（非父子组件通信）：

    • 使用Vue实例的$emit方法触发一个自定义事件。
    • 使用Vue实例的$on方法监听自定义事件并执行相应操作。
    • 这种方式适用于非父子组件之间的通信，如兄弟组件或任意组件之间的通信。

  3. $refs（子组件引用）：

    • 父组件通过ref属性给子组件赋予一个引用。
    • 父组件可以通过$refs属性访问子组件的实例，从而直接调用子组件的方法或访问子组件的数据。
    • 这种方式适用于需要直接操作子组件的情况。

  4. Vuex（状态管理）：

    • Vuex是Vue.js官方提供的状态管理库，用于在组件之间共享数据和进行状态管理。
    • Vuex提供了一个全局的store对象，包含了应用中的所有状态。
    • 组件可以通过Vuex的辅助函数（如mapState、mapGetters、mapActions等）来访问store中的状态和提交mutation。

  5. provide/inject（祖先组件向后代组件传递数据）：

    • 祖先组件通过provide选项提供数据。
    • 后代组件通过inject选项注入数据。
    • 这种方式适用于祖先组件向后代组件传递数据，而无需在中间的组件中逐级传递的情况。

  6. 事件总线（Event Bus）：

    • 创建一个全局的Vue实例作为事件总线，用于发布和订阅事件。
    • 组件之间通过事件总线进行事件的发布和订阅。
    • 这种方式适用于组件之间非常松散耦合的情况。

以上是Vue.js中常用的组件通讯方式，开发者可以根据具体场景选择合适的方式进行组件之间的通信。

5.cookie和token的区别？

Cookie和Token都是用于在Web应用中管理用户状态和认证的机制，但它们之间有一些区别：

  1. 存储位置：

    • Cookie：存储在客户端（浏览器）中，以文本文件的形式保存在用户的计算机上。
    • Token：通常是存储在客户端的内存中，也可以存储在本地存储、会话存储、或者浏览器的IndexedDB中。

  2. 安全性：

    • Cookie：相对不安全，因为存储在客户端，可能被用户篡改或窃取，存在跨站脚本（XSS）和跨站请求伪造（CSRF）等安全风险。
    • Token：相对安全，因为它可以使用加密算法进行签名或加密，有效减少了篡改和窃取的风险。

  3. 使用方式：

    • Cookie：通过设置HTTP响应头中的Set-Cookie字段来在客户端设置Cookie，在后续的HTTP请求中会自动包含在请求头中发送给服务器。
    • Token：通常是作为HTTP请求的Authorization头部字段的一部分发送给服务器，在服务端进行验证。

  4. 大小限制：

    • Cookie：单个Cookie的大小通常有限制（一般在4KB左右），每个域名下的Cookie总大小也有限制（一般在20个左右）。
    • Token：一般没有明确的大小限制，可以根据实际需求灵活设置大小。

  5. 生命周期：

    • Cookie：可以设置过期时间，可以是会话性Cookie（关闭浏览器时删除）或持久性Cookie（指定过期时间）。
    • Token：通常是有限期的，可以设置有效期限制，超过有效期后需要重新获取或刷新。

  6. 使用场景：

    • Cookie：适用于存储简单的会话信息或跟踪用户行为，如登录状态、用户偏好设置等。
    • Token：通常用于实现用户认证和授权，如JWT（JSON Web Token）用于无状态认证、OAuth2.0的Bearer Token用于授权等。

综上所述，Cookie和Token在存储位置、安全性、使用方式、大小限制、生命周期和使用场景等方面有所不同，开发者可以根据具体需求选择合适的机制来管理用户状态和认证。

6.cookie和ssesion的区别？

Cookie和Session都是用于在Web应用中管理用户状态的机制，但它们之间有一些区别：

  1. 存储位置：

    • Cookie：存储在客户端（浏览器）中，以文本文件的形式保存在用户的计算机上。
    • Session：存储在服务器端，通常是在服务器的内存中，也可以持久化到数据库或文件系统中。

  2. 存储内容：

    • Cookie：存储在客户端的小段文本信息，通常用于标识用户、记录用户偏好设置等。
    • Session：存储在服务器端的用户状态信息，通常包含用户的登录状态、购物车内容等敏感信息。

  3. 安全性：

    • Cookie：相对不安全，因为存储在客户端，可能被用户篡改或窃取。
    • Session：相对安全，因为存储在服务器端，客户端无法直接访问和修改。

  4. 大小限制：

    • Cookie：单个Cookie的大小通常有限制（一般在4KB左右），每个域名下的Cookie总大小也有限制（一般在20个左右）。
    • Session：一般没有明确的大小限制，但存储在服务器内存中，受到服务器内存大小的限制。

  5. 生命周期：

    • Cookie：可以设置过期时间，可以是会话性Cookie（关闭浏览器时删除）或持久性Cookie（指定过期时间）。
    • Session：通常与用户的会话（浏览器打开到关闭期间）关联，当用户关闭浏览器或超过一定时间没有活动时，会话数据会被清除。

  6. 跨域访问：

    • Cookie：可以通过设置Cookie的域属性来实现跨域访问，但受到同源策略的限制。
    • Session：不直接支持跨域访问，但可以通过其他手段（如跨域认证）实现跨域访问。

综上所述，Cookie和Session在存储位置、内容、安全性、大小限制、生命周期和跨域访问等方面有所不同，开发者可以根据具体需求选择合适的机制来管理用户状态。

算法：二叉树最远节点的距离

以下是用JavaScript编写计算二叉树最远节点距离的代码：

class TreeNode {
    constructor(val = 0, left = null, right = null) {
        this.val = val;
        this.left = left;
        this.right = right;
    }
}

function diameterOfBinaryTree(root) {
    let maxDiameter = 0;
    
    function maxDepth(node) {
        if (!node) return 0;
        
        const leftDepth = maxDepth(node.left);
        const rightDepth = maxDepth(node.right);
        
        maxDiameter = Math.max(maxDiameter, leftDepth + rightDepth);
        
        return Math.max(leftDepth, rightDepth) + 1;
    }
    
    maxDepth(root);
    
    return maxDiameter;
}

// 测试代码
// 创建一个二叉树
const root = new TreeNode(1);
root.left = new TreeNode(2);
root.right = new TreeNode(3);
root.left.left = new TreeNode(4);
root.left.right = new TreeNode(5);

// 计算二叉树的最远节点的距离
console.log("二叉树最远节点的距离为:", diameterOfBinaryTree(root));

这段JavaScript代码定义了一个TreeNode类来表示二叉树节点，以及一个diameterOfBinaryTree函数来计算二叉树的最远节点距离。在函数内部使用了递归的方式进行深度优先搜索，同时计算了每个节点左右子树的最大深度，并更新最大直径。

大概只能想起这么多了QAQ。。。秋招好难。。。。

作者：袖珍KeKe
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

缩放

如何实现<12px的字

display:inline-block; /*scale只能缩放行内块或块元素*/

-webkit-transform: scale(0.5); /*定义2D缩放*/

-webkit-transform-origin:left top; /*定义缩放源点为左上角*/
avatar
文章
阅读
粉丝