一、HTML、HTTP、WEB综合问题

1 前端需要注意哪些SEO

合理的title、description、keywords：搜索引擎对这些标签的权重逐渐减小。在title中，强调重点即可，重要关键词不要超过2次，并且要靠前。每个页面的title应该有所不同。description应该高度概括页面内容，长度适当，避免过度堆砌关键词。每个页面的description也应该有所不同。keywords标签应列举出重要关键词即可。
- 针对title标签，可以使用重要关键词、品牌词或描述页面内容的短语。确保标题简洁、准确地概括页面的主题，并吸引用户点击。
- 在编写description标签时，应尽量使用简洁、具有吸引力的语句来概括页面的内容，吸引用户点击搜索结果。避免堆砌关键词，以自然流畅的方式描述页面
- keywords标签已经不再是搜索引擎排名的重要因素，但仍然可以列举出与页面内容相关的几个重要关键词，以便搜索引擎了解页面的主题。
语义化的HTML代码，符合W3C规范：使用语义化的HTML代码可以让搜索引擎更容易理解网页的结构和内容。遵循W3C规范可以提高网页的可读性和可访问性，对SEO也有好处。
重要内容HTML代码放在最前：搜索引擎抓取HTML的顺序是从上到下，有些搜索引擎对抓取长度有限制。因此，将重要的内容放在HTML的前面，确保重要内容一定会被抓取。
重要内容不要用js输出：爬虫不会执行JavaScript，所以重要的内容不应该依赖于通过JavaScript动态生成。确保重要内容在HTML中静态存在。
少用iframe：搜索引擎通常不会抓取iframe中的内容，因此应该尽量减少iframe的使用，特别是对于重要的内容。
非装饰性图片必须加alt：为非装饰性图片添加alt属性，可以为搜索引擎提供关于图片内容的描述，同时也有助于可访问性。
提高网站速度：网站速度是搜索引擎排序的一个重要指标

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

title属性：title属性是HTML元素通用的属性，适用于各种元素，不仅仅是<img>标签。当鼠标滑动到元素上时，浏览器会显示title属性的内容，提供额外的信息或解释，帮助用户了解元素的用途或含义。对于<img>标签，鼠标悬停在图片上时会显示title属性的内容。
alt属性：alt属性是<img>标签的特有属性，用于提供图片的替代文本描述。当图片无法加载时，浏览器会显示alt属性的内容，或者在可访问性场景中，读屏器会读取alt属性的内容。alt属性的主要目的是提高图片的可访问性，使无法查看图片的用户也能了解图片的内容或含义。除了纯装饰性图片外，所有<img>标签都应该设置有意义的alt属性值。
补充答案：
- title属性主要用于提供额外的信息或提示，是对图片的补充描述，可以用于提供更详细的说明，如图片的来源、作者、相关信息等。它不是必需的，但可以增强用户体验，特别是在需要显示更多信息时。
- alt属性是图片内容的等价描述，应该简洁明了地描述图片所表达的信息。它对于可访问性至关重要，确保无障碍用户能够理解图片的含义，同时也是搜索引擎重点分析的内容。在设置alt属性时，应该避免过度堆砌关键词，而是提供准确、有意义的描述。

3 HTTP的几种请求方法用途

GET方法：
- 用途：发送一个请求来获取服务器上的某一资源。
- 面试可能涉及的问题：
  1. GET方法的特点是什么？
    - GET方法是HTTP的一种请求方法，用于从服务器获取资源。
    - 它是一种幂等的方法，多次发送相同的GET请求会返回相同的结果。
  2. GET请求和POST请求的区别是什么？
    - GET请求将参数附加在URL的查询字符串中，而POST请求将参数放在请求体中。
    - GET请求的数据会显示在URL中，而POST请求的数据不会显示在URL中。
    - GET请求一般用于获取数据，而POST请求一般用于提交数据。
  3. GET请求可以有请求体吗？
    - 根据HTTP规范，GET请求不应该有请求体，参数应该通过URL的查询字符串传递。
  4. GET请求的参数如何传递？
    - GET请求的参数可以通过URL的查询字符串传递，例如：/api/users?id=123&name=poetry。
  5. GET请求的安全性和幂等性如何保证？
    - GET请求不会对服务器端的资源产生副作用，因此被视为安全的。
    - GET请求是幂等的，多次发送相同的GET请求不会对服务器端产生影响。
