前端面试题（十四）

76. 前端性能优化

  • 前端性能优化有哪些常见方法？

    1. 减少 HTTP 请求：

      • 合并 CSS、JavaScript 和图片文件。
      • 使用雪碧图 (Sprite) 减少图片请求数。

    2. 资源压缩和合并：

      • 压缩 JavaScript 和 CSS 文件，减少文件体积。
      • 使用工具如 UglifyJS、CSSNano 等来删除注释、空格和未使用的代码。

    3. 使用懒加载：

      • 对于图片、视频等资源，只有在用户即将看到它们时才进行加载。
      • 可以使用 IntersectionObserver API 来监听元素是否进入视口并进行懒加载。

    4. 使用浏览器缓存：

      • 利用 HTTP 的 Cache-Control、Expires 和 ETag 头来缓存静态资源，减少重复请求。

    5. 内容传输优化：

      • 使用 Gzip 或 Brotli 压缩传输内容。
      • 使用 CDN 加速内容分发。

    6. 图片优化：

      • 使用合适的图片格式，如 SVG、WebP。
      • 图片压缩和裁剪，避免加载不必要的大尺寸图片。

77. 跨域处理

  • 什么是跨域？

    • 跨域 是指浏览器出于安全限制，阻止浏览器向不同的域名、协议或端口发出请求的情况。这种限制称为 同源策略，它防止不同来源的站点之间进行未经授权的数据共享。

  • 跨域问题的解决方案有哪些？

    1. CORS (跨域资源共享)：

      • 服务器设置 Access-Control-Allow-Origin 头来指定允许跨域访问的来源。
      • 例如：
        Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

    2. JSONP：

      • JSONP 利用 <script> 标签不受同源策略限制的特性，通过动态插入 <script> 标签来实现跨域请求。需要服务器配合输出 JSONP 格式的数据。

      • 缺点：只能使用 GET 请求。

      • 示例：

        function handleResponse(data) {console.log(data);
}
const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);

    3. 反向代理：

      • 在本地服务器上设置一个代理，将请求转发到目标服务器，避免浏览器的跨域限制。常用于开发环境。
      • 例如使用 Nginx 或 Node.js 实现反向代理。

    4. PostMessage：

      • 通过 window.postMessage API，可以在不同窗口或 iframe 之间进行跨域通信。
      • 例如：
        // 在父窗口中发送消息
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');// 在 iframe 中监听消息
window.addEventListener('message', (event) => {if (event.origin === 'https://example.com') {console.log(event.data); // 输出 'Hello from parent'}
});

78. JavaScript 引擎的工作原理

  • JavaScript 引擎是如何工作的？
    JavaScript 引擎（如 V8 引擎）会将 JavaScript 代码解析、编译并执行。以下是引擎的工作流程：

    1. 解析器 (Parser)：

      • 将 JavaScript 源代码解析成 抽象语法树 (AST)。首先进行词法分析，将代码拆分为标记 (tokens)；然后进行语法分析，构建出语法树。

    2. 解释器 (Interpreter)：

      • 解释器根据 AST 执行代码，将其转化为字节码。V8 引擎中的解释器叫 Ignition。

    3. 编译器 (Compiler)：

      • 编译器会将部分高频使用的代码片段优化成机器代码，以提高执行效率。V8 引擎中的即时编译器叫 TurboFan。

    4. 垃圾回收 (Garbage Collection)：

      • JavaScript 引擎通过垃圾回收机制自动管理内存，回收不再使用的对象，避免内存泄漏。V8 引擎使用 分代垃圾回收算法 来进行内存管理。

79. CSS 布局

  • CSS 有哪些常见布局方式？

    1. 块级布局 (Block Layout)：

      • 默认情况下，块级元素会从上到下依次排列，占据容器的整行。

    2. 浮动布局 (Float Layout)：

      • 通过 float 将元素从文档流中移除，通常用于文字环绕图片的布局。但由于 float 带来的一些副作用，现在使用较少。

    3. 弹性布局 (Flexbox)：

      • Flexbox 是一种一维布局系统，适用于沿主轴方向的排列（水平或垂直）。通过设置父容器的 display: flex 来启用弹性布局。
      • 例子：
        .container {display: flex;justify-content: center;align-items: center;
}

    4. 网格布局 (Grid Layout)：

      • Grid 是一种二维布局系统，适合构建复杂的布局。通过 display: grid 来启用网格布局，并可以通过 grid-template-columns 和 grid-template-rows 来定义网格的结构。
      • 例子：
        .container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;
}

    5. 绝对定位 (Absolute Positioning)：

      • 元素通过 position: absolute 从普通文档流中脱离，并相对于最近的已定位祖先进行定位。常用于固定位置的元素，如悬浮按钮或对话框。

    6. 响应式布局：

      • 通过 媒体查询 (media queries) 和 弹性单位（如 rem、%）来构建能够适应不同屏幕尺寸的布局。
      • 例子：
        @media (max-width: 600px) {.container {grid-template-columns: 1fr;}
}

