一、HTML、HTTP、WEB综合问题

1. 前端需要注意哪些seo(计算机搜索引擎优化)

• 合理的title、description、keywords：搜索引擎对这些标签的权重逐渐减小。
• 语义化的HTML代码：使用语义化的HTML代码可以让搜索引擎更容易理解网页的结构和内容。(标签语义化/图片语义化/表单语义化)
• 重要内容HTML代码放在最前：搜索引擎抓取HTML的顺序是从上到下，有些搜索引擎对抓取长度有限制。
• 重要内容不要用js输出：爬虫不会执行JavaScript，所以重要的内容不应该依赖于通过JavaScript动态生成。确保重要内容在HTML中静态存在。
• 少用iframe：搜索引擎通常不会抓取iframe中的内容。
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

2. <img>的title和alt有什么区别

• title属性（非必需）：title适用于各种元素，不仅仅是<img>标签。当鼠标滑动到元素上时，浏览器会显示title属性的内容。
• alt属性：alt属性是<img>标签的特有属性，用于提供图片的替代文本描述。当图片无法加载时，浏览器会显示alt属性的内容，或者在可访问性场景中，读屏器会读取alt属性的内容。

3. http的几种请求方法用途

• GET方法：

1. 用途：发送一个请求来获取服务器上的某一资源。
2. 特点：根据HTTP规范，GET请求不应该有请求体，参数应该通过URL的查询字符串传递。

• POST方法：

1. 用途：向URL指定的资源提交数据或附加新的数据。
2. 特点：POST请求的数据可以通过请求体以表单形式传递，或者以JSON等格式传递。

POST请求和GET请求的区别是什么？

• POST请求将参数放在请求体中，而GET请求将参数附加在URL的查询字符串中。
• POST请求的数据不会显示在URL中，而GET请求的数据会显示在URL中。
• POST请求一般用于提交数据，而GET请求一般用于获取数据。

• PUT方法：

1. 用途：将数据发送给服务器，并存储在指定的URL位置。PUT方法指定了资源在服务器上的位置。

PUT请求和POST请求有什么区别？

• PUT请求用于指定资源在服务器上的位置，而POST请求没有指定位置。
• PUT请求一般用于更新或替换资源，而POST请求一般用于新增资源或提交数据。

• 其他方法：

HEAD方法：只请求页面的首部。；DELETE方法：删除服务器上的某资源。OPTIONS方法：它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息。；TRACE方法：TRACE方法被用于激发一个远程的，应用层的请求消息回路。； CONNECT方法： 把请求连接转换到透明的TCP/IP通道。

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

1. 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
2. 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
3. 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
4. 载入解析到的资源文件，渲染页面，完成。

5. 如何进行网站性能优化

太杂了，以后开一个专门的文章。

6. HTTP状态码及其含义（仅列举常见状态码，具体状态还需结合实际。）

• 1XX：信息状态码

  • 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

• 2XX：成功状态码

  • 200 OK 正常返回信息
  • 202 Accepted 服务器已接受请求，但尚未处理

• 3XX：重定向

  • 301 Moved Permanently 请求的网页已永久移动到新位置。
  • 302 Found 临时性重定向。

• 4XX：客户端错误

  • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
  • 401 Unauthorized 请求未授权。
  • 403 Forbidden 禁止访问。
  • 404 Not Found 找不到如何与 URI 相匹配的资源。

• 5XX: 服务器错误

  • 500 Internal Server Error 最常见的服务器端错误。

7. 语义化的实践（列举一些实践当时中常用的的）

• 选择合适的HTML标签：避免滥用<div>标签，比如使用<header>表示页面的页眉，<nav>表示导航栏，<article>表示独立的文章内容等。（只能说尽量，除非特地做优化，真敲代码还是嘎嘎敲div...）
• 使用有意义的标签和属性：alt啊title啊...
• 尽量使用具有语义的类名和ID，避免过于依赖元素标签选择器(就是>span,ntd-child之类的)