POST方法：
- 用途：向URL指定的资源提交数据或附加新的数据。
- 面试可能涉及的问题：
  1. POST方法的特点是什么？
    - POST方法是HTTP的一种请求方法，用于向服务器提交数据。
    - 它不是幂等的，多次发送相同的POST请求可能会产生不同的结果。
  2. POST请求和GET请求的区别是什么？
    - POST请求将参数放在请求体中，而GET请求将参数附加在URL的查询字符串中。
    - POST请求的数据不会显示在URL中，而GET请求的数据会显示在URL中。
    - POST请求一般用于提交数据，而GET请求一般用于获取数据。
  3. POST请求的请求体如何传递数据？
    - POST请求的数据可以通过请求体以表单形式传递，或者以JSON等格式传递。
  4. POST请求的安全性和幂等性如何保证？
    - POST请求可能对服务器端的资源产生副作用，因此被视为不安全的。
    - POST请求不是幂等的，多次发送相同的POST请求可能会对服务器端产生影响。
PUT方法：
- 用途：将数据发送给服务器，并将其存储在指定的URL位置。与POST方法不同的是，PUT方法指定了资源在服务器上的位置。
- 面试可能涉及的问题：
  - PUT方法的特点是什么？
    - PUT方法是HTTP的一种请求方法，用于将数据发送给服务器并存储在指定的URL位置。
    - 它是一种幂等的方法，多次发送相同的PUT请求会对服务器端产生相同的结果。
  - PUT请求和POST请求有什么区别？
    - PUT请求用于指定资源在服务器上的位置，而POST请求没有指定位置。
    - PUT请求一般用于更新或替换资源，而POST请求一般用于新增资源或提交数据。
  - PUT请求的幂等性如何保证？
    - PUT请求的幂等性保证是由服务器端实现的。
    - 服务器端应该根据请求中的资源位置来处理请求，多次发送相同的PUT请求会对该位置上的资源进行相同的更新或替换操作。
HEAD方法
- 只请求页面的首部
DELETE方法
- 删除服务器上的某资源
OPTIONS方法
- 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
TRACE方法
- TRACE方法被用于激发一个远程的，应用层的请求消息回路
CONNECT方法
- 把请求连接转换到透明的TCP/IP通道

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

基础版本

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

详细版

在浏览器地址栏输入URL
浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤 1. 如果资源未缓存，发起新请求 2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。 3. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
- HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
- HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析URL 获取协议，主机，端口，path
浏览器组装一个HTTP（GET）请求报文
浏览器获取主机ip地址 ，过程如下： 1. 浏览器缓存 2. 本机缓存 3. hosts文件 4. 路由器缓存 5. ISP DNS缓存 6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
打开一个socket与目标IP地址，端口建立TCP链接 ，三次握手如下： 1. 客户端发送一个TCP的SYN=1，Seq=X 的包到服务器端口 2. 服务器发回SYN=1， ACK=X+1， Seq=Y 的响应包 3. 客户端发送ACK=Y+1， Seq=Z
TCP链接建立后发送HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息 如果验证缓存新鲜，返回304 等对应状态码
处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
服务器将响应报文通过TCP连接发送回浏览器
浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下 ： 1. 主动方发送Fin=1， Ack=Z， Seq= X 报文 2. 被动方发送ACK=X+1， Seq=Z 报文 3. 被动方发送Fin=1， ACK=X， Seq=Y 报文 4. 主动方发送ACK=Y， Seq=X 报文
浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
如果资源可缓存，进行缓存
对响应进行解码（例如gzip压缩）
根据资源类型决定如何处理（假设资源为HTML文档）
解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本 ，这些操作没有严格的先后顺序，以下分别解释
构建DOM树 ： 1. Tokenizing ：根据HTML规范将字符流解析为标记 2. Lexing ：词法分析将标记转换为对象并定义属性和规则 3. DOM construction ：根据HTML标记关系将对象组成DOM树
解析过程中遇到图片、样式表、js文件，启动下载
构建CSSOM树 ： 1. Tokenizing ：字符流转换为标记流 2. Node ：根据标记创建节点 3. CSSOM ：节点创建CSSOM树
根据DOM树和CSSOM树构建渲染树 (opens new window): 1. 从DOM树的根节点遍历所有可见节点 ，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none 2. 对每一个可见节点，找到恰当的CSSOM规则并应用 3. 发布可视节点的内容和计算样式
js解析如下 ： 1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading 2. HTML解析器遇到没有async和defer的script时 ，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容 3. 当解析器遇到设置了async 属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行 ，但是解析器不会停下来等它下载 。异步脚本禁止使用document.write() ，它们可以访问自己script和之前的文档元素 4. 当文档完成解析，document.readState变成interactive 5. 所有defer 脚本会按照在文档出现的顺序执行 ，延迟脚本能访问完整文档树 ，禁止使用document.write() 6. 浏览器在Document对象上触发DOMContentLoaded事件 7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行 ，document.readState变为complete，window触发load事件
显示页面 （HTML解析过程中会逐步显示页面）

