HTML-八股

1、DOM和BOM

  • DOM是表示HTML或者XML文档的标准的对象模型，将文档中每个组件（元素、属性等）都作为一个对象，使用JS来操作这个对象，从而动态改变页面内容，结合等。

    DOM是以树型结构组织文档内容，树的根节点的document，代表整个文档，document对象有许多属性和方法

  • BOM是表示浏览器窗口或各个组件的对象模型，用于访问和控制浏览器窗口及其各个部分，如历史记录、地址栏

    BOM的核心对象是window对象，表示浏览器的窗口，也是JS的全局对象，用于控制浏览器的各个方面，同时还提供了其他的一些对象，如navigator（提供浏览器相关信息）、location（url）、history（历史记录）

总的来讲，DOM的用于访问和操作网页文档的对象模型、BOM是控制浏览器窗口及其各个组件的模型

2、输入网址到页面显示的过程

整的来讲，这个过程可以分为6个阶段

  • DNS解析，网站于IP地址的转换，DNS解析是一个递归的过程，涉及到DNS的优化：DNS缓存、DNS负载均衡
  • 发起TCP连接：三次握手、四次挥手
  • 发送HTTP请求：构建HTTP请求报文通过TCP协议，发送至服务器指定端口；请求行、请求报头、请求正文
  • 服务器处理并返回HTTP报文：解析，并封装成HTTP Request对象，一般由Web服务器进行：Nginx、Tomcat。状态码、响应报头、响应报文
  • 浏览器解析并渲染
  • 连接结束

3、前端中的图片格式

- 图片类型：

分为位图和矢量图（向量图）；位图：像素点拼起来的，矢量图：记录元素形状和颜色算法，不会出现失真

- 压缩类型
  • 无压缩：不对图片数据进行压缩处理：BMP
  • 有损压缩：进行部分处理、将相邻的像素合并或者不重要重复内容忽略，压缩图片体积，压缩算法不会对图片的所有数据进行编码压缩，jpg
  • 无损压缩：使用压缩算法对图片的所有数据进行编码压缩，图片质量没有损耗、可以完整恢复成所有的信息
- 图片的位数：8，16，24，32

位数越大、表示的颜色越多、颜色过度更细腻

- 图片格式

  1. GIF：lzw压缩算法、采用8位压缩、支持256种颜色、适用于色彩较少的图片，最大的特性：帧动画

  2. JPC/JPEG：有损压缩格式、24位压缩，容易造成图像数据损失，支持渐进式加载、不支持透明、半透明

    渐进式：jpg文件包含多次扫描、顺寻的存在在jpg文件，先显示模糊，随着扫描次数增加，逐渐清晰

  3. PNG：使用LZ77派生的无损数据压缩算法、替代GIF格式，压缩比高、生成文件体积小

    支持8、24、32位，支持透明、半透明、能够彻底消除锯齿边缘、不支持动画

  4. Webp：目标是减少文件大小，同时支持无损压缩和有损压缩，缺点在于现在浏览器的支持率不够理想

  5. svg：用XML定义的语言、描述二维矢量及矢量2/栅格图形，提供了三种类型的图形对象：矢量图形、图像、文本。是可交互和动态的，可以在SVG文件中嵌入动画元素或通过脚本定义动画，武无论怎么放大都不会失真，文件大小也比较小比JPENG和PNG。缺点渲染成本高些

4、前端跨页面通信

  1. localStorage和sessionStorage：一个页面将数据存在在本地存储中，另一个页面通过监听storage事件实现数据的读取及其实时更新
  2. Cookies：通过设置和读取Cookies，实现在同一个域名下的不同页面之间的信息交互
  3. postmessage：window.postmessage()方法允许从一个窗口向另一个窗口发送消息，并且在目标窗口上触发mesage事件，可以指定目标窗口的origin-特定窗口接收处理消息
  4. Broadcast Channel：该API允许同一个浏览器的不同上下文之间进行双向通信，提供了一个类似发布-订阅模式的机制，创建广播频道，并在不同的上下文中加入频道，实现消息的广播与接收
  5. SharedWorker：是一个可以由多个窗口或标签共享的WebWorker，在不同页面之间进行跨页面通信，通过postmessage进行双向通信
  6. IndexedDB：客户端数据库，一个页面写入数据，另一个页面读取数据
  7. webSocket：建立一个全双工连接，在客户端和服务端进行实时通信，在不同的页面通过服务器传递数据并进行实时更新

