前端面试——HTML

最新推荐文章于 2024-09-14 22:18:26 发布

Danche_1

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量82

点赞数

文章标签：前端面试 html

本文链接：https://blog.csdn.net/Danche_1/article/details/131685601

版权

1 前端需要注意哪些SEO

•合理的title、description、keywords：搜索引擎对这些标签的权重逐渐减小。在title中，强调重点即可，重要关键词不要超过2次，并且要靠前。每个页面的title应该有所不同。description应该高度概括页面内容，长度适当，避免过度堆砌关键词。每个页面的description也应该有所不同。keywords标签应列举出重要关键词即可。

•语义化的HTML代码，符合W3C规范：使用语义化的HTML代码可以让搜索引擎更容易理解网页的结构和内容。遵循W3C规范可以提高网页的可读性和可访问性，对SEO也有好处。

•重要内容HTML代码放在最前：搜索引擎抓取HTML的顺序是从上到下，有些搜索引擎对抓取长度有限制。因此，将重要的内容放在HTML的前面，确保重要内容一定会被抓取。

•重要内容不要用js输出：爬虫不会执行JavaScript，所以重要的内容不应该依赖于通过JavaScript动态生成。确保重要内容在HTML中静态存在。

•少用iframe：搜索引擎通常不会抓取iframe中的内容，因此应该尽量减少iframe的使用，特别是对于重要的内容。

•非装饰性图片必须加alt：为非装饰性图片添加alt属性，可以为搜索引擎提供关于图片内容的描述，同时也有助于可访问性。

•提高网站速度：网站速度是搜索引擎排序的一个重要指标

**2. src 和 `href` 的区别**

src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：

•src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。

•href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。

3`<img>`的`title`和`alt`有什么区别

•title属性：title属性是HTML元素通用的属性，适用于各种元素，不仅仅是<img>标签。当鼠标滑动到元素上时，浏览器会显示title属性的内容，提供额外的信息或解释，帮助用户了解元素的用途或含义。对于<img>标签，鼠标悬停在图片上时会显示title属性的内容。

•alt属性：alt属性是<img>标签的特有属性，用于提供图片的替代文本描述。当图片无法加载时，浏览器会显示alt属性的内容，或者在可访问性场景中，读屏器会读取alt属性的内容。alt属性的主要目的是提高图片的可访问性，使无法查看图片的用户也能了解图片的内容或含义。除了纯装饰性图片外，所有<img>标签都应该设置有意义的alt属性值。

•补充答案：title属性主要用于提供额外的信息或提示，是对图片的补充描述，可以用于提供更详细的说明，如图片的来源、作者、相关信息等。它不是必需的，但可以增强用户体验，特别是在需要显示更多信息时。alt属性是图片内容的等价描述，应该简洁明了地描述图片所表达的信息。它对于可访问性至关重要，确保无障碍用户能够理解图片的含义，同时也是搜索引擎重点分析的内容。在设置alt属性时，应该避免过度堆砌关键词，而是提供准确、有意义的描述。

4 前端性能优化的方法

•减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

•前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

•用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

•当需要设置的样式很多时设置className而不是直接操作style

•少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

•避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)

•图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳

•避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

性能优化问题

•代码层面：避免使用css表达式，避免使用高级选择器，通配选择器

•缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

•请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载

•请求带宽：压缩文件，开启GZIP

5 iframe有那些缺点？

iframe是一种在网页中嵌入其他网页或文档的标签，虽然它在某些情况下可以提供一些便利，但也存在一些缺点需要考虑：

•阻塞主页面的 onload 事件：当页面中存在 iframe 时，iframe 的加载会阻塞主页面的 onload 事件触发。这可能会导致页面加载速度变慢，影响用户体验。

•不利于 SEO：搜索引擎的爬虫程序通常不能很好地解读 iframe 内部的内容。因此，如果重要的页面内容被放置在 iframe 中，搜索引擎可能无法正确地索引和收录这些内容，从而影响网页的搜索引擎优化（SEO）。

•连接限制和并行加载：iframe 和主页面共享连接池，而大多数浏览器对相同域的连接数有限制。这意味着当页面中包含多个 iframe 时，浏览器需要同时处理这些连接，可能会影响页面的并行加载能力，导致页面加载速度变慢。

为了避免以上问题，可以考虑以下解决方案：

•尽量避免使用 iframe，特别是在主要内容部分。

•如果必须使用 iframe，可以通过 JavaScript 动态地给 iframe 添加 src 属性值，而不是在静态 HTML 中指定。这样可以绕开阻塞主页面的 onload 事件。对于需要被搜索引擎索引的重要内容，避免将其放置在 iframe 中。

•考虑使用其他替代方案，如 AJAX 加载内容或使用现代的前端框架来实现类似的效果。

•总之，iframe 在某些场景下可以提供方便，但在使用时需要注意其缺点，并根据具体情况进行权衡和选择。

6 渲染优化

•禁止使用iframe（阻塞父文档onload事件）

•禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）

•使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）

•对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU

•页面头部的<style></style> <script></script> 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）

•页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)

•网页gzip，CDN托管，data缓存，图片服务器

•前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

•用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

•当需要设置的样式很多时设置className而不是直接操作style

•少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

•图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳

7 网页制作会用到的图片格式

在网页制作中，常用的图片格式包括：

•JPEG（Joint Photographic Experts Group）：适用于存储照片和复杂的图像，具有较高的压缩比，但会有一定的图像质量损失。

•PNG（Portable Network Graphics）：适用于图标、透明背景的图像以及需要保留较高图像质量的场景。可以选择使用PNG-8或PNG-24，前者支持最多256种颜色，后者支持更多颜色但文件体积更大。