详细简版

从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
开启网络线程到发出一个完整的HTTP请求（这一部分涉及到dns查询，TCP/IP请求，五层因特网协议栈等知识）
从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
后台和前台的HTTP交互（这一部分包括HTTP头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
单独拎出来的缓存问题，HTTP的缓存（这部分包括http缓存头部，ETag，catch-control等）
浏览器接收到HTTP数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和DOMContentLoaded等）
CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）

5 如何进行网站性能优化

content方面
- 减少HTTP请求：合并文件、CSS精灵、inline Image
- 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
- 减少DOM元素数量
Server方面
- 使用CDN
- 配置ETag
- 对组件使用Gzip压缩
Cookie方面
- 减小cookie大小
css方面
- 将样式表放到页面顶部
- 不使用CSS表达式
- 使用<link>不使用@import
Javascript方面
- 将脚本放到页面底部
- 将javascript和css从外部引入
- 压缩javascript和css
- 删除不需要的脚本
- 减少DOM访问
图片方面
- 优化图片：根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片

你有用过哪些前端性能优化的方法？

减少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

前端性能优化最佳实践？

性能评级工具（PageSpeed 或 YSlow）
合理设置 HTTP 缓存：Expires 与 Cache-control
静态资源打包，开启 Gzip 压缩（节省响应流量）
CSS3 模拟图像，图标base64（降低请求数）
模块延迟(defer)加载/异步(async)加载
Cookie 隔离（节省请求流量）
localStorage（本地存储）
使用 CDN 加速（访问最近服务器）
启用 HTTP/2（多路复用，并行加载）
前端自动化（gulp/webpack）

6 HTTP状态码及其含义

1XX：信息状态码
- 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
- 200 OK 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
- 301 Moved Permanently 请求的网页已永久移动到新位置。
- 302 Found 临时性重定向。
- 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
- 304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
- 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
- 401 Unauthorized 请求未授权。
- 403 Forbidden 禁止访问。
- 404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
- 500 Internal Server Error 最常见的服务器端错误。
- 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

7 语义化的理解

语义化是指在编写HTML和CSS代码时，通过恰当的选择标签和属性，使得代码更具有语义性和可读性，使得页面结构和内容更加清晰明了。语义化的目的是让页面具备良好的可访问性、可维护性和可扩展性。

语义化的重要性体现在以下几个方面：

可访问性（Accessibility） ：通过使用恰当的标签和属性，可以提高页面的可访问性，使得辅助技术（如屏幕阅读器）能够更好地理解和解析页面内容，使得残障用户能够正常浏览和使用网页。
搜索引擎优化（SEO） ：搜索引擎更喜欢能够理解和解析的页面内容，语义化的HTML结构可以提高页面在搜索引擎结果中的排名，增加网页的曝光和访问量。
代码可读性和可维护性 ：使用语义化的标签和属性，可以让代码更易于阅读和理解，提高代码的可维护性。开发人员可以更快速地定位和修改特定功能或内容。
设备兼容性 ：不同设备和平台对于网页的渲染和解析方式有所不同，语义化的代码可以增加网页在各种设备上的兼容性，确保页面在不同环境中的正确显示和使用。

语义化在前端开发中的具体表现和实践包括以下几个方面：

选择合适的HTML标签 ：在构建页面结构时，选择恰当的HTML标签来描述内容的含义。例如，使用<header>表示页面的页眉，<nav>表示导航栏，<article>表示独立的文章内容等。
使用有意义的标签和属性 ：避免滥用<div>标签，而是选择更具语义的标签来表达内容的含义。同时，合理使用标签的属性，如alt属性用于图像的替代文本，title属性用于提供额外的信息等。
结构和层次化 ：通过正确嵌套和组织HTML元素，构建清晰的页面结构和层次关系。使用语义化的父子关系，让内容的层级关系更加明确，便于样式和脚本的编写和维护。
文本格式化 ：使用合适的标签和属性来标记文本的格式和语义。例如，使用<strong>标签表示重要文本，<em>标签表示强调文本，<blockquote>标签表示引用文本等。
无障碍支持 ：考虑到残障用户的需求，使用语义化的标签和属性可以提高页面的可访问性。例如，为表格添加适当的表头和描述信息，为表单元素关联标签等。
CSS选择器的语义化 ：在编写CSS样式时，尽量使用具有语义的类名和ID，避免过于依赖元素标签选择器，以增强样式的可读性和可维护性。