5、DOM树理解

  • 什么是DOM

    DOM就是将HTML文件字节流转为渲染引擎能够理解的内部结构，以树型结构对HTML文档进行表述

  • 作用：

    1. 页面的视角来看：DOM是生成页面的基础数据结构
    2. 从JS脚本来看，DOM提供给JS脚本操作的接口，通过接口，JS进行访问以及操作DOM节点，改变其样式、内容
    3. 从安全角度来看:不安去的内容在DON解析阶段就拒绝在外了

总而言之，DOM是表述HTML文件的内部数据结构，将JS和web页面连接起来，并过滤一些不安去的内容

  • DOM树如何生成：

    网络进程和渲染进程之间有一个共享数据通道，网络进程加载多少，就将数据数据传给HTML解析器进行解析接收到数据后，就将其转为DOM，具体来讲主要经过以下几个阶段，字节流通过分词器被分成token（片段），Token解析位DOM节点，再讲DOM节点添加到DOM树

  • JS对DOM的影响，解析到script标签，会暂停DOM的解析，下载这段JS代码并执行，执行完成后，HTML恢复解析过程，直至生成最终的DOM

6、行内元素、块级元素、空元素

  • 行内元素：-斜体强调的文本，

  • 块级元素：

    -

      1. 无序和有序列表
      2. :列表项

  • 空元素:没有闭合标签的元素

    -水平分割线

7、title和h1、b和strong、i和em区别

  • title和h1

    1. 用途不同：title定以HTML文档的标题，通常显示在浏览器的标签上或者窗口的标题栏，对于SEO也很重要，h1表示文档的主标题，通常显示在页面内容的顶部
    2. 所在位置不同：title位于html文档的内，而h1位于内部
    3. 格式和样式不同：title通常比较短，不需要进行格式化排版，而h1标签中的文档就不一样了

  • b和strog

    b标签用于指定文本加粗的外观效果，通常只是为了强调关键词，没有较强的语义化含义。而strong表示文本的强调重点，具有更强的语义化含义，并且可以改变文本的语调和读音

  • i和em

    i标签用于指定文本斜体的外观效果，通常只是为了强调关键词，没有较强的语义化含义。而em表示文本的强调重点，具有更强的语义化含义，并且可以改变文本的语调和读音

HTML5中，i和b已经废弃

8、什么是HTML语义化

通俗讲就是从代码层面展示页面的结构而不是从最终视觉上展示结构，让机器可以读懂内容

优点：

  1. 开发者友好：使用语义类标签增强了可读性，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
  2. 搜索引擎友好： 有利于SEO，有利于搜索引擎 爬虫 更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
  3. 机器友好：语义类还可以支持读屏软件，根据文章可以自动生成目录。方便特殊群体阅读信息，比如屏幕阅读器/盲人阅读器对 strong 会有一个加重的读音

9、script标签为什么放在body标签的底部

因为浏览器再渲染html时候是从上至下执行的，当遇到js时会停止当前页面的渲染，转而去下载js文件，如果放在头部，在文件很大的情况下会造成页面首屏加载时间很长。

解决：

  • 将script标签放在body底部

  • 通过defer、async将js转为异步加载

    defer属性的作用是让脚本在文档解析完成之后再执行，而且会按照脚本在文档中的先后顺序执行。

    async属性会使脚本在下载完成后立即执行，不会等待文档解析完成，脚本的执行顺序也不一定和它们在文档中的顺序相同

    <script src="script1.js" defer></script>
<script src="script2.js" async></script>

  • 通过 JavaScript 动态创建script标签来实现异步加载。

    <script>// 创建script元素const script = document.createElement('script');script.src = 'script.js';// 设置async属性（默认是true）script.async = true;// 将script添加到文档中document.head.appendChild(script);
</script>

    这种方式可以完全控制脚本加载的时机

10、SSG

静态网站生成-在构建时预先生成静态页面并部署到CDN或其他存储服务中。

相比于传统的动态网页好处：

  • 加载速度快，提升用户体验和搜索引擎排名
  • 安全性高：没有后台代码和数据库，不易受SQL注入攻击等
  • 成本低：不需要动态服务器等国设备，降低运维成本