8. 介绍一下对浏览器内核的理解？

浏览器内核是浏览器的核心组成部分，主要分为两个部分：渲染引擎（也称为布局引擎或渲染引擎）和 JavaScript 引擎。

• 渲染引擎：渲染引擎负责解析网页的 HTML、XML、图像等内容，负责处理网页的布局、样式计算、绘制等任务。（Chrome的WebKit）
• JavaScript 引擎：JavaScript 引擎负责解析和执行网页中的 JavaScript 代码，实现网页的动态交互和功能。 (Chrome的V8)

9. html5的新特性（常见）

• 新增选择器 document.querySelector、document.querySelectorAll。

querySelector和querySelectorAll的使用方法blog.csdn.net/a1833906339…

• 本地存储 localStorage 和 sessionStorage。（详见第十二条）
• 跨域资源共享(CORS) Access-Control-Allow-Origin。（解决资源跨域的策略）

简单说就是， Access-Control-Allow-Origin 的值可以是 URL 或 *，如果是 URL 则只会允许来自该 URL 的请求，*则允许任何域的请求。

• 语义化标签 article、footer、header、nav、section。
• 离线存储 manifest。（详见第十条）

10. HTML5的离线储存的使用和工作原理

• 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
• 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
• 如何使用：
  • 页面头部像加入一个manifest的属性；
  • 在cache.manifest文件的编写离线存储的资源
  • 在离线状态时，操作window.applicationCache进行需求实现

11. 浏览器对HTML5的离线储存资源管理和加载

• 在线情况：浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
• 离线情况：浏览器就直接使用离线存储的资源。

12. cookies，sessionStorage 和 localStorage 的区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
• sessionStorage 和 localStorage自带getItem(),setItem(),removeItem()三种取值方法。

• 存储大小的区别：
  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大（localStorage：20M，sessionStorage：5M）
• 有效时间的区别：
  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

13. iframe有那些缺点？

• 阻塞主页面的 onload 事件，导致页面加载速度变慢，影响用户体验。
• 不利于 SEO：搜索引擎的爬虫程序通常不能很好地解读 iframe 内部的内容。
• 连接限制和并行加载：iframe 和主页面共享连接池，而大多数浏览器对相同域的连接数有限制。这意味着当页面中包含多个 iframe 时，浏览器需要同时处理这些连接，可能会影响页面的并行加载能力，导致页面加载速度变慢。

优化方法：可以通过 JavaScript 动态地给 iframe 添加 src 属性值，而不是在静态 HTML 中指定。

14. WEB标准以及W3C标准强调。

• 标签闭合：HTML标签必须按照规定的格式正确闭合，以确保页面结构的准确性和一致性。
• 标签小写：HTML标签和属性应该使用小写字母，以避免浏览器解析错误。
• 不乱嵌套：HTML标签应该按照正确的嵌套规则进行使用，不应该出现乱七八糟的嵌套结构，以确保页面结构的清晰和可维护性。
• 使用外链CSS和JS：将CSS样式和JavaScript代码尽可能地放在外部文件中，并通过链接的方式引入，提高代码的复用性和可维护性。

15. xhtml和html的区别?

• 功能上的差别：主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
• 书写习惯的差别：XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

xml弄出来是为了取代，html的，没成功，弄出个xhtml过度，现在w3c力推html5用来取代xhtml,xml,html4.0。

16. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?（详见第20条）

在index.html中声明<!DOCTYPE html>，声明为HTML5文档，必须写在在html文档的第一行。加上了之后会让浏览器强制使用w3c标准来解析和渲染页面。

意义：严格模式和混杂模式的意义在于确保页面在不同浏览器中的一致性和兼容性。严格模式使开发者能够使用更规范的HTML和CSS代码，减少兼容性问题。混杂模式则用于支持旧版网站，以确保这些网站在新版浏览器中能够正确显示和运行。

17. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素有：a b span img input select strong等。
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4等标题标签、p 段落标签等。
• 空元素（void元素）是指没有内容的HTML元素。常见的空元素包括：<br> 换行元素、<hr> 水平线元素、<img> 图片元素、<input> 输入框元素、<link> 样式表引用元素、<meta> 元数据元素等。
• 行内元素不可以设置宽高，不独占一行，它们会按照从左到右的顺序排列，并尽可能占据内容所需的空间。
• 块级元素可以设置宽高，独占一行，会自动换行。块级元素会在页面上以独立的块形式展现，并占据其父元素的整个宽度。

18. HTML全局属性(global attribute)有哪些？

• class:为元素设置类标识。
• data-*: 为元素增加自定义属性。
• draggable: 设置元素是否可拖拽。
• id: 元素id，文档内唯一。
• lang: 元素内容的的语言。
• style: 行内css样式。
• title: 元素相关的建议信息。

19. Canvas和SVG有什么区别？

• svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布。
• svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。

Canvas（标量）：

1. Canvas 是一个HTML5元素，用于在网页上绘制图形、动画和图像。
2. 通过使用JavaScript绘制图形，Canvas提供了一个像素级的绘图环境。
3. Canvas 绘制的是位图，它是由一系列的像素组成的，所以在放大时会出现像素失真或锯齿效应。
4. Canvas 不会保留绘图的对象，绘制完成后，图形将被保存为一张图片。
5. 由于绘制是基于像素的，Canvas 更适合处理像素级的图像处理、游戏开发等场景。
6. Canvas 不支持事件绑定，需要通过监听鼠标、键盘等事件来实现交互。

SVG（矢量）：

• SVG 是一种基于XML的矢量图形格式，用于在网页上绘制图形和图像。
• SVG 使用XML描述图形，它由一系列的矢量对象组成，可以方便地修改和操作。
• SVG 绘制的是矢量图形，它基于数学描述，可以自由缩放和变换而不会失真或产生锯齿效应。
• SVG 保留了绘图的对象，可以对其进行修改、删除和动态操作。
• 由于是矢量图形，SVG 更适合处理图表、数据可视化和可缩放的图形场景。
• SVG 支持事件绑定，可以方便地为图形元素添加交互行为。

20. HTML5 为什么只需要写 <!DOCTYPE HTML>

• HTML5 不基于 SGML（Standard Generalized Markup Language）标准，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
• 而 HTML4.01 基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。例如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。这个 DTD 提供了规范的文档结构和规则，以确保浏览器正确解析和显示文档。