80. 前端安全

  • 常见的前端安全问题有哪些？

    1. XSS (跨站脚本攻击)：

      • XSS 攻击是指攻击者在网页中注入恶意脚本，通常是通过不安全的输入和输出处理。XSS 攻击可以用来窃取用户的 cookie，或者执行恶意操作。
      • 防御措施：
        • 对用户输入进行严格的过滤和转义。
        • 使用 CSP (内容安全策略) 限制脚本执行来源。

    2. CSRF (跨站请求伪造)：

      • CSRF 是一种攻击，攻击者诱导用户在已认证的会话中执行未授权的操作。常见场景如伪造用户的表单提交。
      • 防御措施：
        • 使用 CSRF Token 来验证每次请求的合法性。
        • 使用 SameSite Cookie 标记，防止第三方网站携带用户的 Cookie 发送请求。

    3. 点击劫持 (Clickjacking)：

      • 点击劫持是通过在一个透明的 iframe 中嵌入目标网站的方式，诱导用户在不知情的情况下点击一些隐蔽的按钮。
      • 防御措施：
        • 使用 X-Frame-Options 头部禁止页面嵌入 iframe。
        • 使用 CSP 规则，限制允许页面嵌入的来源。

81. WebSocket 和 HTTP/2

  • 什么是 WebSocket？

    • WebSocket 是一种全双工通信协议，它允许客户端和服务器之间建立一个持久的连接，并进行实时数据传输。与传统的 HTTP 请求-响应模型不同，WebSocket 是双向的，一旦连接建立，服务器可以随时向客户端发送数据。

    • 使用场景：

      • 实时聊天应用、股票行情推送、游戏服务器等需要实时通信的场景。

    • WebSocket 示例：

      const socket = new WebSocket('wss://example.com/socket');// 当连接打开时执行
socket.onopen = function () {console.log('WebSocket connection established');socket.send('Hello Server');
};// 当接收到消息时执行
socket.onmessage = function (event) {console.log('Message from server:', event.data);
};// 当连接关闭时执行
socket.onclose = function () {console.log('WebSocket connection closed');
};// 当发生错误时执行
socket.onerror = function (error) {console.log('WebSocket error:', error);
};

    • WebSocket 的优点：

      1. 双向通信：与传统 HTTP 请求的单向通信不同，WebSocket 允许服务器和客户端之间的实时双向数据传输。
      2. 减少延迟：因为 WebSocket 是持久连接，不需要为每次通信建立新的连接，所以减少了延迟和带宽开销。

    • WebSocket 的缺点：

      1. 兼容性问题：虽然现代浏览器普遍支持 WebSocket，但一些老旧设备可能不支持。
      2. 复杂性：维护 WebSocket 连接（如心跳检测、断线重连等）比传统的 HTTP 更为复杂。

  • HTTP/2 的特点：

    • HTTP/2 是 HTTP 协议的一个重大升级版本，它通过多路复用、头部压缩等机制优化了网络传输效率。

    1. 多路复用 (Multiplexing)：

      • 在同一个 TCP 连接上，HTTP/2 允许同时发送多个请求和响应，解决了 HTTP/1.1 中的队头阻塞问题，大幅提升了传输效率。

    2. 头部压缩 (Header Compression)：

      • HTTP/2 通过 HPACK 算法压缩请求和响应的头部，减少了重复头部字段的传输，降低了带宽消耗。

    3. 服务器推送 (Server Push)：

      • 服务器可以在客户端请求之前主动推送资源（如 CSS、JavaScript 文件）给客户端，进一步提高性能，减少资源加载延迟。

    4. 二进制传输：

      • HTTP/2 使用二进制格式进行数据传输，而不是 HTTP/1.1 的文本格式。二进制格式更高效，便于解析和传输。

    • HTTP/2 的优点：

      1. 性能提升：通过多路复用、头部压缩等技术，显著减少了请求的延迟和带宽占用。
      2. 低延迟：在同一连接上并行传输多个请求和响应，降低了延迟。

    • HTTP/2 的使用场景：

      • 适用于需要加载大量静态资源的网页，比如现代的 Web 应用和单页应用（SPA）。它能够提升页面的首屏加载速度，减少白屏时间。

    • HTTP/2 示例：
      HTTP/2 是默认支持的，只要服务器配置了 HTTP/2 协议，浏览器就会自动使用它。常见的 Web 服务器如 Nginx 和 Apache 都支持 HTTP/2。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/54803.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一、制作UI自适应