11、HTML5

HTML5是HTML的新标准，主要目标就是不需要额外的插件如flash等就可以传输所有内容，动画、视频、丰富的图像用户页面

与4.,0相比，文当声明类型上简单<!DOCTYPE html>,语义结构也有优势，如

<header>

- 新特性
  • 首先HTML5为了更好的实践Web语义化，增加了header、footer、nav、aside、article、section等语义化标签。
  • 在表单方面，为了增强表单，为input增加color、email、date、range、url等类型，
  • 在存储方面提供了sessionStorage、localStorage和离线存储，通过这些存储方式方便数据在客户端的存储和获取，
  • 在多媒体方面规定了音频和视频元素audio和video；
  • 另外还有地理定位、canvas画布、拖放、多线程编程的web workers和websocket协议

12、导致白屏加载时间长的原因及解决方案

结合输入url到页面的画面显示过程看，JavaScript会阻塞DOM的生成，而CSS样式文件会阻塞JS的执行，因此要重点关注JS文件和样式文件

  • 解决
    1. DNS解析优化
      • DNS缓存优化
      • DNS预加载策略
      • 稳定可靠的DNS服务器
    2. TCP网络链路优化
    3. 服务端优化
      • 数据库存储优化
      • Redis缓存
      • 中间件
      • Gzip压缩
    4. 浏览器下载，解析、渲染页面优化
      • 精简HTML的代码和结构
      • 优化CSS文件和结构
      • 合理放置JS代码，避免内联
      • 将关键的CSS代码内联在HTML中，使得CSS快速的下载，提前渲染时间
      • 延迟首屏不需要的图片加载

13、如何控制input输入框的输入字数

maxlength属性进行限制，还可以监听input事件，对输入值处理，如截断等

14、上传图片，怎么在选择图片后，通过浏览器预览？

- 方法1：使用window.URL.createObjectURL方法为对象生成一个blob对象路径

直接为文件创建内存中的临时 URL（Blob URL），无需读取文件内容，浏览器可直接访问该 URL 显示图片。

  • BlobURL本质是浏览器内存中二进制数据（Blob 对象）的临时引用，无需编码转换。由 URL.createObjectURL(blob) 生成，格式为 blob:<origin>/<uuid>。注意：需要手动调用 URL.revokeObjectURL() 释放内存，否则会持续占用。
<!-- 选择文件的输入框 -->
<input type="file" onchange="imgChange(this)" /> 
<!-- 预览用的 img 标签 -->
<img id="previewImg" style="max-width: 300px;" /> <script>
// 任选上面一种 imgChange 函数即可
// 比如用 createObjectURL 的版本：
function imgChange(img) { document.querySelector("#previewImg").src = window.URL.createObjectURL(img.files[0]); 
}
</script>

浏览器把文件 “临时映射” 成一个可访问的 URL，直接给 img 当 src，无需等文件读完（因为是 “引用”）。

  • 使用fileReader读取器
    1. 创建FileReader对象
    2. 调用readerAsDataURL方法读取文件
    3. 调用onload监听事件
    4. 通过FileReader的result属性拿到结果
function imgChange(img) { // 1. 新建 FileReader 实例：JS 里专门读文件内容的工具const reader = new FileReader(); // 2. 监听“读取完成”事件：文件读完后自动触发reader.onload = function (ev) { // ev.target.result 就是读取结果（dataURL 格式，类似 base64）document.querySelector("img").src = ev.target.result; }// 3. 发起“读文件”操作：把文件转成 dataURL（base64 字符串）reader.readAsDataURL(img.files[0]); 
}

需要将二进制数据编码为 Base64 字符串，因此面对体积较大的图像，这个操作比较慢，内存随着DOM元素自动释放

15、怎么实现“点击返回顶部”的功能

- 锚点

在页面顶部放置一个指定名称的锚点连接，然后再页面下方放置一个返回该锚点的连接，点击连接既可以返回

<body style="">
<div id="top"></div><a href="top" style="position: fixed; right:0; bottom:0">回到顶部</a>
- scrollTop

这个属性表示被隐藏在内容区域上方的像素数

为滚动时：scrollTop：0，垂直滚动>0,且表示元素上方不可见内容的像素宽度

