【前端面试题十道题】难度一颗星

最新推荐文章于 2024-09-10 00:10:43 发布

Idcaias

最新推荐文章于 2024-09-10 00:10:43 发布

阅读量153

点赞数

文章标签：前端搜索引擎

本文链接：https://blog.csdn.net/weixin_56036485/article/details/131292403

版权

1 title和h1区别、b和strong的区别、i与em的区别

title和h1

思路：用途所在位置格式样式 SEO

用途：title用于定义HTML文档的标题；h1用于表示文档的主标题

所在位置：title显示在浏览器的标签页或者窗口的标题栏上；h1显示在页面内容区域的顶部

格式样式：title标签中的文本通常较短，且不需要进行格式、话排版等操作；h1标签中的文本
通常较长，并且需要进行核实的格式化、排版和样式设置，以使其适应页面布局和设计风格	

SEO：title>h1

b和strong

思路：显示效果标签类型 SEO

b标签（实体标签/物理标签）和strong（逻辑标签）标签都能使文本默认显示为加粗效果，
但b标签是样式标签，不具备HTML语义，strong标签是语义化标签，含义是加强，表示该文本比较重要，提醒读者/终端注意

场景举例：视力障碍的朋友使用屏幕阅读设备获取网络资源时，strong标签包裹的内容会被重读，而b标签包裹的内容不会被重读

为了符合CSS3的规范，b尽量少用，改用strong

i和em

思路：显示效果标签类型用途 SEO

i标签（实体标签/物理标签）和em标签（逻辑标签）都能使文本默认显示为倾斜效果，

但em标签具有强调文本的语义，一些语音阅读器在阅读时会根据em标签加强语气，

i：更多用在字体图标
em：术语上（医药、生物）

从SEO的角度来说，em标签在搜索引擎中更受重视

2 script标签为什么建议放在body标签底部（defer、async）

原因

因为浏览器渲染html的执行是从上到下的，当遇到js文件时就会停止当前页面的渲染，转而去下载js文件。

如果将script标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验

解决方法

将script标签放在body的底部

通过defer、async属性将js文件转为异步加载

3 关于SSG的理解

SSG（Static Site Generation，静态网站生成）是指在构建时预先生成的静态页面，
并将这些页面部署到CDN（内容分发网络）或者其他存储服务器中，以提升Web应用的性	 
能和用户体验。

SSG实现步骤

1.在开发阶段，使用模板引擎等技术创建静态页面模板；
2.将需要展示的数据从后台API（Application Programming Interface 应用程序接口/应用编程接口）中获取或者通过其他渠道获取，并将其填充到静态页面模板中，生成完整的HTML页面
3.使用构建工具（Gatsby、Next.js等）对静态页面进行构建，生成静态HTML、CSS和JavaScript文件
4.部署生成好的静态文件到服务器或者CDN上，以供用户访问

SSG的优势（与传统动态网页相比）

1.加载速度快：由于不需要每次请求都动态地渲染页面，SSG可以减少网页加载时间，从而提高用户体验和搜索引擎排名
2.安全性高：由于没有后台代码和数据库，SSG不容易受到SQL注入等攻击
3.成本低：由于不需要动态服务器等设备，SSG可以降低网站的运维成本和服务器的负担

注意

SSG不适用于频繁更新的内容和动态交互的场景，但对内容较为稳定和更新较少的网站来说是一个性能优化的好选择

4 什么是HTML5，HTML5和HTML的区别

HTML5是HTML的新标准，其主要目的是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

区别

文档声明类型方面：

HTML是很长的一段代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5只有简单的声明，方便记忆

<!DOCTYPE html>

语义结构方面

HTML4：没有体现结构语义化的标签，通常的命名方式为

<div id="header"></div>

HTML5：在结构语义化上具有优势,提供了一些新的标签如：<footer>、<article>、<header>等

5 什么是渐进增强和优雅降级

背景

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。
由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。
二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。

渐进增强（progressive enhancement）

主要是针对于低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验

优雅降级（graceful degradation）

一开始就构建站点的完整功能，然后再针对低版本的浏览器进行兼容。

区别

渐进增强，是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。优雅降级，是从复杂的现状开始，并试图减少用户体验的供给

渐进增强认为应关注于内容本身。优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站。

选择：