21. 如何在页面上实现一个圆形的可点击区域？`

三种办法，着重看第三点

1. 使用 SVG：可以使用 SVG 元素 <circle> 创建一个圆形，添加事件监听器实现点击功能。

<svg>
  <circle cx="50" cy="50" r="50" onclick="handleClick()"></circle>
</svg>

2. 使用border-radius：设置一个具有相等宽度和高度的元素，并将 border-radius 属性设置为 50% 。

<div class="circle" onclick="handleClick()"></div>
    

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

3. 使用纯 JavaScript 实现：通过计算鼠标点击的坐标与圆心的距离，判断点击位置是否在圆形区域内。

function handleClick(event) {
  var circle = document.getElementById("circle");
  var circleRect = circle.getBoundingClientRect();//获取元素的位置和尺寸信息。
  var circleCenterX = circleRect.left + circleRect.width / 2;//计算圆心的X坐标。
  var circleCenterY = circleRect.top + circleRect.height / 2;//计算圆心的Y坐标。
  var clickX = event.clientX;//获取点击位置的X坐标。
  var clickY = event.clientY;//获取点击位置的Y坐标。
  var distance = Math.sqrt(
    Math.pow(clickX - circleCenterX, 2) + Math.pow(clickY - circleCenterY, 2)
  );（勾股定理）
  if (distance <= circleRect.width / 2) {
    // 点击在圆形区域内
    // 执行相应操作
  }
}

22. 网页验证码的作用

1. 防止恶意破解：通过要求用户输入验证码，可以防止恶意用户使用自动化程序（如暴力破解工具）对密码、账号进行不断的尝试，提高系统的安全性。
2. 防止刷票和论坛灌水：验证码可以阻止自动化程序大规模注册账号、刷票或在论坛上进行大量无意义的发帖，保护网站资源免受滥用。

23. viewport是什么东西

"Viewport"（视口）指的是用户在浏览器中可以看到的网页的部分。视口表示当前可视区域的大小，而不一定是整个网页的大小。因为网页可能会很长或很宽，用户需要滚动才能看到全部内容，但视口只是用户一次能看到的那个区域。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  // width    设置viewport宽度，为一个正整数，或字符串‘device-width’
  // device-width  设备宽度
  // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
  // initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
  // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
  // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
  // user-scalable    是否允许手动缩放

拓展：怎样处理 移动端 1px 被 渲染成 2px问题？

1. 局部处理：

• meta标签中的 viewport属性 ，initial-scale 设置为 1

• rem按照设计稿标准走，外加利用transform 的scale(0.5) 缩小一倍即可。

2. 全局处理：

• mata标签中的 viewport属性 ，initial-scale 设置为 0.5
• rem 按照设计稿标准走即可。

24. 渲染优化

跟第五条一样

25. meta viewport相关的各种用法

<!DOCTYPE html>  <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′>    <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   <!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/>       <!--页面描述-->
<meta name=”keywords” content=””/>     <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/>    <!--网页作者-->
<meta name=”robots” content=”index,follow”/>      <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”>     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name=”MobileOptimized” content=”320″>   <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”>   <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”>    <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”>              <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”>       <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”>   <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”>   <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”>    <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

26. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

基本调试都在chrome和火狐，ie真不用了所以也不了解

• IE 使用的是 Trident 内核。
• Firefox 使用的是 Gecko 内核。
• Safari 使用的是 WebKit 内核。
• Opera 在过去使用的是 Presto 内核，但现在已经改用了与 Google Chrome 相同的 Blink 内核。
• Chrome 使用的是基于 WebKit 开发的 Blink 内核。

27. 描述一下table布局是什么，怎么用，优缺点(我是基本不用，flex大法好)

1. 什么是Table布局？

Table布局是使用HTML的<table>标签及其相关标签（如<tr>、<td>等）来创建网页布局的一种方法。在早期的Web开发中，由于CSS技术尚不成熟，Table布局被广泛用于页面设计中，用以控制元素的位置和尺寸。

2. 怎么用？

<table> <tr> <td>左侧栏内容</td> <td>主要内容</td> </tr> </table> 效果就是

左侧栏内容

主要内容

3. 优缺点？

优点：table布局在早期的浏览器上表现良好，不会出现兼容性问题。对于简单的布局需求，Table可以快速实现，易于理解。很容易地强制子元素（单元格）遵守特定的尺寸。

缺点：使用Table布局往往导致大量的标签，增加了HTML文档的大小和复杂性，使得页面加载和渲染变慢。Table布局在处理更复杂的布局时（如响应式设计）变得非常笨拙和限制性。用于布局的表格可能会干扰屏幕阅读器正确解读网页内容的顺序和结构，影响可访问性。

28. strong与em的异同？

• strong: 是表示文本的重要性或紧急性的标签，通常呈现为加粗的文本样式。它用于强调内容的重要性，可以为内容赋予更大的权重。
• em: 是表示文本的强调或重要性的标签，通常呈现为斜体的文本样式。它用于更强烈地强调内容，使其在阅读时更具有突出性，但并不改变内容的含义。

29. 渐进增强和优雅降级的异同？

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强（Progressive Enhancement）通常被认为是更受欢迎和推荐的方法，特别是在Web开发社区和现代Web标准的推动下。这种方法以其对所有用户的包容性、对搜索引擎的友好性以及对多种设备和浏览器环境的良好支持获得了较广泛的认可。以下是渐进增强策略赢得更多支持的几个原因：

1. 可访问性和语义化

渐进增强强调内容的可达性，确保所有用户都能访问到网站的基本内容和功能，无论他们的设备或浏览器如何。这种方法自然促进了语义化标记的使用，从而改善了网站的可访问性。

2. 响应式设计

随着移动设备的普及，渐进增强与响应式Web设计（Responsive Web Design）紧密结合，提供了一套完整的解决方案来适应各种屏幕尺寸和设备类型。这种方法使得Web应用能够更灵活地适应不同的环境。

3. 性能优化

由于渐进增强方法首先加载基本的内容和样式，只有在浏览器支持的情况下才添加更多的功能和效果，因此它天然地倾向于更优的页面加载性能。在移动设备上，这一点尤其重要，因为网络条件可能更加多变和受限。

4. 未来兼容性

渐进增强的方法考虑到了前端技术的快速发展，通过构建一个坚实的基础，并在此基础上增加增强功能，确保网站能够适应未来技术的发展，而不需要频繁的重构。

5. 开发维护成本

虽然渐进增强可能在项目初期需要更多的规划和实施工作，但长远来看，它能够降低后期维护的复杂度和成本。因为核心功能和内容建立在一个稳定的基础上，增强功能可以根据需要逐步添加或更新。

30. 如何利用多个域名来存储网站资源？目的是什么

利用多个域名来存储网站资源，也称为域名分片，旨在通过并行化资源下载来优化网站的加载时间。这种技术的有效性主要基于HTTP/1.1协议的限制，其中浏览器对于单一域名的并发请求有数量限制（通常是6-8个）。分散资源到多个域名可以让浏览器同时从这些域名下载更多资源，从而减少页面加载时间。

好处：

• CDN缓存更方便：内容分发网络（CDN）可以更轻松地缓存和分发位于不同域名下的资源，提高资源的访问速度和可用性。
• 突破浏览器并发限制：大多数浏览器对同一域名下的并发请求数量有限制，通过将资源分布在多个域名下，可以突破这一限制，同时发送更多的并发请求，加快页面加载速度。
• 节约cookie带宽：浏览器在每个请求中都会携带相应域名下的cookie信息，通过将资源分布在不同的域名下，可以减少对cookie的传输，节约带宽和提高性能。
• 节约主域名的连接数：浏览器对同一域名下的连接数也有限制，通过将资源请求分散到多个域名下，可以减少对主域名的连接数占用，提高页面的响应速度和并发处理能力。
• 防止不必要的安全问题：将静态资源与主要网站内容分离到不同的域名下，可以降低恶意攻击者利用资源加载过程中的安全漏洞对主站点进行攻击的风险。

ps:需要注意的是，在HTTP/2的环境下，由于多路复用技术的引入，域名分片的优势不再那么显著。

31. 简述一下src与href的区别

• src属性（source）用于指定要嵌入到当前文档中的外部资源的位置。例如，<script src="script.js"></script>用于引入一个外部的JavaScript文件，或者<img src="image.jpg" alt="Image">用于显示一个外部的图像文件。浏览器在解析到带有src属性的元素时，会暂停当前文档的加载和解析，去下载并执行或显示指定的资源。
• href属性（hypertext reference）用于建立当前文档和引用资源之间的关联。它通常用于链接到其他文档或外部资源，例如<a href="https://www.example.com">Link</a>用于创建一个指向外部网页的链接，或者<link href="styles.css" rel="stylesheet">用于引入外部的CSS样式表。浏览器在解析到带有href属性的元素时，会同时进行当前文档和引用资源的加载和处理，而不会阻塞当前文档的解析。

总结来说：

• src用于替换当前元素，指向的资源会嵌入到文档中，例如脚本、图像、框架等。
• href用于建立文档与引用资源之间的链接，例如链接到其他文档或引入外部样式表。

32. 网页制作会用到的图片格式有哪些？

• 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的位图动画扩展，支持帧动画效果，但浏览器兼容性较差。

33. 从用户刷新网页开始，一次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字段，或者使用缓存代理服务器来进行缓存处理。

ps：如果同时出现Cache-Control（HTTP/1.1）和Expires（HTTP/1.0）头，Cache-Control将优先考虑。

Cache-Control可以通过多种指令来指定缓存的行为，如max-age指定资源可被缓存的最大时间，no-cache指示资源不应直接从缓存中提供而不先检查服务器，no-store完全禁止缓存。

34. 减少载入页面的时间的优化办法

• 使用图像压缩技术：通过使用图像压缩工具，如PhotoShop、TinyPNG等，将图片文件的大小减小，以减少加载时间。
• 使用适当的图像格式：根据图像的特性选择合适的图像格式，如JPEG、PNG、WebP等。JPEG适用于照片和复杂图像，而PNG适用于简单的图标和透明图像。WebP是一种现代的图像格式，可以在保持良好质量的同时减小文件大小。
• 图片CDN加速：使用内容分发网络（CDN）来加速图片的传输，将图片文件缓存到离用户更近的服务器，减少传输时间。
• 使用CSS精灵图：将多个小图标或背景图片合并为一张大图，并利用CSS的background-position来定位显示需要的部分，减少HTTP请求的数量。
• 使用矢量图形：使用矢量图形（如SVG）代替位图，以减小文件大小并保持清晰度，适用于简单的图形和图标。
• 图片懒加载、预加载：根据用户的浏览行为，提前加载下一页或下一组图片，以提高用户体验和流畅度。
• 图片缓存：设置适当的缓存策略，让浏览器在首次加载后对图片进行缓存，减少重复加载的次数。

35. 常见排序算法的时间复杂度,空间复杂度

36.什么是会话跟踪，会话跟踪的方法有哪些。

前提背景：HTTP协议是无状态的，意味着每个请求都是独立的，服务器默认情况下不会记住前一个请求的信息。这在实际应用中很不方便，因为用户在使用Web应用时，其行为通常是连续且相关的，比如在电子商务网站上浏览商品、添加商品到购物车、结账等。

为了解决这个问题，开发人员需要在服务器端或客户端保存关于用户行为的信息，确保在用户的一系列操作（即会话）中可以记住他们的选择、操作和身份。这就是"在多个请求之间维持用户的状态信息"的含义。由此产生了一系列会话追踪技术。

1. Cookies: 最常见的方法，通过在用户的设备上存储小量数据来跟踪用户身份。（缺点：存储量有限，安全性问题（如跨站脚本攻击（XSS）可以盗用Cookies）。）
2. 会话管理: 服务端生成唯一的会话ID来标识每个用户的会话，通常会通过Cookies在客户端和服务端之间传递。（存储大量数据，数据存储在服务器端，相对更安全）
3. URL重写: 把会话ID直接附在URL中，确保请求之间的关联性。（优点：不依赖Cookies，即使Cookies被禁用也能工作。）
4. 隐藏表单字段: 在表单中加入隐藏的字段来传递会话ID或其他状态信息。
5. HTML5 Web存储: 利用localStorage或sessionStorage在客户端存储状态信息。

36. HTTP请求报文

1. 干什么用的：

HTTP请求报文是在HTTP（超文本传输协议）中，客户端（如Web浏览器或API客户端）发送给服务器以请求数据或操作的标准化数据块。它是HTTP通信的基本单位之一，用于从客户端向服务器请求信息或功能。

2. 组成部分：

1. 请求行：包含了请求方法（如GET、POST等）、请求的资源的 URI 以及 HTTP 版本。例如，GET /index.html HTTP/1.1 表示客户端请求获取/index.html资源，使用的是HTTP 1.1版本。

2. 请求头：包括一系列的键值对，它们定义了请求的各种条件和属性，比如客户端能接受的响应内容类型（通过Accept字段指定）、使用的编码格式（Accept-Encoding）、当前的网页地址（Referer），以及浏览器的类型（User-Agent）等。每个头后面都有一个CRLF，即回车换行符。

3. 空行: 请求头和请求体之间必须有一个空行（即，仅包含CRLF的行），这表示请求头的结束。

4. 请求体（可选）：在某些请求方法（如POST）下，请求体包含了发送给服务器的数据。比如，当你填写一个表单并提交时，表单的内容会包含在请求体中发送到服务器。

37. title与h1的区别、b与strong的区别、i与em的区别

• title属性用于提供元素的额外信息，通常以工具提示的形式显示。它没有语义化的意义，仅表示一个标题或描述性文本。它在SEO中没有直接影响，但可以提供更好的用户体验和辅助工具提示。
• <h1>是HTML中的标题元素，用于表示页面的主标题。它具有层次结构，表示文档的结构和内容。搜索引擎通常会将<h1>标签中的文本作为页面的主要标题，并根据其重要性进行权重分配。

• <b>是用于粗体显示文本的HTML元素，仅仅表示展示的效果，没有语义上的强调意义。在使用屏幕阅读器等辅助工具阅读网页时，<b>不会改变读取方式，仅仅呈现粗体效果。
• <strong>是表示文本的强调元素，具有语义化的含义，用于强调重要内容。在屏幕阅读器等辅助工具中，会以更加强调的方式读取<strong>标签中的文本，传达给用户更强的语气。

• <i>用于将文本显示为斜体，仅表示展示的效果，没有语义上的强调意义。
• <em>表示强调的文本，具有语义化的含义，用于强调某些内容。在屏幕阅读器等辅助工具中，会以更加强调的方式读取<em>标签中的文本，传达给用户更强的强调效果。

38. Cookie的弊端

1. 数量限制：每个特定域名下的cookie数量有限。例如，旧版的IE6最多允许20个cookie，而IE7及更高版本允许50个cookie，其他浏览器也有类似的限制。
2. 大小限制：每个cookie的大小也有限制，通常为约4096字节（不同浏览器可能有差异），为了兼容性，一般建议将cookie大小控制在4095字节以内。
3. 清理策略：一些浏览器会根据策略清理过期或不常使用的cookie，这可能会导致某些数据丢失或需要重新设置。
4. 安全性问题：cookie存储在客户端，如果被恶意拦截，攻击者可以获取其中的数据，包括session信息，可能导致安全隐患。
5. 跨域限制：cookie在同源策略下工作，无法跨域访问。每个域名下的cookie只能被同域名的页面访问和修改。
6. 对网络性能的影响：cookie会增加每个请求的数据量，从而增加了网络传输的开销，尤其在请求大量静态资源的网页时，会对加载速度产生一定的影响。

要解决这些问题，可以使用其他存储方式，如localStorage或sessionStorage，使用服务器端存储来替代部分或全部cookie，或者通过其他技术手段来优化和管理cookie的使用。

39. git fetch和git pull的区别

• git pull：执行git pull命令时，Git会自动从远程仓库下载最新的提交并将其合并到当前分支。它是git fetch和git merge两个操作的组合。它会自动将远程仓库的更新合并到当前分支，并自动解决可能的冲突。一般情况下，使用git pull可以快速获取远程最新代码并合并到本地分支。
• git fetch：执行git fetch命令时，Git会从远程仓库下载最新的提交，但不会自动将其合并到当前分支。它只是将远程仓库的最新代码下载到本地，并更新本地仓库中远程分支的指针位置。这样，你可以在本地查看远程仓库的更新情况，进行代码比较或其他操作。但它不会修改你当前所在的分支。

总结：git pull是直接从远程仓库获取最新代码并合并到当前分支，而git fetch只是获取最新代码到本地，并不会自动合并。使用git pull可以更方便地获取最新代码并更新本地分支，而git fetch适合查看远程仓库的更新情况，进行代码比较或其他操作。

39.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 协议，引入了连接迁移、无队头阻塞、自定义拥塞控制和前向安全和前向纠错等新特性。

参考：blog.csdn.net/qq_29837295…