- scrollTo

scrollTo(x,y)方法滚动当前window中显示的文档，因此设置scrollTo(0,0)位于显示区域的左上角

- scrollBy()

滚动当前window中显示的文档，x和y指定滚动的相对量，通过 “往上滚等同于当前滚动距离” 的逆向操作，实现了 “回到顶部” 的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body style="height: 2000px;"><button id="test" style="position: fixed; bottom: 0; right: 0;">回到顶部</button><script>// 获取按钮元素const test = document.getElementById('test');test.onclick = function () {// 方法1：通过scrollTop = 0 实现// document.body.scrollTop = document.documentElement.scrollTop = 0;// 方法2： scrollTo(x,y)// scrollTo(0,0)// 方法3：scrollBy()// 获取当前滚动的距离var top = document.body.scrollTop || document.documentElement.scrollTop;// 调用scrollByscrollBy(0, -top)}</script>
</body>
</html>

16、SEO

Search Engine Optimization： 搜索引擎优化

利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式，为了获取更多的免费流量，从网站结构、内容、页面等角度进行合理规划，使其更符合搜索引擎的索引规则。

- 原理

一、爬行和抓取

搜索引擎靠 “蜘蛛 / 机器人” 程序，从已知网页出发，像用户浏览一样访问页面、抓取内容，还会跟踪页面链接（爬行），发现新网址就存入数据库（抓取）。反向链接（页面被其他站点链接）超重要，没它，搜索引擎可能都找不到页面，更没法参与排名，抓取的文件会和用户浏览器看到的内容一致，存入数据库待后续处理。

二、索引

抓取到的网页文件，会被拆解、分析，把文字内容、关键词位置 / 格式（字体、颜色等）等信息，以类似 “大表格” 的结构化形式存进索引数据库，主流搜索引擎的索引库能存几十亿级网页，为后续检索做准备。

三、搜索词处理

用户输入关键词后，搜索引擎会快速做 “中文分词、停用词过滤（像‘的’‘了’这类无意义词）、拼写纠错、判断是否需整合搜索” 等处理，确保理解用户真实搜索意图，为精准匹配网页打基础。

四、排序

基于处理后的搜索词，从索引库找含该词的网页，再用 复杂排名算法（要实时计算网页与关键词相关性、结合过滤规则，涉及几十上百个影响因子 ），筛选出最相关、权威、优质的网页，按规则排序后返回搜索结果。

简单说，SEO 就是通过优化内容、链接、代码等，让网页在 “爬行抓取→索引→词处理→排序” 全流程里，更被搜索引擎认可，从而提升自然排名，让用户搜关键词时，咱们的网页能靠前展现，获得更多流量 。

- 优化SEO

主要分为内部和外部

0 内部优化
  • Meta标签优化：title、keywords、description（tdk）
  • 内部链接的优化：相关性链接（Tag标签）、各导航链接、图片链接
  • 网站内容更新：保证站内的更新
  • 服务端渲染
1 外部优化
  • 外部链接类别：相关、博客、贴吧、新闻等保持链接的多样性
  • 外链运营：每天添加一定量的外部链接，使得关键词排名上升
  • 外链选择：与自己网站相关性好的网站交互友情链接

17、浏览器乱码的原因

  • 网页源码的gbk的编码，内容的中文文字是utf-8/程序从数据库中调出呈现是utf-8编码的内容也会，浏览器不能自动检测网页编码
  • 程序查询数据库数据显示前进行程序转码
  • 浏览器浏览时出现网页乱码，在浏览器中找到转换编码的菜单进行转换

18、Canvas和SVG的区别

  • Canvas:画布

    通过JS来绘制2D图形，是逐像素进行渲染的，位置发生改变就会重新渲染

    特点：依赖分辨率、不支持事件处理器、能以.jpg或者.png格式保存图像，适合游戏应用

  • svg

    可缩放矢量图形，基于可扩展标记语言XML描述的2d图形的语义，基于XML，就说明SVG DOM中每一个元素都是可用的，可以为其添加JS事件处理器

    特点：不依赖分辨率，支持事件处理器、适合带有大型渲染区域的应用程序（谷歌地图）、复杂度高会减慢渲染速度、不适合游戏应用

19、img的secret属性作用