通过遵循语义化的原则，我们能够构建出更具有可读性、可访问性和可维护性的前端代码，提高用户体验和开发效率。同时，也能够使网页在不同的环境和设备上保持一致的表现，增强网站的可持续性和可扩展性。

总结

用正确的标签做正确的事情！
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

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

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

渲染引擎：渲染引擎负责解析网页的 HTML、XML、图像等内容，并将其转换为可视化的网页形式展示给用户。它负责处理网页的布局、样式计算、绘制等任务。不同浏览器的内核对网页的解释和渲染方式可能会有差异，因此不同浏览器的渲染效果也会有所不同。常见的渲染引擎包括：
- WebKit：主要用于 Safari 和 Chrome 浏览器。
- Gecko：主要用于 Firefox 浏览器。
- Trident：主要用于旧版本的 Internet Explorer 浏览器。
- Blink：基于 WebKit，用于 Chrome、Opera 和部分 Chromium 浏览器。
JavaScript 引擎：JavaScript 引擎负责解析和执行网页中的 JavaScript 代码，实现网页的动态交互和功能。不同浏览器的 JavaScript 引擎性能和特性也可能存在差异。常见的 JavaScript 引擎包括：
- V8：用于 Chrome 和 Opera 浏览器，具有高性能和快速执行速度。
- SpiderMonkey：用于 Firefox 浏览器。
- JavaScriptCore：用于 Safari 浏览器。

在早期，渲染引擎和 JavaScript 引擎没有明确的分离，它们在同一个内核中工作。随着时间的推移，JavaScript 引擎逐渐独立出来，使内核更专注于页面渲染和布局方面的任务。
理解浏览器内核对于前端开发人员非常重要，因为不同的内核可能会对网页的解释和渲染产生影响，从而影响页面的布局、样式和交互效果。在开发过程中，需要考虑不同浏览器内核的差异，并进行兼容性测试和优化，以确保网页在不同浏览器上都能正确显示和运行。

9 html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 新增选择器 document.querySelector、document.querySelectorAll
- 拖拽释放(Drag and drop) API
- 媒体播放的 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 离线应用 manifest
- 桌面通知 Notifications
- 语意化标签 article、footer、header、nav、section
- 增强表单控件 calendar、date、time、email、url、search
- 地理位置 Geolocation
- 多任务 webworker
- 全双工通信协议 websocket
- 历史管理 history
- 跨域资源共享(CORS) Access-Control-Allow-Origin
- 页面可见性改变事件 visibilitychange
- 跨窗口通信 PostMessage
- Form Data 对象
- 绘画 canvas
移除的元素：
- 纯表现的元素：basefont、big、center、font、 s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes
支持HTML5新标签：
- IE8/IE7/IE6支持通过document.createElement方法产生的标签
- 可以利用这一特性让这些浏览器支持HTML5新标签
- 浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如html5shim

如何区分 HTML 和 HTML5

DOCTYPE声明、新增的结构元素、功能元素

10 `HTML5`的离线储存怎么使用，工作原理能不能解释一下？

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

    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    /offline.html

11 浏览器是怎么对`HTML5`的离线储存资源进行管理和加载的呢

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

12 请描述一下 `cookies`，`sessionStorage` 和 `localStorage` 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
- cookie数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

补充（现代做法）：涉及登录态的 cookie 应加上安全属性——HttpOnly（禁止 JS 读取，防 XSS 窃取）、Secure（仅 HTTPS 传输）、SameSite=Lax/Strict（防 CSRF，现代浏览器默认 Lax）。前端纯客户端存储更推荐 localStorage / sessionStorage，结构化大数据用 IndexedDB；敏感凭证不要放 localStorage（同样会被 XSS 读到），交给 HttpOnly cookie 或内存保存。

13 iframe有那些缺点？

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