一、制作UI自适应

当前分辨率 更改分辨率 一、原因 一款游戏的UI&#xff0c;可能会根据玩家的分辨率和屏幕尺寸&#xff0c;产生不同的变化 例如&#xff1a;某一个Image位移到了摄像机外面 因此需要通过锚点和屏幕自适应来制作完美的效果 二、解决方法 1、锚点 作用是&#xff1a;根据当…
阅读更多...
Unity3D相关知识点总结

Unity3D相关知识点总结

Unity3D使用的是笛卡尔三维坐标系&#xff0c;并且是以左手坐标系进行展示的。 1.全局坐标系&#xff08;global&#xff09; 全局坐标系描述的是游戏对象在整个世界&#xff08;场景&#xff09;中的相对于坐标原点&#xff08;0&#xff0c;0&#xff0c;0&#xff09;的位置…
阅读更多...
前端接收到的日期格式为 2021-12-07T16:44:53.298+00:00 怎么办？

前端接收到的日期格式为 2021-12-07T16:44:53.298+00:00 怎么办？

在写项目的时候&#xff0c;给前端发送了一个 Date 类型的数据,发现格式不对&#xff1a; 可以通过在application 配置文件中进行如下配置&#xff1a; spring:jackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: GMT8 前端在获取就发现格式正确
阅读更多...
嵌入式硬件设计：从原理到实践

嵌入式硬件设计：从原理到实践

嵌入式硬件设计&#xff1a;从原理到实践 嵌入式硬件设计在物联网、智能设备、工业自动化等领域中扮演着至关重要的角色。随着技术的发展&#xff0c;越来越多的设备依赖于嵌入式系统进行实时控制与数据处理。本文将详细介绍嵌入式硬件设计的各个方面&#xff0c;从设计原理到…
阅读更多...
Study-Oracle-11-ORALCE19C-ADG集群搭建

Study-Oracle-11-ORALCE19C-ADG集群搭建

一路走来，所有遇到的人，帮助过我的、伤害过我的都是朋友，没有一个是敌人。 一、ORACLE--ADG VS ORACLE--DG的区别 1、DG是Oracle数据库的一种灾难恢复和数据保护解决方案，它通过在主数据库和一个或多个备用数据库之间实时复制数据，提供了数据的冗余备份和故障切换功能。…
阅读更多...
实现一个时钟

实现一个时钟

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QPainter>//画家类 #include<QTime>//时间类 #include<QTimer>//定时器类QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget …
阅读更多...
项目管理——Gantt图与Pert图

项目管理——Gantt图与Pert图

目录 前言相关知识点相关题目 前言 本文是在关于软考中软件设计师中的项目管理中的知识点&#xff0c;关于Gantt图与Pert图 相关知识点 甘特&#xff08;Gantt&#xff09;图 优点 可以清晰的描述每个任务从何时开始的&#xff0c;到何时结束&#xff0c;任务的进程情况以及…
阅读更多...
互联网协议（IP）中最常用的端口

互联网协议（IP）中最常用的端口

80 端口和 443 端口是互联网协议&#xff08;IP&#xff09;中最常用的两个端口&#xff0c;分别用于 HTTP 和 HTTPS 通信。以下是它们的作用、区别以及相关背景信息&#xff1a; 80 端口和 443 端口的作用 80 端口&#xff1a; 用于 HTTP&#xff08;HyperText Transfer Prot…
阅读更多...
C++和OpenGL实现3D游戏编程【连载14】——VBO、VAO和EBO应用

C++和OpenGL实现3D游戏编程【连载14】——VBO、VAO和EBO应用

&#x1f525;C和OpenGL实现3D游戏编程【目录】 1、本节实现的内容 我们从一开始学OpenGL到现在&#xff0c;OpenGL的图形绘图必须在glBegin()和glEnd()函数之间完成&#xff0c;在此基础之上&#xff0c;才能进行后续操作功能。但是我们今天要讨论一下OpenGL图形绘制的模式&a…
阅读更多...
SSM(5)(动态sql ＜if＞、＜where＞、返回主键值)

SSM(5)(动态sql ＜if＞、＜where＞、返回主键值)

返回主键值&#xff1a; 方法一&#xff1a; useGeneratedKeys 为ture 声明 返回主键 keyProperty 表示要返回的值 封装到对象的属性中 但是这一种方法不支持Orcal数据库。 <insert id"save2" parameterType"com.findyou.entity.User" useGenerated…
阅读更多...
C++面试速通宝典——23