•GIF（Graphics Interchange Format）：适用于简单动画和图标，支持透明背景和基本的透明度。

•SVG（Scalable Vector Graphics）：矢量图形格式，使用XML描述图形，具有无损缩放和可编辑性。

除了上述常见的图片格式，还有一些新兴的图片格式：

•WebP：由Google开发的一种旨在提高图片加载速度的格式，具有较高的压缩率和图像质量，逐渐被主流浏览器支持。

•APNG（Animated Portable Network Graphics）：是PNG的位图动画扩展，支持帧动画效果，但浏览器兼容性较差。

请注意，选择合适的图片格式应根据具体需求，如图像内容、透明度要求、动画效果等。新的图片格式如WebP和APNG可以根据项目需求和兼容性考虑是否使用。

8 在CSS/JS代码上线之后，从用户刷新网页开始，一次JS请求一般情况下有哪些地方会有缓存处理？

在进行JS请求时，可以在以下几个地方进行缓存处理，以提高性能和减少资源加载时间：

1.DNS缓存：浏览器会缓存已解析的域名和对应的IP地址，这样在下次请求同一域名时可以直接使用缓存的IP地址，避免重新进行DNS解析。

2.CDN缓存：如果使用了内容分发网络（CDN），CDN会缓存静态资源文件，如CSS和JS文件，以便快速地分发给用户。当用户再次请求同一资源时，可以从CDN缓存中获取，减少向源服务器的请求次数。

3.浏览器缓存：浏览器会缓存已请求的静态资源文件，如CSS和JS文件。可以通过设置HTTP响应头中的Cache-Control和Expires字段来控制浏览器缓存的行为。如果设置了适当的缓存策略，浏览器在下次请求同一资源时可以直接从本地缓存中获取，而不需要再次向服务器请求。

4.服务器缓存：服务器可以对动态生成的JS文件进行缓存，以避免重复生成相同的响应。服务器可以通过设置响应头中的Cache-Control和Expires字段，或者使用缓存代理服务器来进行缓存处理。

需要注意的是，缓存的有效期限和缓存策略的设置需要根据具体的需求和业务场景来确定。合理地利用缓存可以显著提高网页加载速度和用户体验。

9 一个页面上有大量的图片有哪些方法优化这些图片的加载

•使用图像压缩技术：通过使用图像压缩工具，如PhotoShop、TinyPNG等，将图片文件的大小减小，以减少加载时间。

•使用适当的图像格式：根据图像的特性选择合适的图像格式，如JPEG、PNG、WebP等。JPEG适用于照片和复杂图像，而PNG适用于简单的图标和透明图像。WebP是一种现代的图像格式，可以在保持良好质量的同时减小文件大小。

•图片CDN加速：使用内容分发网络（CDN）来加速图片的传输，将图片文件缓存到离用户更近的服务器，减少传输时间。

•图片延迟加载：采用图片懒加载技术，将页面上不可见区域的图片暂时不加载，当用户滚动页面至可见区域时再进行加载，以减少初始加载时间。

•使用CSS精灵图：将多个小图标或背景图片合并为一张大图，并利用CSS的background-position来定位显示需要的部分，减少HTTP请求的数量。

•使用矢量图形：使用矢量图形（如SVG）代替位图，以减小文件大小并保持清晰度，适用于简单的图形和图标。

•响应式图片：针对不同的设备和屏幕尺寸提供适当大小的图片，以避免在小屏幕设备上加载过大的图片。

•图片懒加载、预加载：根据用户的浏览行为，提前加载下一页或下一组图片，以提高用户体验和流畅度。

•图片缓存：设置适当的缓存策略，让浏览器在首次加载后对图片进行缓存，减少重复加载的次数。

10 http2.0 http3.0 做了哪些改进

HTTP/2 的特性包括：

1.二进制分帧传输：将请求和响应消息分割为多个二进制帧，可以并发地发送和处理，提高传输效率。

2.多路复用：在单个连接上可以同时发送多个请求和响应，避免了建立多个 TCP 连接的开销，提高并发性能。

3.头部压缩：使用 HPACK 算法对请求和响应的头部进行压缩，减少数据传输量，提高性能。

4.服务器推送：服务器可以主动推送与当前页面相关的资源，减少客户端的请求延迟。

而 HTTP/3 则是基于 QUIC 协议的新一代 HTTP 协议。QUIC 是一个基于 UDP 的传输协议，具有以下特性：

1.连接迁移：支持在网络切换或设备漫游时无缝迁移连接，避免连接中断。

2.无队头阻塞：解决了 TCP 协议中的队头阻塞问题，可以同时发送多个请求和响应，提高并发性能。

3.自定义拥塞控制：使用独立的拥塞控制算法，适应不同网络条件下的流量控制和拥塞控制。

4.前向安全和前向纠错：支持端到端的加密和纠错机制，提高数据传输的安全性和可靠性。

总结：HTTP/2 和 HTTP/3 都是在传输层进行的协议改进，HTTP/2 在 TCP 上引入了二进制分帧传输、多路复用、头部压缩和服务器推送等特性，而 HTTP/3 则是基于 UDP 的 QUIC 协议，引入了连接迁移、无队头阻塞、自定义拥塞控制和前向安全和前向纠错等新特性。

11 从浏览器地址栏输入url到显示页面的步骤

1.从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）

2.开启网络线程到发出一个完整的HTTP请求（这一部分涉及到dns查询，TCP/IP请求，五层因特网协议栈等知识）

3.从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）

4.后台和前台的HTTP交互（这一部分包括HTTP头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）

5.单独拎出来的缓存问题，HTTP的缓存（这部分包括http缓存头部，ETag，catch-control等）

6.浏览器接收到HTTP数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和DOMContentLoaded等）