根据所使用的客户端的版本来做决定，因为本质上渐进增强和优雅降级的概念是软件开发过程中低版本软件与高版本软件面对新功能的兼容问题，所以低版本用户居多，当然优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。不过大多数情况下都是采用渐进增强的方式，因为它更加合理。

6 如何控制input输入框的输入字数

一般通过maxlength属性进行限制：

<input maxlength="5" />

还可以通过监听 oninput 事件，对输入值进行处理

7 渐进式jpeg

渐进式 JPEG（Progressive JPEG），即PJPEG。
渐进式JPEG以特定方式压缩照片和图片，与基线JPEG不同，PJPEG在Web浏览器中呈现时，会首先给出模糊图像的外观。然后一点一点地开始图片渲染，直到它显示出完全渲染的图像。浏览器实际上是逐行解释图像的，但在占位符中提供了完整图像的模糊预览。随着Web浏览器的渲染引擎处理数据，图像变得更清晰更详细。直到最后渲染完毕，用户将看得到完整的清晰的图像。

PJPEG能够起到一种很有意义的心理效果，让用户有东西可看，而不必干等大型图像慢慢显示在屏幕上。

JPEG适合于大部分常用的浏览器，包括Chrome、Firefox和Internet Explorer 9 及更高版本。旧版本的Internet Explorer 9 及更高版本。旧版本的Internet Explorer 在显示渐进式JPEG时存在一些问题，不过这只是一小部分用户。而不支持渐进式JPEG格式的浏览器会像普通JPEG一样加载照片。

8 SEO是什么

SEO（Search Engine Optimization），汉译为搜索引擎优化。

搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

9 SEO的原理是什么

搜索引擎排名大致上可以分为四个步骤

爬行和抓取

搜索引擎派出一个能够在网上发现新网页并抓取文件的程序，这个程序通常被称为蜘蛛或机器人。

搜索引擎蜘蛛从数据库中已知的网页开始出发，就像正常用户的浏览器一样访问这些网页并抓取文件

并且搜索引擎蜘蛛会跟踪网页上的链接，访问更多网页，这个过程就叫爬行。

当通过链接发现有新的网址时，蜘蛛会将新网址记录入数据库等待抓取。

跟踪网页链接是搜索引擎蜘蛛发现新网址的最基本方法，所以反向链接成为搜索引擎优化的最基本因素之一。没有反向链接，搜索引擎连页面都发现不了，就更谈不上排名了。

索引

搜索引擎索引程序把蜘蛛抓取的网页文件分解、分析，并以巨大表格的形式存入数据库，这个过程就是索引。在索引数据库中，网页文字内容，关键词出现的位置、字体、颜色、加粗、斜体等相关信息都有相应记录。

搜索引擎索引数据库存储巨量数据，主流搜索引擎通常都存有几十亿级别的网页。

搜索词处理

用户在搜索引擎界面输入关键词，单击“搜索”按钮后，搜索引擎程序即对输入的搜索词进行处理，如中文特有的分词处理，对关键词词序的分别，去除停止词，判断是否需要启动整合搜索，判断是否有拼写错误或错别字等情况。搜索词的处理必须十分快速。

排序

对搜索词进行处理后，搜索引擎排序程序开始工作，从索引数据库中找出所有包含搜索词的网页，并且根据排名计算法计算出哪些网页应该排在前面，然后按一定格式返回“搜索”页面。

排序过程虽然在一两秒之内就完成返回用户所要的搜索结果，实际上这是一个非常复杂的过程。排名算法需要实时从索引数据库中找出所有相关页面，实时计算相关性，加入过滤算法，其复杂程度是外人无法想象的。搜索引擎是当今规模最大、最复杂的计算系统之一。

但是即使最好的搜素引擎在鉴别网页上也还无法与人相比，这就是为什么网站需要搜索引擎优化。没有 SEO 的帮助，搜索引擎常常并不能正确返回最相关、最权威、最有用的信息。

10 如何实现SEO优化

SEO主要分为内部和外部两个方向

一、内部优化

1.META标签优化：例如TITLE，KEYWORDS，DESCRIPTION（TDK）等的优化
2.内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接
3.网站内容更新：每天保持站内的更新（主要是文章的更新等）
4.服务器端渲染（SSR）

二、外部优化

1.外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性
2.外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升
3.外链选择：与一些和自身网站相关性比价高，整体质量比较好的网站交换友情链接，巩固稳定关键词排名