阻塞主页面的 onload 事件：当页面中存在 iframe 时，iframe 的加载会阻塞主页面的 onload 事件触发。这可能会导致页面加载速度变慢，影响用户体验。
不利于 SEO：搜索引擎的爬虫程序通常不能很好地解读 iframe 内部的内容。因此，如果重要的页面内容被放置在 iframe 中，搜索引擎可能无法正确地索引和收录这些内容，从而影响网页的搜索引擎优化（SEO）。
连接限制和并行加载：iframe 和主页面共享连接池，而大多数浏览器对相同域的连接数有限制。这意味着当页面中包含多个 iframe 时，浏览器需要同时处理这些连接，可能会影响页面的并行加载能力，导致页面加载速度变慢。

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

尽量避免使用 iframe，特别是在主要内容部分。
如果必须使用 iframe，可以通过 JavaScript 动态地给 iframe 添加 src 属性值，而不是在静态 HTML 中指定。这样可以绕开阻塞主页面的 onload 事件。对于需要被搜索引擎索引的重要内容，避免将其放置在 iframe 中。
考虑使用其他替代方案，如 AJAX 加载内容或使用现代的前端框架来实现类似的效果。
总之，iframe 在某些场景下可以提供方便，但在使用时需要注意其缺点，并根据具体情况进行权衡和选择。

14 WEB标准以及W3C标准是什么?

WEB标准是指由万维网联盟（World Wide Web Consortium，简称W3C）制定的一系列技术规范和指南，旨在确保网页在不同的浏览器和设备上具有一致的表现和行为。这些标准涵盖了HTML、CSS、JavaScript等前端技术，并规定了它们的语法、结构、样式以及交互行为等方面的规范。

W3C标准是由W3C组织制定和推广的一系列技术标准，旨在推动网络技术的发展和互操作性。W3C是一个国际性的标准化组织，由互联网行业的各大公司、研究机构和个人组成，致力于制定并推广互联网的开放标准。W3C标准包括HTML、CSS、XML、DOM、SVG等多个技术领域，并且不断更新和演进，以适应新的需求和技术发展。

具体来说，WEB标准和W3C标准强调以下几个方面：

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

通过遵循这些标准和规范，开发人员可以编写出更加规范、可靠和跨平台的网页，确保网页在不同的浏览器和设备上得到一致的显示和行为，提供更好的用户体验。此外，遵循WEB标准和W3C标准还有助于网页的可访问性、可维护性和可扩展性，同时推动互联网技术的进步和发展。

15 xhtml和html有什么区别?

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

16 Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