在响应式设计中，经常用到根据屏幕密度设置不同的图片，secret属性就用于设置不同密度下，ing会自动加载不同的图片

  • 基础：srcset="图片地址 密度描述" ，如 srcset="image-256.png 2x" ，适配不同屏幕密度，目前屏幕密度1x,2x,3x,4x
  • 进阶：结合 sizes用来设置图片的尺寸零界点 ，srcset 带 w 单位（如 128w ）指定图片质量，sizes 设尺寸临界点（如 (max-width: 360px) 340px, 128px ），这个表示默认128px,若是视区宽度大于360px则显示340px

避免因屏幕差异加载不合适图片，提升页面加载效率与显示效果 ，适配不同设备场景

20、label标签

定义表单控件间关联，点击 label 时，浏览器自动聚焦关联表单控件（如 input ）

  • 方式 1：label 的 for 属性与表单控件 id 匹配，如 <label for="Name"> 对应 <input id="Name"> 应用：点击文字聚焦输入框

  • 方式 2：label 直接包裹表单控件，如 <label>Date:<input></label> 复选框

    <!-- 场景：注册/登录页的“同意协议” -->
<label><input type="checkbox" name="agree"> 我已阅读并同意 <a href="/agreement">《用户协议》</a>
</label>

  • 提升交互体验：扩大可点击区域，用户点文字就能操作表单控件（输入框、单选 / 复选框等 ）。

  • 语义化清晰：让表单结构更易读（对开发者、屏幕阅读器都友好，辅助无障碍访问 ）。

21、页面生命周期事件

  • DOMContentLoaded — 浏览器已经完全解析HTML，并构建DOM树，但是像和样式表并没有加载完成
  • load：不仅加载完成HTML，也加载完成了所有外部资源：图片、样式
  • beforeunload/unload：用户正离开页面

总结：

  • DOMContentLoaded：DOM 准备就绪时，document 上触发，可在此将 JavaScript 应用于元素；脚本（如 <script>...</script> 、<script src="..."></script> ）会阻塞它，图片等资源可继续加载
  • load：页面和所有资源加载完成时，window 上触发，因通常无需等太久，很少使用
  • beforeunload：用户想离开页面时，window 上触发，取消的话浏览器会询问是否真离开（如存在未保存更改时）
  • unload：用户最终离开时，window 上触发，处理程序仅能执行简单操作，很少使用，可用 navigator.sendBeacon 发网络请求

22、如何input上传多张图片

<input type="file" name="files" multiple />

  • 禁止展示输入的历史记录

    规定输入字段是否启用自动完成的功能

<input type="text" autocomplete="off" />

23、能否使用自闭合标签引入脚本

不可以，因为自闭和标签的XML语法，不是HTML，只有不需要结束的空元素（ ）或者外部元素可以使用

24、meta标签中的viewport的作用

用户网页的可视区域，视区

作用：控制网页在移动设备等终端上的可视区域显示，让网页适配不同设备屏幕，优化移动端浏览体验，避免因虚拟视口与设备屏幕差异导致布局错乱，可设置宽度、缩放等规则

viewport meta标签大致如下

<meta name="viewport" content="width=device-width", initial-scale=1.0>

width=device-width 使视口宽度适配设备宽度；initial-scale=1.0 设初始缩放比例为 1 ；还有 height（设高度 ）、maximum-scale（最大缩放 ）、minimum-scale（最小缩放 ）、user-scalable（是否允许用户手动缩放 ）等属性

25、Web Socket怎么兼容低版本浏览器

  • Adobe Flash Socket：借助 Flash 实现类似 Socket 通信，利用 Flash 对旧浏览器的支持来模拟 WebSocket 功能
  • ActiveX HTMLFile (IE) ：针对 IE 浏览器，通过 ActiveX 控件的 HTMLFile 来实现特定通信逻辑，适配旧版 IE
  • 基于 multipart 编码发送 XHR：用 XMLHttpRequest（XHR），以 multipart 编码方式发送请求，模拟 WebSocket 双向通信，让不支持 WebSocket 的浏览器能实现类似长连接效果
  • 基于长轮询的 XHR：通过 XHR 定时发起请求（长轮询），服务端有数据变化就响应，模拟 WebSocket 实时通信，适配不支持 WebSocket 的浏览器 ，这些都是在浏览器原生不支持 WebSocket 时的替代手段 。