C++面试速通宝典——23

420. 一个类有一个int和一个char有多大&#xff1f; 假设不考虑虚函数或虚继承&#xff0c;该类的大小通常由以下情况确定&#xff1a; int类型通常占用4个字节char类型占用1个字节 由于内存对齐&#xff0c;编译器可能在int和char之间或者char后面添加填充字节&#xff0c;…
阅读更多...
error C2081: “FILE_INFO_BY_HANDLE_CLASS”: 形参表中的名 称非法

error C2081: “FILE_INFO_BY_HANDLE_CLASS”: 形参表中的名 称非法

这破玩意好像是windows sdk的问题, 更新一下版本好像就可以解决. 本质是少了 #define WDK_NTDDI_VERSION NTDDI_WIN10_NI 可以在本地的config.h 或者其他文件先替它定义一下. -------------------------------------------- 如果sdk版本没问题,应该在…
阅读更多...
使用IMX6UL定时器EPTI实现延时

使用IMX6UL定时器EPTI实现延时

上一节&#xff0c;我们讲解了如何使用Imx6uL上面的定时器EPTI&#xff0c;这一节我们将使用EPTI进行实战&#xff0c;也就是使用定时器的效果来使用延时 在之前的实验中我们都使用到了按键&#xff0c;用到按键就要处理因为机械结构带来的按键抖动问题&#xff0c;也就是按键消…
阅读更多...
01 为什么要学习数据结构与算法

01 为什么要学习数据结构与算法

为什么要学习数据结构与算法 一、问题提出 ​ 最早计算机的设计初衷主要用于军事上枪炮的弹道计算和火力表的测试&#xff0c;后来更多的用于科学计算&#xff0c;即数值类的计算&#xff0c;而现在&#xff0c;计算机深入到日常生活的各个方面&#xff0c;其计算的数据早已从…
阅读更多...
毕业设计选题：基于php+vue+uniapp的新闻资讯小程序

毕业设计选题：基于php+vue+uniapp的新闻资讯小程序

开发语言&#xff1a;PHP框架&#xff1a;phpuniapp数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;PhpStorm 系统展示 管理员登录界面 管理员功能界面 新闻类别管理 新闻信息管理 用户管理 管理员管…
阅读更多...
基于SpringBoot+Uniapp的家庭记账本微信小程序系统设计与实现

基于SpringBoot+Uniapp的家庭记账本微信小程序系统设计与实现

项目运行截图 展示效果图 展示效果图 展示效果图 展示效果图 展示效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更…
阅读更多...
设计一个日志管理系统，支持多级别日志记录

设计一个日志管理系统，支持多级别日志记录

设计一个日志管理系统，支持多级别日志记录 作为一名Python程序软件专家，我经常被问到关于日志管理系统的设计和实现。今天，我将分享一篇关于设计一个日志管理系统，支持多级别日志记录的博文，希望能够帮助大家更好地理解和使用Python语言。 日志管理系统的需求 在软件开…
阅读更多...
MicroFlow：一种高效的基于Rust的TinyML推理引擎

MicroFlow：一种高效的基于Rust的TinyML推理引擎

英文论文标题&#xff1a;MICROFLOW: AN EFFICIENT RUST-BASED INFERENCE ENGINE FOR TINYML 中文论文标题&#xff1a;MicroFlow&#xff1a;一种高效的基于Rust的TinyML推理引擎 作者信息&#xff1a; Matteo Carnelos&#xff0c;意大利帕多瓦大学&#xff0c;Grepit AB,…
阅读更多...
潜水打捞系统助力，破解汽车打捞难题

潜水打捞系统助力，破解汽车打捞难题

随着人类活动的不断扩展&#xff0c;汽车落水事故频发&#xff0c;成为救援工作中的一大难题。汽车因其重量和结构特性&#xff0c;一旦沉入水体&#xff0c;打捞工作将面临巨大挑战。传统的打捞方法往往效率低下&#xff0c;且在操作过程中可能会对汽车造成进一步的损害&#…
阅读更多...
Excel中使用SQL语句的四种方法

Excel中使用SQL语句的四种方法

总结在 Excel 中使用 SQL 语句的四种方法&#xff0c;各种方法都有各自的适用场景&#xff0c;可以选择自己熟悉的或喜欢方式。本文以在 Excel 中操作 MS SQL 数据库的数据为例进行说明。MS SQL 的数据如下&#xff0c;使用微软 SQLExpress 版本。 方法 1&#xff1a; Excel 现…
阅读更多...
最新文章

Copyright @ 2022~2023