DOCTYPE（文档类型声明）的作用是告知浏览器的解析器使用哪种HTML或XHTML规范来解析文档。
严格模式（标准模式）是指浏览器按照HTML或XHTML的规范严格解析和渲染页面，以确保页面在不同浏览器中具有一致的展示效果和行为。在严格模式下，浏览器会按照规范要求的方式处理HTML和CSS代码。
混杂模式（怪异模式或兼容模式）是指浏览器使用较宽松的解析方式来渲染页面，以模拟旧式浏览器的行为，以保证旧版网站的兼容性。在混杂模式下，浏览器可能会容忍一些不符合规范的HTML和CSS`代码，导致页面展示和行为在不同浏览器中有差异。
通过DOCTYPE声明的类型来区分严格模式和混杂模式。当DOCTYPE声明为严格的HTML或XHTML规范时，浏览器会进入严格模式；当DOCTYPE声明缺失或格式不正确时，浏览器会进入混杂模式。
严格模式和混杂模式的意义在于确保页面在不同浏览器中的一致性和兼容性。严格模式使开发者能够使用更规范的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> 元数据元素等。
行内元素不可以设置宽高，不独占一行，它们会按照从左到右的顺序排列，并尽可能占据内容所需的空间。
块级元素可以设置宽高，独占一行，会自动换行。块级元素会在页面上以独立的块形式展现，并占据其父元素的整个宽度。

请注意，这是以Markdown源文件格式输出的回答，不会解析Markdown内容。

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

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

19 Canvas和SVG有什么区别？

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

你对Canvas和SVG的区别的描述是正确的。以下是对Canvas和SVG的更详细解释：

Canvas：

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

SVG：

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

综上所述，Canvas适用于像素级绘图和动画，而SVG适用于矢量图形和可缩放的图像。选择使用Canvas还是SVG取决于具体的需求和场景。

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

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

下面是对此进行更详细的解释：

在 HTML5 中，不再基于 SGML（Standard Generalized Markup Language）标准，而是定义了自己的独立规范。由于不再使用 SGML，因此不需要引用外部的 DTD（文档类型定义）来验证文档的结构和规则。
因此，HTML5 只需要简单地使用 <!DOCTYPE HTML> 声明，它是一个标准模式的声明，告诉浏览器当前文档遵循的是 HTML5 规范。这样，浏览器就可以根据 HTML5 规范来解析和渲染文档，而无需引用外部的 DTD。
相比之下，HTML4.01 基于 SGML 标准，需要通过 <!DOCTYPE> 声明来指定所使用的 DTD，例如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。这个 DTD 提供了规范的文档结构和规则，以确保浏览器正确解析和显示文档。
HTML5 的简化 <!DOCTYPE HTML> 声明的设计，使得创建和编写 HTML 文档更加简单和直观。此外，这也有助于提高浏览器的兼容性，因为所有的浏览器都会将文档解析为 HTML5，无需根据 DTD 进行选择和适配。
总结起来，HTML5 不再依赖 SGML，因此不需要引用外部 DTD，只需使用简单的 <!DOCTYPE HTML> 声明来指定文档类型，规范浏览器的行为。

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

有几种方法可以实现一个圆形的可点击区域：

使用 SVG（可缩放矢量图形）：可以使用 SVG 元素 <circle> 创建一个圆形，并通过添加事件监听器实现点击功能。

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

使用 CSS border-radius：通过设置一个具有相等宽度和高度的元素，并将 border-radius 属性设置为 50% 可以创建一个圆形区域

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

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

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

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

    #circle {
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
    }

    function handleClick(event) {
      var circle = document.getElementById("circle");
      var circleRect = circle.getBoundingClientRect();
      var circleCenterX = circleRect.left + circleRect.width / 2;
      var circleCenterY = circleRect.top + circleRect.height / 2;
      var clickX = event.clientX;
      var clickY = event.clientY;
      var distance = Math.sqrt(
        Math.pow(clickX - circleCenterX, 2) + Math.pow(clickY - circleCenterY, 2)
      );
      if (distance <= circleRect.width / 2) {
        // 点击在圆形区域内
        // 执行相应操作
      }
    }

22 网页验证码是干嘛的，是为了解决什么安全问题

网页验证码（CAPTCHA）的作用是用于区分用户是计算机还是人的公共全自动程序。它主要解决以下安全问题：

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

通过要求用户正确地输入验证码，可以验证用户的身份，确保其为真实的人类用户，而不是自动化程序或恶意攻击者。验证码通常会显示一张包含随机字符、数字或图形的图片，用户需要根据图片中的内容进行识别并输入正确的答案。

这样，网页验证码有效地提高了网站和应用程序的安全性，防止了各种恶意行为的发生。

23 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问题？

局部处理

meta标签中的 viewport属性，initial-scale 设置为 1
rem按照设计稿标准走，外加利用transform 的scale(0.5) 缩小一倍即可；

全局处理

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

24 渲染优化

禁止使用iframe（阻塞父文档onload事件）
- iframe会阻塞主页面的Onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
- 动态给iframe添加src属性值，这样可以绕开以上两个问题
禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）
使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）
对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU
- 小图标优势在于
  - 减少HTTP请求
  - 避免文件跨域
  - 修改及时生效
页面头部的<style></style> <script></script> 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）
页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)
网页gzip，CDN托管，data缓存，图片服务器
前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO

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 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

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

这些浏览器内核的不同决定了它们在渲染网页时的行为和特性支持。在开发和测试网页时，通常需要在不同的浏览器上进行测试，以确保网页在不同内核的浏览器上都能正确显示和运行。

27 div+css的布局较table布局有什么优点？

改版的时候更方便只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

28 a：img的alt与title有何异同？b：strong与em的异同？

alt(alt text): 用于为不能显示图像、窗体或applets的用户代理（UA）提供替代文字。它由lang属性指定替代文字的语言。在某些浏览器中，当没有title属性时，会将alt属性作为工具提示（tooltip）显示。
title(tool tip): 用于为元素提供额外的提示信息，当鼠标悬停在元素上时显示。它提供了一种向用户解释元素用途或提供有关元素的补充信息的方式。

b：strong与em的异同？

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

注意：strong和em都是语义化标签，用于表示文本的语义和重要性，而不仅仅是样式上的改变。

29 你能描述一下渐进增强和优雅降级之间的不同吗

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

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

30 为什么利用多个域名来存储网站资源会更有效？

利用多个域名来存储网站资源可以带来以下好处：

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

综上所述，通过利用多个域名来存储网站资源，可以提升网站的性能、安全性和用户体验。

31 简述一下src与href的区别

src和href是HTML中两个常见的属性，它们有以下区别：

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用于建立文档与引用资源之间的链接，例如链接到其他文档或引入外部样式表。

注意：尽管它们的用途不同，但在实际使用时，需要根据元素的类型和需求正确地选择使用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的位图动画扩展，支持帧动画效果，但浏览器兼容性较差。

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

33 在CSS/JS代码上线之后，开发人员经常会优化性能。从用户刷新网页开始，一次JS请求一般情况下有哪些地方会有缓存处理？

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

DNS缓存 ：浏览器会缓存已解析的域名和对应的IP地址，这样在下次请求同一域名时可以直接使用缓存的IP地址，避免重新进行DNS解析。
CDN缓存 ：如果使用了内容分发网络（CDN），CDN会缓存静态资源文件，如CSS和JS文件，以便快速地分发给用户。当用户再次请求同一资源时，可以从CDN缓存中获取，减少向源服务器的请求次数。
浏览器缓存 ：浏览器会缓存已请求的静态资源文件，如CSS和JS文件。可以通过设置HTTP响应头中的Cache-Control和Expires字段来控制浏览器缓存的行为。如果设置了适当的缓存策略，浏览器在下次请求同一资源时可以直接从本地缓存中获取，而不需要再次向服务器请求。
服务器缓存 ：服务器可以对动态生成的JS文件进行缓存，以避免重复生成相同的响应。服务器可以通过设置响应头中的Cache-Control和Expires字段，或者使用缓存代理服务器来进行缓存处理。

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

33 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

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

综合应用这些优化技术可以减小图片的加载大小和加载时间，提升网页的加载速度，给用户更好的体验。

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

下面是一些常见的排序算法及其时间复杂度和空间复杂度的概述：

冒泡排序（Bubble Sort）：

时间复杂度：最好情况下O(n)，平均和最坏情况下O(n^2)
空间复杂度：O(1)

插入排序（Insertion Sort）：

时间复杂度：最好情况下O(n)，平均和最坏情况下O(n^2)
空间复杂度：O(1)

选择排序（Selection Sort）：

时间复杂度：最好情况下O(n^2)，平均和最坏情况下O(n^2)
空间复杂度：O(1)

快速排序（Quick Sort）：

时间复杂度：最好情况下O(nlogn)，平均情况下O(nlogn)，最坏情况下O(n^2)
空间复杂度：最好情况下O(logn)，平均和最坏情况下O(n)

归并排序（Merge Sort）：

时间复杂度：最好情况下O(nlogn)，平均情况下O(nlogn)，最坏情况下O(nlogn)
空间复杂度：O(n)

堆排序（Heap Sort）：

时间复杂度：最好情况下O(nlogn)，平均情况下O(nlogn)，最坏情况下O(nlogn)
空间复杂度：O(1)

希尔排序（Shell Sort）：

时间复杂度：取决于所选的间隔序列，最好情况下O(nlogn)，平均和最坏情况下根据间隔序列的选择而不同
空间复杂度：O(1)

计数排序（Counting Sort）：

时间复杂度：最好情况下O(n+k)，平均和最坏情况下O(n+k)
空间复杂度：O(k)，其中 k 是计数范围

桶排序（Bucket Sort）：

时间复杂度：最好情况下O(n+k)，平均和最坏情况下根据桶的数量和排序算法的选择而不同
空间复杂度：O(n+k)

基数排序（Radix Sort）：

时间复杂度：最好情况下O(nk)，平均和最坏情况下O(nk)
空间复杂度：O(n+k)

35 web开发中会话跟踪的方法有哪些

Cookie : 使用Cookie是最常见的会话跟踪方法之一。服务器在响应中设置一个包含会话ID的Cookie，然后在后续的请求中，浏览器会自动将该Cookie发送回服务器，以标识用户的会话。
Session : 服务器使用会话来跟踪用户的状态。每个会话都会分配一个唯一的会话ID，该ID通常存储在Cookie中或通过URL重写传递给服务器。服务器使用会话ID来关联用户的请求，并在服务器端存储会话数据。
URL重写 : 将会话ID作为查询参数添加到URL中，以便在每个请求中传递会话信息。这种方法不需要依赖Cookie，适用于禁用Cookie的情况，但会增加URL的长度并暴露会话信息。
隐藏input : 在表单中添加一个隐藏的input字段，将会话ID作为其值传递给服务器。服务器接收到请求时可以通过解析请求参数获取会话ID，以进行会话跟踪。
IP地址 : 使用客户端的IP地址作为会话跟踪的依据。服务器根据不同的IP地址来区分不同的用户，并跟踪他们的会话状态。然而，由于多个用户可能共享相同的IP地址（如在同一局域网内），这种方法可能不准确。

这些方法可以单独或结合使用，根据实际需求和安全考虑选择适当的会话跟踪方法。

36 HTTP request报文结构是怎样的

首行是Request-Line 包括：请求方法 ，请求URI ，协议版本 ，CRLF
首行之后是若干行请求头 ，包括general-header ，request-header 或者entity-header ，每个一行以CRLF结束
请求头和消息实体之间有一个CRLF分隔
根据实际请求需要可能包含一个消息实体 一个请求报文例子如下：

    GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
    Host: www.w3.org
    Connection: keep-alive
    Cache-Control: max-age=0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
    Referer: https://www.google.com.hk/
    Accept-Encoding: gzip,deflate,sdch
    Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
    Cookie: authorstyle=yes
    If-None-Match: "2cc8-3e3073913b100"
    If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT
    
    name=qiu&age=25

37 HTTP response报文结构是怎样的

首行是状态行包括：HTTP版本，状态码，状态描述 ，后面跟一个CRLF
首行之后是若干行响应头 ，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个CRLF空行 分隔
最后是一个可能的消息实体

响应报文例子如下：

    HTTP/1.1 200 OK
    Date: Tue, 08 Jul 2014 05:28:43 GMT
    Server: Apache/2
    Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
    ETag: "40d7-3e3073913b100"
    Accept-Ranges: bytes
    Content-Length: 16599
    Cache-Control: max-age=21600
    Expires: Tue, 08 Jul 2014 11:28:43 GMT
    P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
    Content-Type: text/html; charset=iso-8859-1
    
    {"name": "qiu", "age": 25}

38 title与h1的区别、b与strong的区别、i与em的区别

title属性用于提供元素的额外信息，通常以工具提示的形式显示。它没有语义化的意义，仅表示一个标题或描述性文本。它在SEO中没有直接影响，但可以提供更好的用户体验和辅助工具提示。
<h1>是HTML中的标题元素，用于表示页面的主标题。它具有层次结构，表示文档的结构和内容。搜索引擎通常会将<h1>标签中的文本作为页面的主要标题，并根据其重要性进行权重分配。
<b>是用于粗体显示文本的HTML元素，仅仅表示展示的效果，没有语义上的强调意义。在使用屏幕阅读器等辅助工具阅读网页时，<b>不会改变读取方式，仅仅呈现粗体效果。
<strong>是表示文本的强调元素，具有语义化的含义，用于强调重要内容。在屏幕阅读器等辅助工具中，会以更加强调的方式读取<strong>标签中的文本，传达给用户更强的语气。
<i>用于将文本显示为斜体，仅表示展示的效果，没有语义上的强调意义。
<em>表示强调的文本，具有语义化的含义，用于强调某些内容。在屏幕阅读器等辅助工具中，会以更加强调的方式读取<em>标签中的文本，传达给用户更强的强调效果。

总结：

<title>和<h1>在语义化和SEO方面有区别，一个用于页面标题，一个用于内容标题。
<b>和<strong>都可以用于加粗文本，但<strong>具有语义化的强调效果。
<i>和<em>都可以用于斜体文本，但<em>具有语义化的强调效果。

39 请你谈谈Cookie的弊端

cookie虽然在存储客户端数据方面提供了方便，并减轻了服务器的负担，但它也存在一些弊端和限制，包括：

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

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

40 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适合查看远程仓库的更新情况，进行代码比较或其他操作。

41 http2.0 做了哪些改进 http3.0 呢

HTTP/2 的特性包括：

二进制分帧传输 ：将请求和响应消息分割为多个二进制帧，可以并发地发送和处理，提高传输效率。
多路复用 ：在单个连接上可以同时发送多个请求和响应，避免了建立多个 TCP 连接的开销，提高并发性能。
头部压缩 ：使用 HPACK 算法对请求和响应的头部进行压缩，减少数据传输量，提高性能。
服务器推送 ：服务器可以主动推送与当前页面相关的资源，减少客户端的请求延迟。

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

连接迁移 ：支持在网络切换或设备漫游时无缝迁移连接，避免连接中断。
无队头阻塞 ：解决了 TCP 协议中的队头阻塞问题，可以同时发送多个请求和响应，提高并发性能。
自定义拥塞控制 ：使用独立的拥塞控制算法，适应不同网络条件下的流量控制和拥塞控制。
前向安全和前向纠错 ：支持端到端的加密和纠错机制，提高数据传输的安全性和可靠性。

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

详情