26、ifram是什么

在一个网站中嵌入另一个网站的内容

优点：

  1. ifram能够原封不动的吧嵌入的网页显示出来
  2. 多个网页引用ifram，只需要修改一个ifram的内容
  3. 针对加载缓慢的第三方内容（广告等）使用ifram

缺点:

  1. 产生很多页面，管理困难
  2. 不利于SEO，代码复杂、框架太多的情况下
  3. 很多的移动端设备无法完全显示框架，兼容性差
  4. ifram里面的样式、脚本资源会增加请求次数、对于大型网站不可取
  5. ifram会阻碍页面中的onload事件，给用户加载很慢的感觉

27、常用的meta元素

  • meta标签是head部的一个辅助性标签，提供关于 HTML 文档的元数据。它并不会显示在页面上，但对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（SEO），或其他 web 服务。

  • meta标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。

    http-equiv属性

  1. charset 用以说明网页制作所使用的文字以及语言
  2. cache-control、Pragma、Expires 设置网页的过期时间，一旦过期则必须到服务器上重新获取。
  3. refresh 定时让网页在指定的时间n内，跳转到页面
  4. set-cookie Cookie设定，如果网页过期，存盘的cookie将被删除。

  • name属性

    <!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords"><!-- 页面描述内容 description -->
<meta name="description" content="your description"><!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow"><!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- 禁止自动翻译 -->
<meta name="google" value="notranslate"><!-- 禁止转码 -->
<meta http-equiv="Cache-Control" content="no-transform"><!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

  • viewport – 对页面视图相关进行定义

  • property&content

    可以让网页变成富媒体对象，同意网页杯其他网站引用，不会只是一个链接，会提取相关信息展示

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • Cache-Control 作用：定义请求和响应遵循的缓存机制，能声明缓存内容、修改过期时间，可多次声明

    no-transform：指令，要求不得对资源进行转换或转变

    no-siteapp：指令，用于禁止百度进行转码

    通过 <meta http-equiv="Cache-Control" content="no-transform"> 和 <meta http-equiv="Cache-Control" content="no-siteapp"> 这两个 meta 标签，分别设置对应 Cache-Control 指令，控制浏览器缓存及百度转码相关行为 。

  • theme-color

28、defer和async区别

二者都为解决脚本加载执行阻塞 DOM 渲染问题，让脚本异步加载，不阻碍页面渲染

  • 执行时机
    • defer：脚本按 HTML 中出现顺序执行，在文档解析完成（DOM 渲染完）、DOMContentLoaded 事件前执行
    • async：脚本加载完就执行，不保证顺序，谁先加载好谁先执行
  • 场景适配
    • defer 适合依赖 DOM 或需按顺序执行的脚本（如页面初始化逻辑 ）
    • async 适合独立无依赖脚本（如统计代码 ）

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

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

相关文章

ADI的EV-21569-SOM核心板和主板转接卡的链接说明

ADI的EV-21569-SOM核心板和主板转接卡的链接说明

ADI提供给客户很多DSP的核心板&#xff0c;比如EV-21569-SOM&#xff0c;EV-21593-SOM&#xff0c;EV-SC594-SOM等&#xff0c;非常多&#xff0c;但是没有底板&#xff0c;光一个核心板怎么用呢&#xff1f;于是我就在想&#xff0c;我的21569评估板就有通用底板&#xff0c;能…
阅读更多...
基于 Redisson 实现分布式系统下的接口限流

基于 Redisson 实现分布式系统下的接口限流

在高并发场景下&#xff0c;接口限流是保障系统稳定性的重要手段。常见的限流算法有漏桶算法、令牌桶算法等&#xff0c;而单机模式的限流方案在分布式集群环境下往往失效。本文将介绍如何利用 Redisson 结合 Redis 实现分布式环境下的接口限流&#xff0c;确保集群中所有节点的…
阅读更多...
ubuntu播放rosbag包（可鼠标交互）

ubuntu播放rosbag包（可鼠标交互）

1 前言 众所周知&#xff0c;ubuntu中播放bag包最主要的工具是rviz&#xff0c;然而rviz有一个无法忍受的缺陷就是不支持鼠标回滚&#xff0c;并且显示的时间的ros时间&#xff0c;不是世界时间&#xff0c;因此在遇到相关bug时不能与对应的世界时间对应。基于以上&#xff0c…
阅读更多...
一文理解缓存的本质：分层架构、原理对比与实战精粹

一文理解缓存的本质：分层架构、原理对比与实战精粹

&#x1f4d6; 推荐阅读&#xff1a;《Yocto项目实战教程:高效定制嵌入式Linux系统》 &#x1f3a5; 更多学习视频请关注 B 站&#xff1a;嵌入式Jerry 一文理解缓存的本质&#xff1a;分层架构、原理对比与实战精粹 “缓存让系统飞起来”——但每一层缓存有何不同&#xff1f;…
阅读更多...
【离线数仓项目】——电商域DIM层开发实战

【离线数仓项目】——电商域DIM层开发实战

摘要本文主要介绍了电商域离线数仓项目中DIM层的开发实战。首先阐述了DIM层的简介、作用、设计特征、典型维度分类以及交易支付场景下的表示例和客户维度表设计。接着介绍了DIM层设计规范&#xff0c;包括表结构设计规范、数据处理规范以及常见要求规范。然后详细讲解了DIM层的…
阅读更多...
Unreal Engine 自动设置图像

Unreal Engine 自动设置图像

void UYtGameSettingSubsystem::RunHardwareBenchmark(int32 WorkScale, float CPUMultiplier, float GPUMultiplier) {UGameUserSettings* UserSettings UGameUserSettings::GetGameUserSettings();if (UserSettings){// 运行基准测试&#xff08;异步操作&#xff0c;可能需…
阅读更多...
使用Spring Boot和PageHelper实现数据分页

使用Spring Boot和PageHelper实现数据分页

在Spring Boot项目中&#xff0c;利用PageHelper插件可以轻松实现数据分页功能。以下是具体的实现步骤和代码示例。添加依赖在项目的pom.xml文件中添加PageHelper和MyBatis的依赖。<dependency><groupId>com.github.pagehelper</groupId><artifactId>p…
阅读更多...
【IT-Infra】从ITIL到CMDB，配置管理，资产管理，物理机与设备管理（含Infra系列说明）

【IT-Infra】从ITIL到CMDB，配置管理，资产管理，物理机与设备管理（含Infra系列说明）

【IT-Infra】从ITIL到CMDB&#xff0c;配置管理&#xff0c;资产管理&#xff0c;物理机与设备管理&#xff08;含Infra系列说明&#xff09; 文章目录序&#xff1a;Infra系列说明1、ITIL 信息技术基础架构库&#xff08;起源&#xff09;2、CMDB 配置管理数据库&#xff08;I…
阅读更多...
vue使用printJS实现批量打印及单个打印 避免空白页

vue使用printJS实现批量打印及单个打印 避免空白页

本文介绍了使用print-js库实现批量打印功能的实现方法。通过安装print-js依赖后，创建一个batchPrintAction方法，该方法接收选中行数据，生成包含多个标签页的HTML字符串。每个标签页以表格形式展示6个数据字段，并设置了80mm50mm的标签尺寸。方法使用PrintJS进行打印，配置了…
阅读更多...
C++ 选择排序、冒泡排序、插入排序

C++ 选择排序、冒泡排序、插入排序

选择排序&#xff1a;是一种简单直观的排序算法&#xff0c;每次均是选择最小&#xff08;大&#xff09;的元素进行排序。选择排序算法思想&#xff1a;1 在未排序序列中找到最小&#xff08;大&#xff09;元素&#xff0c;存放到排序序列的起始位置2 再从剩余未排序元素中继…
阅读更多...
Linux入门篇学习——Linux 编写第一个自己的命令，make 工具和 makefile 文件

Linux入门篇学习——Linux 编写第一个自己的命令，make 工具和 makefile 文件

目录 一、Linux 编写第一个自己的命令 1.命令的概念 2.定义一个自己的命令 二、make 工具和 makefile 文件 1.使用 make 工具 2.makefile文件 一、Linux 编写第一个自己的命令 1.命令的概念 命令就是可执行程序。 比如说我们输入 ls -al &#xff0c;ls 就是可执行程序的…
阅读更多...
实验一 接苹果

实验一 接苹果

主要步骤苹果树制作&#xff08;苹果与篮子的制作同理&#xff09;为苹果添加标签相机位置设置与游戏面板长宽比设置&#xff08;16:9&#xff09;苹果下落设置&#xff08;将苹果从平抛运动改为垂直下落&#xff09;通过设置物理图层并更改碰撞矩阵表实现通过PlayerPrefs实现游…
阅读更多...
Nginx服务器集群：横向扩展与集群解决方案

Nginx服务器集群：横向扩展与集群解决方案

横向扩展&#xff1a;基础概念 在深入了解Nginx的横向扩展细节之前&#xff0c;首先理解横向扩展的含义及其重要性。横向扩展是指通过增加服务器数量来分散负载并提升整体性能。这与纵向扩展形成对比&#xff0c;纵向扩展是指在单个服务器上增加更多资源&#xff08;如CPU、内…
阅读更多...
缺陷的生命周期（Bug Life Cycle）是什么？

缺陷的生命周期（Bug Life Cycle）是什么？

一、缺陷生命周期的定义缺陷生命周期是指一个Bug从被发现到最终关闭的完整流程&#xff0c;反映了缺陷在不同角色&#xff08;测试、开发、产品等&#xff09;间的流转状态。它是软件测试流程的核心管理模型&#xff0c;直接影响团队协作效率。二、标准缺陷生命周期阶段以下是通…
阅读更多...
AtCoder Beginner Contest 333（A,B,C,D,E,F）

AtCoder Beginner Contest 333（A,B,C,D,E,F）

AtCoder Beginner Contest 333 A 题意 输出n个n(n<9) 代码 #include<bits/stdc.h> using namespace std; void solve(){int n;cin>>n;for(int i1;i<n;i)cout<<n; } signed main(){ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);int T__1;//cin…
阅读更多...
留学真相：凌晨两点被海关拦下时，我才明白人生没有退路

留学真相：凌晨两点被海关拦下时，我才明白人生没有退路

> 独立不是选择&#xff0c;而是生存的必修课下飞机那一刻&#xff0c;幻想中的“镀金生活”瞬间崩塌。伦敦海关凌晨两点的灯光下&#xff0c;你颤抖着翻找学校文件&#xff0c;手机信号格空空如也&#xff1b;大巴误点后&#xff0c;你拖着两个32公斤的行李箱站在阴雨中&am…
阅读更多...
探索AIGC领域DALL·E 2的图像生成与人类创意的融合

探索AIGC领域DALL·E 2的图像生成与人类创意的融合

探索AIGC领域DALLE 2的图像生成与人类创意的融合关键词&#xff1a;AIGC、DALLE 2、图像生成、人类创意、创意融合摘要&#xff1a;本文聚焦于AIGC领域中DALLE 2的图像生成技术与人类创意的融合。首先介绍了相关背景&#xff0c;包括DALLE 2的发展历程和人类创意在艺术创作中的…
阅读更多...
【ECharts】多个ECharts版本共存解决方案

【ECharts】多个ECharts版本共存解决方案

多个ECharts版本共存解决方案 在单个HTML页面中使用多个ECharts版本的关键在于避免全局命名空间冲突。下面我将展示一个完整的解决方案&#xff0c;包含两种不同的实现方法。 解决方案思路命名空间隔离法&#xff1a; 使用不同的全局变量名保存不同版本的ECharts在加载新版本前…
阅读更多...
力扣热门算法题 204.计数质数，207.课程表，213.打家劫舍II

力扣热门算法题 204.计数质数，207.课程表，213.打家劫舍II

力扣热门算法题 204.计数质数&#xff0c;207.课程表&#xff0c;213.打家劫舍II&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2025.07.07 可通过leetcode所有测试用例。 目录 204.计数质数 解题思路 完整代码 207.课程表 解题思…
阅读更多...
深入理解 macOS 的 quarantine、xattr 与 Gatekeeper

深入理解 macOS 的 quarantine、xattr 与 Gatekeeper

在 macOS 上安装第三方应用时&#xff0c;你是否遇到过如下提示&#xff1f; “xxx.app 已损坏&#xff0c;无法打开。”“无法打开‘xxx.app’&#xff0c;因为它来自身份不明的开发者。”“你确定要打开这个应用吗&#xff1f;它是从互联网下载的。” 这些提示背后&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023