基础篇

前端基础题型，快速过一遍即可

一、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）；
• 载入解析到的资源文件，渲染页面，完成。

详细版

1. 在浏览器地址栏输入URL
2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
   1. 如果资源未缓存，发起新请求
   2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
   3. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
      • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个HTTP（GET）请求报文
5. 浏览器获取主机ip地址，过程如下：
   1. 浏览器缓存
   2. 本机缓存
   3. hosts文件
   4. 路由器缓存
   5. ISP DNS缓存
   6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   3. 客户端发送ACK=Y+1， Seq=Z
7. TCP链接建立后发送HTTP请求
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将响应报文通过TCP连接发送回浏览器
12. 浏览器接收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报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，进行缓存
15. 对响应进行解码（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
18. 构建DOM树：
    1. Tokenizing：根据HTML规范将字符流解析为标记
    2. Lexing：词法分析将标记转换为对象并定义属性和规则
    3. DOM construction：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，启动下载
20. 构建CSSOM树：
    1. Tokenizing：字符流转换为标记流
    2. Node：根据标记创建节点
    3. CSSOM：节点创建CSSOM树
21. 根据DOM树和CSSOM树构建渲染树:
    1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
22. 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事件
23. 显示页面（HTML解析过程中会逐步显示页面）

详细简版

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等）
7. CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
8. JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
9. 其它（可以拓展不同的知识模块，如跨域，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代码时，通过恰当的选择标签和属性，使得代码更具有语义性和可读性，使得页面结构和内容更加清晰明了。语义化的目的是让页面具备良好的可访问性、可维护性和可扩展性。

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

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

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

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

cookies、sessionStorage 和 localStorage 都是在 Web 开发中用于在客户端存储数据的技术，但它们在以下方面存在区别：

存储容量

• cookies：通常存储容量较小，一般限制在4KB左右。
• sessionStorage：存储容量比 cookies 大，不同浏览器的限制有所不同，但一般可以存储5MB或更多的数据。
• localStorage：存储容量也较大，通常和 sessionStorage 相近，能满足大多数 Web 应用的存储需求。

数据有效期

• cookies：可以设置过期时间，若不设置，默认在浏览器关闭时失效。如果设置了过期时间，那么在过期时间之前，cookies 会一直存在于客户端，即使浏览器关闭后重新打开也依然有效。
• sessionStorage：数据仅在当前会话期间有效，当浏览器窗口关闭时，sessionStorage 中的数据会被自动清除。
• localStorage：数据没有自动过期时间，除非主动删除，否则数据会一直保存在客户端，即使浏览器关闭、电脑重启，数据依然存在。

作用域

• cookies：在同域名下的不同页面之间可以共享，但如果设置了 Path 属性，那么只有在指定路径下的页面才能访问该 cookie。此外，cookies 还可以通过设置 Domain 属性在不同子域名之间共享。
• sessionStorage：具有严格的页面级作用域，即只有在同一个浏览器窗口（或标签页）中打开的页面才能共享 sessionStorage 中的数据。不同浏览器窗口或标签页之间无法访问彼此的 sessionStorage 数据，即使它们来自同一个域名。
• localStorage：在同域名下的所有页面都可以共享 localStorage 中的数据，只要是在同一个浏览器中访问该域名，无论在哪个页面存储的数据，其他页面都可以读取和修改。

与服务器的交互

• cookies：每次向服务器发送请求时，浏览器会自动将同域名下的 cookies 发送到服务器，这可能会增加不必要的网络传输开销，尤其是当 cookies 数据量较大时。
• sessionStorage 和 localStorage：数据仅存储在客户端，不会自动发送到服务器。如果需要与服务器进行数据交互，需要通过 Ajax 等方式手动将数据发送到服务器。

应用场景

• cookies：常用于存储用户登录状态、购物车信息、用户偏好设置等。由于其会在每次请求时发送到服务器，所以也可以用于在客户端和服务器之间传递一些少量的必要信息。
• sessionStorage：适合存储一些临时数据，例如在一个多步骤的表单填写过程中，存储用户在当前页面填写的数据，当用户完成整个流程或关闭页面时，这些数据就不再需要了。
• localStorage：用于长期存储用户相关的数据，如用户的配置信息、离线缓存数据等。例如，一个 Web 应用可以将一些常用的静态资源存储在 localStorage 中，以便在离线状态下仍然能够访问应用的部分功能。

13 iframe有那些缺点？

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

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

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

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

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

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请求时，可以在以下几个地方进行缓存处理，以提高性能和减少资源加载时间：

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

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

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

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

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

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

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

HTTP/2 的特性包括：

1. 二进制分帧

• HTTP/1.x：基于文本格式，报文以明文形式传输，解析过程复杂且容易出错，效率较低。
• HTTP/2：采用二进制分帧层，将所有传输的信息分割为更小的帧，并对这些帧进行二进制编码。帧是 HTTP/2 数据传输的最小单位，包括头帧和数据帧等。这种二进制分帧的方式使得协议的解析更加高效、准确，提高了数据传输的性能。

2. 多路复用

• HTTP/1.x：同一时间一个连接只能处理一个请求，当有多个请求时，需要依次排队等待处理，容易出现“队头阻塞”问题，即一个请求阻塞会影响后续请求的处理。
• HTTP/2：通过多路复用机制，允许在一个连接上同时并行处理多个请求和响应。每个请求和响应被拆分成多个独立的帧，这些帧可以在连接上乱序发送和接收，然后在另一端根据帧的标识进行重新组装。这样可以充分利用网络带宽，提高连接的利用率，避免了“队头阻塞”问题。

3. 头部压缩

• HTTP/1.x：请求和响应的头部信息通常以明文形式重复传输，包含了很多重复的字段，如 User - Agent、Cookie 等，会占用大量的带宽。
• HTTP/2：采用 HPACK 算法对头部信息进行压缩。HPACK 会维护一个静态表和一个动态表，对于重复出现的头部字段，只需要在表中存储一次，后续传输时只需传输对应的索引，从而大大减少了头部信息的传输量，降低了带宽消耗。

4. 服务器推送

• HTTP/1.x：客户端需要明确请求服务器上的资源，服务器只能被动响应客户端的请求，无法主动向客户端推送资源。
• HTTP/2：支持服务器推送功能，服务器可以在客户端请求某个资源时，主动将客户端可能需要的其他资源一起推送给客户端。例如，当客户端请求一个 HTML 页面时，服务器可以同时推送该页面所需的 CSS、JavaScript 等资源，减少了客户端的请求次数，提高了页面的加载速度。

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

1. 基于 QUIC 协议

• HTTP/2：仍然基于 TCP 协议，TCP 协议在处理丢包重传、拥塞控制等方面存在一些固有的问题，可能会导致“队头阻塞”问题，影响数据传输的性能。
• HTTP/3：采用 QUIC（快速 UDP 互联网连接）协议作为传输层协议。QUIC 基于 UDP 实现，但在 UDP 的基础上增加了可靠传输、拥塞控制、加密等功能。QUIC 协议的连接建立速度更快，并且在丢包情况下不会影响其他流的传输，避免了 TCP 协议中的“队头阻塞”问题，进一步提高了数据传输的性能和可靠性。

2. 连接迁移

• HTTP/2：基于 TCP 协议，TCP 连接依赖于源 IP 地址、目的 IP 地址、源端口和目的端口，当设备的网络环境发生变化（如从 Wi - Fi 切换到移动数据网络）时，TCP 连接会中断，需要重新建立连接，这可能会导致数据传输中断和延迟。
• HTTP/3：QUIC 协议通过连接 ID 来标识连接，而不是依赖于 IP 地址和端口。当设备的网络环境发生变化时，只要连接 ID 不变，QUIC 连接可以保持不变，实现无缝的连接迁移，提高了用户体验。

3. 更灵活的拥塞控制

• HTTP/2：TCP 协议的拥塞控制算法是固定的，不同的网络环境可能需要不同的拥塞控制策略，TCP 难以快速适应网络变化。
• HTTP/3：QUIC 协议的拥塞控制更加灵活，可以根据不同的网络情况动态调整拥塞控制策略，更好地适应各种复杂的网络环境，提高数据传输的效率。

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

二、CSS相关

1 css sprite是什么,有什么优缺点

CSS Sprite（CSS精灵）是一种将多个小图片合并到一张大图中的技术。通过在页面中引用这张大图，并设置合适的background-position和尺寸，可以显示出所需的小图标或背景图案。

优点：

• 减少HTTP请求数：将多个小图片合并成一张大图，减少了浏览器与服务器之间的请求次数，提高了页面加载速度。
• 提高性能：由于减少了请求数，减少了网络传输时间和延迟，加快了页面加载速度，提升了用户体验。
• 减小图片大小：合并后的大图可以使用更高效的压缩算法进行压缩，减小了图片的文件大小。
• 方便更换风格：只需要替换或修改一张大图中的小图标或背景图案，就可以改变整个页面的样式，维护和更换风格更加方便。

缺点：

• 图片合并麻烦：合并图片需要手动调整和拼接小图标或背景图案，需要一定的工作量。
• 维护麻烦：如果需要修改其中一个小图标或背景图案，可能需要重新布局整个大图，并且需要更新相应的CSS样式。

总结：CSS Sprite通过将多个小图片合并成一张大图，减少了HTTP请求，提高了页面加载速度和性能。它的优点包括减少请求数、提高性能、减小图片大小和方便更换风格。然而，它的缺点在于图片合并和维护的麻烦。

2 display: none;与visibility: hidden;的区别

display: none;和visibility: hidden;都可以使元素不可见，但它们在实现上有一些区别。

区别：

• display: none;会使元素完全从渲染树中消失，不占据任何空间，而visibility: hidden;不会使元素从渲染树中消失，仍然占据空间，只是内容不可见。
• display: none;是非继承属性，子孙节点消失是因为元素本身从渲染树中消失，修改子孙节点的属性无法使其显示。而visibility: hidden;是继承属性，子孙节点消失是因为继承了hidden属性，通过设置visibility: visible;可以使子孙节点显示。
• 修改具有常规流的元素的display属性通常会导致文档重排（重新计算元素的位置和大小）。而修改visibility属性只会导致本元素的重绘（重新绘制元素的可见部分）。
• 读屏器（屏幕阅读软件）不会读取display: none;元素的内容，但会读取visibility: hidden;元素的内容。

综上所述，display: none;和visibility: hidden;虽然都可以使元素不可见，但在元素在渲染树中的位置、对子孙节点的影响、性能方面有所不同。选择使用哪种方式取决于具体的需求和场景。

3 link与@import的区别

1. <link>是HTML方式，@import是CSS方式。<link>标签在HTML文档的<head>部分中使用，用于引入外部CSS文件；@import是在CSS文件中使用，用于引入其他CSS文件。
2. <link>标签最大限度地支持并行下载，浏览器会同时下载多个外部CSS文件；而@import引入的CSS文件会导致串行下载，浏览器会按照顺序逐个下载CSS文件，这可能导致页面加载速度变慢，出现FOUC（Flash of Unstyled Content）问题。
3. <link>标签可以通过rel="alternate stylesheet"指定候选样式表，用户可以在浏览器中切换样式；而@import不支持rel属性，无法提供候选样式表功能。
4. 浏览器对<link>标签的支持早于@import，一些古老的浏览器可能不支持@import方式引入CSS文件，而可以正确解析<link>标签。
5. @import必须出现在样式规则之前，而且只能在CSS文件的顶部引用其他文件；而<link>标签可以放置在文档的任何位置。
6. 总体来说，<link>标签在性能、兼容性和灵活性方面优于@import。

因此，在实际使用中，推荐使用<link>标签来引入外部CSS文件。

4 什么是FOUC?如何避免

FOUC（Flash Of Unstyled Content）指的是在页面加载过程中，由于外部样式表（CSS）加载较慢或延迟，导致页面先以无样式的方式显示，然后突然闪烁出样式的现象。

为了避免FOUC，可以采取以下方法：

1. 将样式表放置在文档的<head>标签中：通过将样式表放在文档头部，确保浏览器在渲染页面内容之前先加载和解析样式表，从而避免了页面一开始的无样式状态。
2. 使用内联样式：将关键的样式直接写在HTML标签的style属性中，这样即使外部样式表加载延迟，页面仍然可以有基本的样式展示，避免出现完全无样式的情况。
3. 使用样式预加载：在HTML的<head>中使用<link rel="preload">标签，将样式表提前预加载，以确保在页面渲染之前样式表已经下载完毕。
4. 避免过多的样式表和样式文件：减少页面中使用的样式表数量和样式文件大小，优化样式表的结构和规则，从而加快样式表的加载速度。
5. 使用媒体查询避免不必要的样式加载：通过媒体查询（@media）在适当的条件下加载特定的样式，避免在不需要的情况下加载不必要的样式。

综上所述，通过优化样式加载顺序、使用内联样式、样式预加载和合理使用媒体查询等方法，可以有效避免FOUC的出现，提供更好的用户体验。

5 如何创建块级格式化上下文(block formatting context),BFC有什么用

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

要创建一个块级格式化上下文（BFC），可以应用以下方法：

1. 使用float属性：将元素的float属性设置为除none以外的值，可以创建一个BFC。
2. 使用overflow属性：将元素的overflow属性设置为除visible以外的值，例如auto或hidden，可以创建一个BFC。
3. 使用display属性：将元素的display属性设置为inline-block、table-cell、table-caption等特定的值，可以创建一个BFC。
4. 使用position属性：将元素的position属性设置为absolute、fixed、relative或sticky，可以创建一个BFC。
5. 使用contain属性：将元素的contain属性设置为layout，可以创建一个BFC（仅适用于部分浏览器）。

在IE下, Layout,可通过zoom:1 触发

BFC布局与普通文档流布局区别 普通文档流布局:

• 浮动的元素是不会被父级计算高度
• 非浮动元素会覆盖浮动元素的位置
• margin会传递给父级元素
• 两个相邻元素上下的margin会重叠

BFC布局规则:

• 浮动的元素会被父级计算高度(父级元素触发了BFC)
• 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
• margin不会传递给父级(父级触发BFC)
• 属于同一个BFC的两个相邻元素上下margin会重叠

开发中的应用

• 阻止margin重叠
• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖

6 display、float、position的关系

• 如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
• 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
• 否则，如果float不是none，框是浮动的，display根据下表进行调整
• 否则，如果元素是根元素，display根据下表进行调整
• 其他情况下display的值为指定值
• 总结起来：绝对定位、浮动、根元素都需要调整display

综上所述，display、float和position之间存在一定的关系，它们的取值会相互影响元素的布局和显示方式。根据不同的取值组合，元素的display值可能会被调整。

7 清除浮动的几种方式，各自的优缺点

以下是清除浮动的几种常见方式以及它们的优缺点：

1. 父级 div 定义 height： 将父级容器的高度设置为已浮动元素的高度。优点是简单易实现，缺点是需要提前知道浮动元素的高度，如果高度发生变化，需要手动调整。
2. 结尾处加空 div 标签 clear:both： 在浮动元素后面添加一个空的 div 标签，并设置 clear:both。优点是简单易实现，缺点是需要添加多余的空标签，不符合语义化。
3. 父级 div 定义伪类 :after 和 zoom： 父级容器使用伪元素 :after 清除浮动，并设置 zoom:1 触发 hasLayout。优点是不需要额外添加多余的标签，清除浮动效果好，缺点是对老版本浏览器的兼容性需要考虑。
4. 父级 div 定义 overflow:hidden： 将父级容器的 overflow 属性设置为 hidden。优点是简单易实现，不需要添加额外的标签，缺点是可能会造成内容溢出隐藏。
5. 父级 div 也浮动，需要定义宽度： 将父级容器也设置为浮动，并定义宽度。优点是清除浮动效果好，缺点是需要定义宽度，不够灵活。
6. 结尾处加 br 标签 clear:both： 在浮动元素后面添加 br 标签，并设置 clear:both。和第2种方式类似，优缺点也相似。
7. 使用 clearfix 类： 在父级容器上应用 clearfix 类，该类包含伪元素清除浮动。优点是代码简洁易懂，不需要额外添加标签，缺点是需要定义并引用 clearfix 类。

总体而言，使用伪类 :after 和 zoom 的方式是较为常见和推荐的清除浮动的方法，它可以避免添加多余的标签，并具有较好的兼容性。然而，不同场景下适合使用不同的清除浮动方式，需要根据实际情况选择合适的方法。

8 为什么要初始化CSS样式?

初始化 CSS 样式的目的主要有以下几点：

1. 浏览器兼容性： 不同浏览器对于 HTML 元素的默认样式存在差异，通过初始化 CSS 样式，可以尽量消除不同浏览器之间的显示差异，使页面在各个浏览器中更加一致。
2. 统一样式： 通过初始化 CSS 样式，可以为各个元素提供一个统一的基础样式，避免默认样式的影响。这有助于开发者在项目中构建一致的界面风格，提高开发效率。
3. 提高可维护性： 初始化 CSS 样式可以避免在编写具体样式时受到浏览器默认样式的干扰，减少不必要的样式覆盖和调整，从而提高代码的可维护性和可读性。
4. 优化性能： 通过初始化 CSS 样式，可以避免不必要的样式计算和渲染，减少浏览器的工作量，提升页面加载和渲染性能。

需要注意的是，在进行 CSS 样式初始化时，应该注意选择合适的方式和范围，避免过度初始化造成不必要的代码冗余和性能损耗。同时，针对具体项目和需求，可以选择使用已有的 CSS 初始化库或者自定义初始化样式。

9 css3有哪些新特性

CSS3引入了许多新特性，以下是其中一些常见的新特性：

1. 新增选择器：例如:nth-child()、:first-of-type、:last-of-type等，可以根据元素在父元素中的位置进行选择。
2. 弹性盒模型：通过display: flex;可以创建弹性布局，简化了元素的排列和对齐方式。
3. 多列布局：使用column-count和column-width等属性可以实现将内容分为多列显示。
4. 媒体查询：通过@media可以根据设备的特性和屏幕大小应用不同的样式规则。
5. 个性化字体：使用@font-face可以引入自定义字体，并在网页中使用。
6. 颜色透明度：通过rgba()可以设置颜色的透明度。
7. 圆角：使用border-radius可以给元素添加圆角效果。
8. 渐变：使用linear-gradient()可以创建线性渐变背景效果。
9. 阴影：使用box-shadow可以为元素添加阴影效果。
10. 倒影：使用box-reflect可以为元素添加倒影效果。
11. 文字装饰：使用text-stroke-color可以设置文字描边的颜色。
12. 文字溢出：使用text-overflow可以处理文字溢出的情况。
13. 背景效果：使用background-size可以控制背景图片的大小。
14. 边框效果：使用border-image可以为边框使用图片来创建特殊效果。
15. 转换：使用transform可以实现元素的旋转、倾斜、位移和缩放等变换效果。
16. 平滑过渡：使用transition可以为元素的属性变化添加过渡效果。
17. 动画：通过@keyframes和animation可以创建元素的动画效果。

CSS3引入了许多新的伪类，以下是一些常见的新增伪类：

1. :nth-child(n)：选择父元素下的第n个子元素。
2. :first-child：选择父元素下的第一个子元素。
3. :last-child：选择父元素下的最后一个子元素。
4. :nth-of-type(n)：选择父元素下特定类型的第n个子元素。
5. :first-of-type：选择父元素下特定类型的第一个子元素。
6. :last-of-type：选择父元素下特定类型的最后一个子元素。
7. :only-child：选择父元素下仅有的一个子元素。
8. :only-of-type：选择父元素下特定类型的唯一一个子元素。
9. :empty：选择没有任何子元素或者文本内容的元素。
10. :target：选择当前活动的目标元素。
11. :enabled：选择可用的表单元素。
12. :disabled：选择禁用的表单元素。
13. :checked：选择被选中的单选框或复选框。
14. :focus：选择当前获取焦点的元素。
15. :hover：选择鼠标悬停在上方的元素。
16. :visited：选择已访问过的链接。
17. :not(selector)：选择不符合给定选择器的元素。

这些新增的伪类为选择元素提供了更多的灵活性和精确性，使得开发者能够更好地控制和样式化文档中的元素。

10 display有哪些值？说明他们的作用

display属性用于定义元素应该生成的框类型。以下是常见的display属性值及其作用：

1. block：将元素转换为块状元素，独占一行，可设置宽度、高度、边距等属性。
2. inline：将元素转换为行内元素，不独占一行，只占据内容所需的空间，无法设置宽度、高度等块级属性。
3. none：设置元素不可见，在渲染时将其完全隐藏，不占据任何空间。
4. inline-block：使元素既具有行内元素的特性（不独占一行），又具有块级元素的特性（可设置宽度、高度等属性），可以看作是行内块状元素。
5. list-item：将元素作为列表项显示，常用于有序列表（<ol>）和无序列表（<ul>）中，会添加列表标记。
6. table：将元素作为块级表格显示，常用于构建表格布局，类似于<table>元素。
7. inherit：规定应从父元素继承display属性的值，使元素继承父元素的框类型。

这些display属性值用于控制元素的外观和布局，通过选择适当的值可以实现不同的布局效果。

11 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 有两种，IE 盒子模型、W3C 盒子模型；
• 盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE的content部分把 border和padding`计算了进去;

• 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
• IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
• 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
• 怪异(IE)盒模型：元素宽度 = width + margin
• 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

box-sizing 常用的属性有哪些？分别有什么作用

box-sizing属性用于控制元素的盒模型类型，常用的属性值有：

1. content-box：默认值，使用标准的W3C盒模型，元素的宽度和高度仅包括内容区域（content），不包括填充、边框和外边距。
2. border-box：使用怪异的IE盒模型，元素的宽度和高度包括内容区域（content）、填充（padding）和边框（border），但不包括外边距（margin）。即元素的宽度和高度指定的是内容区域加上填充和边框的总宽度和高度。
3. inherit：继承父元素的box-sizing属性值。

通过设置不同的box-sizing属性值，可以控制元素的盒模型类型，进而影响元素的布局和尺寸计算。使用border-box可以更方便地处理元素的宽度和高度，特别适合响应式布局和网格系统的设计。

12 CSS优先级算法如何计算？

CSS优先级是用于确定当多个样式规则应用到同一个元素时，哪个样式规则会被应用的一种规则。优先级的计算基于选择器的权重。

以下是CSS优先级计算的一般规则：

1. !important：样式规则使用了!important标记，具有最高优先级，无论其位置在哪里。
2. 内联样式：直接应用在元素上的style属性具有较高的优先级。
3. ID选择器：使用ID选择器的样式规则具有较高的优先级。例如，#myElement。
4. 类选择器、属性选择器和伪类选择器：使用类选择器（例如.myClass）、属性选择器（例如[type="text"]）和伪类选择器（例如:hover）的样式规则的优先级较低于ID选择器。
5. 元素选择器和伪元素选择器：使用元素选择器（例如div）和伪元素选择器（例如::before）的样式规则的优先级较低于类选择器、属性选择器和伪类选择器。

当存在多个样式规则具有相同的优先级时，会根据以下规则进行决定：

• 就近原则：当同一元素上存在多个具有相同优先级的样式规则时，最后出现的样式规则将被应用。
• 继承：某些样式属性可以被子元素继承，如果父元素具有样式规则，子元素将继承该样式。

需要注意的是，以上规则仅适用于一般情况，有些情况下可能存在更复杂的优先级计算。同时，使用!important应该谨慎，过度使用!important可能导致样式管理困难和维护问题。

13 对BFC规范的理解？

• 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
• 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响

BFC（Block Formatting Context）是CSS中的一种渲染规范，用于决定和控制元素在文档中的布局和渲染方式。BFC定义了一个独立的渲染区域，使得处于不同BFC内部的元素相互隔离，互不影响。

以下是对BFC规范的一些理解：

1. BFC的创建条件：触发BFC的条件包括元素的float属性不为none、position属性为absolute或fixed、display属性为inline-block、table-cell、table-caption等，以及通过特定的CSS属性（如overflow）进行触发。
2. BFC的特性：
   • 内部的块级盒子会在垂直方向上一个接一个地放置。
   • 相邻的两个块级盒子的垂直外边距会发生合并。
   • BFC的区域不会与浮动元素重叠。
   • BFC在页面布局时会考虑浮动元素。
   • BFC可以包含浮动元素，并计算其高度。
   • BFC的边界会阻止边距重叠。
3. BFC的应用：
   • 清除浮动：创建一个父级元素成为BFC，可以清除其内部浮动的影响，避免父元素塌陷。
   • 创建自适应的两栏布局：通过将两个列容器设置为BFC，可以避免它们相互影响。
   • 阻止边距重叠：当两个相邻元素的边距发生重叠时，将其中一个元素设置为BFC，可以解决边距重叠问题。

总的来说，BFC规范通过创建独立的渲染上下文，使得元素的布局和渲染更加可控，避免了一些常见的布局问题和冲突。它在清除浮动、解决边距重叠等方面具有重要的应用价值。

14 谈谈浮动和清除浮动

浮动（float）是CSS中的一种布局方式，它允许元素向左或向右浮动并脱离文档的正常流，其他元素会围绕浮动元素进行布局。

浮动的特点和应用：

1. 元素浮动后，其原位置会被其他元素填充，不再占据文档流中的空间。
2. 浮动元素会尽可能地靠近其包含块的左侧或右侧，直到遇到另一个浮动元素或包含块的边界。
3. 浮动元素可以通过设置float属性为left或right进行左浮动或右浮动。
4. 常见应用包括实现多列布局、文字环绕图片等。

清除浮动（clear float）是为了解决浮动元素带来的影响和布局问题而采取的措施。

浮动元素会导致其父元素的高度塌陷（父元素无法检测到浮动元素的高度），以及其他元素可能与浮动元素重叠。为了解决这些问题，可以使用清除浮动的方法：

1. 空元素清除浮动：在浮动元素后面添加一个空的块级元素，并设置其clear属性为both，使其在浮动元素下方换行，达到清除浮动的效果。
2. 父级元素使用overflow属性：给包含浮动元素的父元素设置overflow属性为auto或hidden，可以触发BFC（块格式化上下文），从而包含浮动元素。
3. 使用伪元素清除浮动：使用::after伪元素给包含浮动元素的父元素添加一个清除浮动的样式，例如设置content为空字符串、display为table等。
4. 使用clearfix类：给包含浮动元素的父元素添加一个clearfix类，该类定义了清除浮动的样式，例如设置clearfix类的::after伪元素清除浮动。

需要注意的是，清除浮动的方法应当适用于具体的布局需求和兼容性考虑。同时，清除浮动可能会影响到其他样式的布局，因此需要综合考虑和测试。

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

34 伪类和伪元素的区别

• 伪类表状态
• 伪元素是真的有元素
• 前者单冒号，后者双冒号

以下是对伪类和伪元素的更详细解释：

• 伪类（Pseudo-classes）是用于选择元素的特定状态或条件的关键词。它们以单冒号（:）作为前缀，并应用于选择器的末尾。伪类选择器可以选择处于特定状态的元素，例如鼠标悬停、被点击、被选中等。常见的伪类包括 :hover、:active、:visited、:nth-child 等。
• 伪元素（Pseudo-elements）则是用于在文档中创建虚拟的元素，这些元素可以在选中的元素中添加额外的样式和内容。伪元素以双冒号（::）作为前缀，并应用于选择器的末尾。伪元素可以在选中的元素中插入新的内容或样式，如在元素前、后插入内容或改变选中元素的某个部分的样式。常见的伪元素包括 ::before、::after、::first-line、::first-letter 等。

总结来说，伪类用于选择特定状态的元素，而伪元素则用于在选中的元素中创建虚拟的元素。伪类以单冒号（:）作为前缀，伪元素以双冒号（::）作为前缀。在实际使用中，由于历史原因，有些伪元素也可以使用单冒号（:）来表示，但为了遵循最新的规范，推荐使用双冒号（::）表示伪元素。

35 base64的使用

• 用于减少 HTTP 请求
• 适用于小图片
• base64的体积约为原图的3/4

base64 是一种将二进制数据编码为 ASCII 字符串的方法，它常被用于将小文件（如图片、字体文件等）嵌入到 HTML、CSS 或 JavaScript 中，从而减少对服务器的请求次数。

使用 base64 编码可以将二进制文件转换为文本字符串，这样可以直接将字符串嵌入到代码中，而无需单独请求文件。这样做的好处是可以减少 HTTP 请求的数量，提升页面加载速度，尤其适用于小图片或者一些图标字体等。

然而，使用 base64 编码也有一些注意事项。由于 base64 编码后的文本字符串比原始二进制数据体积大约增加了 1/3，因此对于大文件来说，使用 base64 会导致数据传输量增加，可能会影响网页的加载速度。此外，由于嵌入了文件内容，导致代码体积增大，也会对可维护性产生一定的影响。

因此，通常建议将 base64 使用在小文件上，如小图标、小图片等，而对于大文件，仍然应该以原始文件的形式进行请求和传输，以获得更好的性能和可维护性。

36 自适应布局

思路：

• 左侧浮动或者绝对定位，然后右侧margin撑开
• 使用<div>包含，然后靠负margin形成bfc
• 使用flex

自适应布局是指能够根据不同设备或窗口尺寸自动调整布局的一种设计方式。下面是几种常见的自适应布局方法：

1. 使用浮动或绝对定位：左侧元素使用浮动或绝对定位，右侧元素通过设置左侧元素的margin来撑开布局。这种方法需要手动计算和设置宽度和间距，适用于简单的布局需求。

.left {
  float: left;
  width: 200px;
}

.right {
  margin-left: 220px;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 使用包含元素和负边距：将左右两个元素放在一个容器内，设置容器的overflow属性为hidden，然后通过负边距将左侧元素向左移动，右侧元素则会自动占据剩余空间。这种方法需要使用负边距，适用于复杂布局需求。

.container {
  overflow: hidden;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
}

.right {
  float: left;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 使用 Flexbox 布局：使用 Flexbox 弹性布局可以轻松实现自适应布局。通过设置容器的display属性为flex，并使用flex-grow属性来控制元素的伸缩性，可以自动调整元素的宽度和布局。

.container {
  display: flex;
}

.left {
  flex-grow: 0;
  flex-shrink: 0;
  width: 200px;
}

.right {
  flex-grow: 1;
}

@前端进阶之旅: 代码已经复制到剪贴板

以上是一些常见的自适应布局方法，根据具体的需求和场景，可以选择合适的方法来实现自适应布局。

37 请用CSS写一个简单的幻灯片效果页面

知道是要用CSS3。使用animation动画实现一个简单的幻灯片效果

/**css**/
.ani{
  width:480px;
  height:320px;
  margin:50px auto;
  overflow: hidden;
  box-shadow:0 0 5px rgba(0,0,0,1);
  background-size: cover;
  background-position: center;
  -webkit-animation-name: "loops";
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
    0% {
        background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
    }
    25% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
    }
    50% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
    }
    75% {
        background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
    }
    100% {
        background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

38 什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

• 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

下面是详细分析

外边距重叠（margin collapse）指的是在某些情况下，相邻的两个元素之间的外边距会发生合并，并且取两者之间的较大值作为最终的外边距值。外边距重叠主要发生在垂直方向上，而水平方向上的外边距不会发生重叠。

外边距重叠的结果是两个相邻元素的外边距被合并成一个单独的外边距，这可能会导致布局上的一些意外效果，比如元素之间的间距变得比预期的要大。

下面是一些常见情况下外边距重叠的例子：

1. 相邻的兄弟元素的外边距重叠：

<div class="box"></div>
<div class="box"></div>

@前端进阶之旅: 代码已经复制到剪贴板

.box {
  margin-top: 20px;
  margin-bottom: 30px;
}

@前端进阶之旅: 代码已经复制到剪贴板

在这个例子中，两个相邻的兄弟元素之间的上下外边距会发生重叠，最终的外边距值为30px，而不是预期的50px。

1. 父元素与第一个/最后一个子元素的外边距重叠：

<div class="parent">
  <div class="child"></div>
</div>

@前端进阶之旅: 代码已经复制到剪贴板

.parent {
  margin-bottom: 20px;
}

.child {
  margin-top: 30px;
}

@前端进阶之旅: 代码已经复制到剪贴板

在这个例子中，父元素的下外边距和子元素的上外边距发生重叠，最终的外边距值为30px，而不是预期的50px。

了解外边距重叠的规则可以帮助我们更好地控制元素的布局，避免意外的外边距重叠效果。在需要避免外边距重叠的情况下，可以使用一些方法，如使用内边距（padding）或边框（border）来隔离外边距、使用浮动（float）或绝对定位（position）等。

39 rgba()和opacity的透明效果有什么不同？

• rgba() 是一种CSS颜色值表示方法，可以在其中指定红、绿、蓝三个通道的颜色值以及透明度。通过调整透明度值来实现元素的透明效果，仅影响元素的颜色或背景色，不影响元素内的其他内容的透明度。

.element {
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
}

@前端进阶之旅: 代码已经复制到剪贴板

• opacity 是CSS属性，用于设置元素的整体透明度。它会影响元素以及元素内的所有内容的透明度，包括文本、图像等。设置元素的透明度会影响整个元素及其内容的可见性。

.element {
  opacity: 0.5; /* 元素及其内容半透明 */
}

@前端进阶之旅: 代码已经复制到剪贴板

需要注意的是，opacity 的值是一个0到1之间的数字，0表示完全透明，1表示完全不透明。而 rgba() 中的透明度值是一个介于0到1之间的数字，0表示完全透明，1表示完全不透明。

另外，需要注意的是，opacity 的透明度是继承的，子元素会继承父元素的透明度效果，而 rgba() 设置的透明度不会继承给子元素。

综上所述，rgba() 和 opacity 在实现透明效果上有一些不同，需要根据具体的需求和效果来选择使用哪种方式。

小结

• rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
• 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

40 css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

• 垂直方向：line-height
• 水平方向：letter-spacing

在CSS中，可以使用以下两个属性实现文字在垂直和水平方向上的重叠：

• 垂直方向：line-height

  • 通过设置 line-height 属性，可以控制行高，从而实现文字在垂直方向上的重叠。将 line-height 的值设置为大于文字大小的值，可以使文字垂直居中或与其他文字重叠。

  .text {
    line-height: 1.5; /* 行高为文字大小的1.5倍 */
  }
  

  @前端进阶之旅: 代码已经复制到剪贴板

• 水平方向：letter-spacing

  • 通过设置 letter-spacing 属性，可以控制字符之间的间距，从而实现文字在水平方向上的重叠。将 letter-spacing 的值设置为负数，可以让字符紧密排列，产生重叠效果。

  .text {
    letter-spacing: -2px; /* 字符间距为负数，产生重叠效果 */
  }
  

  @前端进阶之旅: 代码已经复制到剪贴板

这两个属性可以根据具体的需求来调整，实现文字的垂直和水平方向上的重叠效果。

41 如何垂直居中一个浮动元素？

垂直居中一个浮动元素可以使用以下两种方法：

方法一（已知元素的高宽）：

#div1 {
  background-color: #6699FF;
  width: 200px;
  height: 200px;
  position: absolute; /* 父元素需要相对定位 */
  top: 50%;
  left: 50%;
  margin-top: -100px; /* 二分之一的height */
  margin-left: -100px; /* 二分之一的width */
}

@前端进阶之旅: 代码已经复制到剪贴板

方法二：

#div1 {
  width: 200px;
  height: 200px;
  background-color: #6699FF;
  margin: auto;
  position: absolute; /* 父元素需要相对定位 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

@前端进阶之旅: 代码已经复制到剪贴板

对于垂直居中一个 <img>，可以使用更简便的方法：

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

@前端进阶之旅: 代码已经复制到剪贴板

上述代码将 <img> 元素放置在一个容器中（#container），通过使用 Flex 布局的 justify-content: center; 和 align-items: center; 属性，实现了图片在容器中的垂直居中效果。

42 px和em的区别

px和em是两种不同的长度单位，它们的区别如下：

• px（像素）是一个绝对单位，表示固定的像素大小。无论父元素的字体大小如何，px的值都不会改变，它是一个固定的长度单位。
• em（倍数）是一个相对单位，它相对于父元素的字体大小来确定自身的大小。如果没有设置字体大小，则1em等于浏览器默认的字体大小（通常是16px）。如果父元素的字体大小是16px，那么1em就等于16px，2em就等于32px，以此类推。

由于em是相对单位，它具有一定的灵活性和可扩展性。当需要调整整个页面的字体大小时，只需更改根元素的字体大小，其他使用em作为单位的元素会自动按比例调整大小，从而实现页面的整体缩放效果。

相对于px来说，em更适用于实现弹性布局、响应式设计以及根据用户偏好进行字体大小调整等场景。

小结

• px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
• 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

• px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
• em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size

43 Sass、LESS是什么？大家为什么要使用他们？

• 他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
• 例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)

以下是为什么人们选择使用Sass和Less的一些原因：

1. 变量和计算：Sass和Less都支持变量，可以定义和重用各种值，如颜色、字体、边距等。它们还允许进行数学计算，简化了样式表的编写和维护。
2. 嵌套规则：Sass和Less允许在样式规则中嵌套其他规则，提高了样式表的可读性和可维护性。通过嵌套，可以更清晰地表示元素的层次结构，减少了样式选择器的重复。
3. 混合（Mixins）：混合是一种可以在多个选择器中重复使用的样式块。通过定义和调用混合，可以避免样式的重复编写，并且使样式表更加模块化和可复用。
4. 继承：继承允许一个选择器继承另一个选择器的样式规则，减少了样式的冗余。当多个选择器具有相同的样式时，可以通过继承来避免重复编写样式。
5. 模块化和导入：Sass和Less支持将样式表拆分为多个模块，并通过导入机制进行组合。这使得样式表的组织和管理更加灵活和可扩展。
6. 自定义函数：Sass和Less都允许定义自定义函数，可以用于处理样式值，进行复杂的计算和操作。
7. 强大的工具和生态系统：Sass和Less都有丰富的工具和插件生态系统，提供了许多辅助工具、编译器和构建工具，如预处理器编译器、自动刷新、自动前缀添加等，极大地提升了前端开发的效率。

总而言之，Sass和Less使得CSS的编写更加简洁、模块化和可维护，提供了一些高级功能和工具，使前端开发更加高效和灵活。

44 知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

/**一种常见利用伪类清除浮动的代码**/
.clearfix:after {
    content:".";       //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
 }
.clearfix {
    *zoom:1;
}

@前端进阶之旅: 代码已经复制到剪贴板

• content属性主要用于在::before和::after伪元素中插入生成的内容。它通常与伪元素一起使用，以在文档中插入额外的内容或修饰样式。
• content属性可以接受多种类型的值，包括文本字符串、URL、计数器、计数器符号和引用标签等。通过设置不同的content值，可以实现一些常见的效果，例如：

1. 插入文本内容：可以在伪元素中使用content属性插入自定义的文本内容，用于装饰样式或添加额外的标识。
2. 插入图标和符号：通过设置content属性为某个图标字体或Unicode编码，可以在伪元素中插入图标和特殊符号。
3. 计数器：结合使用content属性和counter函数，可以在伪元素中显示自动生成的计数器，用于标记序号或计数。
4. 引用标签：通过设置content属性为attr()函数，可以在伪元素中引用元素的属性值，用于显示元素的属性内容。

上述代码示例中，通过设置content属性为一个点字符.，在::after伪元素中插入一个看不见的点，配合其他样式属性实现了清除浮动的效果。这是一种常见的清除浮动的技巧之一。

需要注意的是，content属性只对::before和::after伪元素起作用，对于其他元素并没有效果。此外，content属性必须与display属性一起使用，通常为block或inline-block，以确保生成的内容具有正确的布局。

45 水平居中的方法

• 元素为行内元素，设置父元素text-align:center
• 如果元素宽度固定，可以设置左右margin为auto;
• 绝对定位和移动: absolute + transform
• 使用flex-box布局，指定justify-content属性为center
• display设置为tabel-cell

下面进行详细说明：

1. 文本居中：如果元素为行内元素，可以将父元素的text-align属性设置为center，这样子元素就会水平居中对齐。

.parent {
  text-align: center;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 固定宽度的居中：如果元素宽度已知并固定，可以通过将左右margin设置为auto来实现水平居中。

.element {
  margin-left: auto;
  margin-right: auto;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 绝对定位和移动：可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto，然后使用transform属性将元素向左平移50%。

.element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@前端进阶之旅: 代码已经复制到剪贴板

1. Flexbox布局：使用display: flex将父元素设置为弹性容器，然后使用justify-content属性将子元素水平居中。

.parent {
  display: flex;
  justify-content: center;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 表格布局：将父元素的display属性设置为table-cell，并将text-align属性设置为center。

.parent {
  display: table-cell;
  text-align: center;
}

@前端进阶之旅: 代码已经复制到剪贴板

这些方法可以根据具体的布局需求和浏览器兼容性进行选择和使用。

46 垂直居中的方法

• 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
• 使用flex布局，设置为align-item：center
• 绝对定位中设置bottom:0,top:0,并设置margin:auto
• 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
• 文本垂直居中设置line-height为height值
• inline-block兄弟元素：通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中

1. 表格布局：将父元素的display属性设置为table，并将子元素的display属性设置为table-cell，然后使用vertical-align属性将子元素垂直居中

• 未知高度的块级父子元素居中，模拟表格布局
• 缺点：IE67不兼容，父级 overflow：hidden 失效

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. Flexbox布局：将父元素的display属性设置为flex，并使用align-items属性将子元素垂直居中。

.parent {
  display: flex;
  align-items: center;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 绝对定位和负边距：对于已知高度的子元素，将父元素设置为相对定位，子元素设置为绝对定位，并使用top: 50%将其垂直居中，然后通过负边距的方式将子元素向上移动一半的高度

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  margin-top: -50px; /* 假设子元素高度为100px的一半 */
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 文本垂直居中：对于单行文本，可以设置父元素的line-height属性和高度相等，从而实现文本的垂直居中

.parent {
  height: 100px;
  line-height: 100px;
}

@前端进阶之旅: 代码已经复制到剪贴板

1. CSS3位移：使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@前端进阶之旅: 代码已经复制到剪贴板

1. inline-block兄弟元素：通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中

.parent {
  height: 100%;
}

.extra {
  display: inline-block;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

@前端进阶之旅: 代码已经复制到剪贴板

47 如何使用CSS实现硬件加速？

硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，

一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

使用CSS实现硬件加速可以通过以下方法：

1. 使用3D变换：通过应用3D变换，如translateZ(0)，来触发硬件加速。这会将元素视为3D空间中的一个对象，使浏览器使用GPU进行渲染。

.element {
  transform: translateZ(0);
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 使用CSS动画：使用CSS动画属性（如transform、opacity、filter）来触发硬件加速。这可以通过创建一个动画并将其应用于元素来实现。

.element {
  animation: myAnimation 1s linear infinite;
}

@keyframes myAnimation {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: translateZ(0);
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 使用CSS过渡：通过使用CSS过渡属性（如transform、opacity、filter）来触发硬件加速。这可以通过设置过渡效果来实现。

.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: translateZ(0);
}

@前端进阶之旅: 代码已经复制到剪贴板

请注意，硬件加速并不是适用于所有情况的解决方案，它对于涉及大量动画或复杂渲染的元素特别有效。但是，在某些情况下，过多地使用硬件加速可能会导致性能问题，因此需要在实际使用时进行评估和测试。

48 重绘和回流（重排）是什么，如何避免？

重绘（Repaint）和回流（Reflow）是浏览器在渲染页面时的两个关键过程。

• 重绘（Repaint） 是指当元素的外观属性（如颜色、背景等）发生改变，但不影响布局时的重新绘制过程。重绘不会影响元素的几何尺寸和位置。
• 回流（Reflow） 是指当元素的布局属性（如尺寸、位置、隐藏/显示等）发生改变，导致浏览器重新计算元素的几何属性，重新构建渲染树的过程。回流会导致其他相关元素的回流和重绘。
• 回流必将引起重绘，而重绘不一定会引起回流

避免重绘和回流对于提高页面性能和响应速度至关重要。以下是一些减少重绘和回流的方法：

• 使用 CSS3 动画：使用 CSS3 的 transform 和 opacity 等属性来创建动画效果，因为它们会触发硬件加速，减少重绘和回流的影响。
• 批量修改样式：避免频繁修改单个元素的样式，尽可能将修改合并为一次操作，可以使用 class 或修改 style 属性的方式。
• 使用文档片段：当需要添加多个 DOM 元素到文档中时，可以先创建一个文档片段（DocumentFragment），将元素添加到片段中，然后再将片段一次性添加到文档中，减少回流次数。
• 使用离线 DOM：将元素从文档中移除（display: none），进行复杂的操作（如修改样式、添加子元素等），完成后再将元素放回文档，以减少回流和重绘的影响。
• 缓存布局属性值：如果需要多次访问某个元素的布局属性（如位置、尺寸等），可以将其值缓存起来，避免多次触发回流计算。
• 避免强制同步布局：避免在 JavaScript 中获取布局属性（如使用 offsetTop、clientWidth 等），因为它会强制同步计算布局信息，触发回流。如果需要获取布局信息，最好将获取操作放在一起，或使用 getBoundingClientRect() 方法。

通过合理的设计和优化，可以最小化重绘和回流的次数，提高页面性能和用户体验。

49 说一说css3的animation

CSS3的animation属性是用于创建动画效果的一种方式。它可以通过关键帧（@keyframes）来定义动画的每一帧，以实现元素的平滑过渡和动态效果。

使用animation属性时，需要设置以下几个关键的子属性：

• animation-name：定义动画的名称，对应@keyframes中的动画名。
• animation-duration：定义动画的持续时间，可以设置为具体的时间值，如2s表示2秒，或者使用关键词infinite表示无限循环。
• animation-timing-function：定义动画的时间函数，控制动画在不同时间点的速度变化，常见的取值有linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）等。
• animation-delay：定义动画的延迟时间，即动画开始之前的等待时间。
• animation-iteration-count：定义动画的循环次数，可以设置为具体的次数，或者使用关键词infinite表示无限循环。
• animation-direction：定义动画的播放方向，包括正常播放（normal）、反向播放（reverse）、交替反向播放（alternate）等。
• animation-fill-mode：定义动画播放之前和之后的样式状态，包括保持初始状态（none）、保持最后状态（forwards）、保持初始和最后状态（both）等。
• animation-play-state：定义动画的播放状态，可以控制动画的暂停和继续播放，包括paused（暂停）和running（运行）。

通过调整这些子属性的取值，可以创建各种不同的动画效果，使元素在页面上实现平滑的过渡和动态的效果。CSS3的animation提供了一种简洁、易用且高性能的方式来实现动画效果，减少了对JavaScript的依赖。

50 左边宽度固定，右边自适应

左侧固定宽度，右侧自适应宽度的两列布局实现

html结构

<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
</div>

@前端进阶之旅: 代码已经复制到剪贴板

在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度

方法1：左侧div设置成浮动：float: left，右侧div宽度会自动适应

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

@前端进阶之旅: 代码已经复制到剪贴板

方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width 设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;
    right: 0;
}

@前端进阶之旅: 代码已经复制到剪贴板

方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

@前端进阶之旅: 代码已经复制到剪贴板

方法4：使用flex布局

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

@前端进阶之旅: 代码已经复制到剪贴板

51 两种以上方式实现已知或者未知宽度的垂直水平居中

/** 1 **/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

/** 2 **/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/** 3 **/
.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

/** 4 **/
.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

72 margin和padding分别适合什么场景使用

margin 和 padding 在布局和样式设计中有不同的用途和适用场景。

适合使用 margin 的场景：

• 创建元素之间的空白间距，用于调整元素之间的间隔。
• 添加外部空白，使元素与周围的元素或容器之间产生间距。
• 用于调整元素的定位和对齐。
• 用于调整元素的外边距折叠效果（当相邻元素的外边距相遇时）。

适合使用 padding 的场景：

• 在元素的内部添加空白区域，用于调整元素内部内容与边框之间的距离。
• 用于创建元素的背景色或背景图的填充区域。
• 用于调整元素的内边距，影响元素内容与边框的距离。
• 用于控制元素的尺寸和布局。

需要根据具体的设计需求和布局目标来决定使用 margin 还是 padding。在一些情况下，它们可以互相替代使用，但在其他情况下，选择正确的属性可以更好地控制布局和样式效果。

73 抽离样式模块怎么写，说出思路

抽离样式模块的思路可以按照以下步骤进行：

1. 识别公共样式：分析页面中多个模块或页面之间共享的样式，例如颜色、字体、按钮样式等，将其提取为公共样式。
2. 创建公共样式表：将公共样式抽离到单独的样式表文件中，例如 common.css，以便在多个页面或模块中引用。
3. 定义命名规范：为业务样式定义统一的命名规范，例如使用 BEM（Block-Element-Modifier）或其他命名约定，确保样式模块的可维护性和可扩展性。
4. 拆分业务样式：根据页面或模块的功能和结构，将样式拆分为多个模块，并命名为相应的类名或选择器。每个模块应只关注自身的样式，并尽量避免与其他模块产生冲突。
5. 创建样式模块文件：为每个样式模块创建单独的样式文件，例如 header.css、sidebar.css 等，并按需引入到页面中。
6. 构建样式层级结构：根据页面或模块的结构和层级关系，合理组织样式文件的引入顺序，确保样式的层叠顺序和继承关系正确。
7. 统一管理样式文件：根据项目需要，可以使用构建工具（如 webpack、gulp 等）进行样式文件的合并、压缩和打包，减少网络请求和提升页面加载速度。
8. 维护和更新：在日常开发中，根据需求的变化和新功能的添加，及时更新和维护样式模块，保持样式的一致性和可复用性。

通过以上步骤，可以将样式按照模块化的方式进行抽离和管理，提高代码的可读性、可维护性和重用性。同时，样式模块的拆分也有助于团队协作和并行开发。

74 元素竖向的百分比设定是相对于容器的高度吗

实际上，元素竖向的百分比设定是相对于包含它的父元素的高度，而不是宽度。当给一个元素设置竖向的百分比高度时，它会根据其父元素的高度进行计算。例如，如果一个元素的高度设置为50%，则表示该元素的高度将是其父元素高度的50%。

请注意，如果父元素没有明确设置高度，或者父元素的高度是由其内容决定的（如默认的height: auto），那么百分比高度可能无效，因为无法确定相对的基准高度。

需要注意的是，元素的宽度百分比设定是相对于包含它的父元素的宽度。因此，元素的百分比设定在竖向和横向方向上是不同的。

75 全屏滚动的原理是什么？ 用到了CSS的那些属性

全屏滚动（Full Page Scroll）的原理是通过设置页面的高度为视口高度，并使用滚动事件来控制页面的滚动效果。通过监听滚动事件，当用户滚动页面时，根据滚动的距离来切换页面的显示内容，实现页面的切换效果。

在实现全屏滚动时，可能会用到以下一些CSS属性：

• overflow: hidden;：用于隐藏超出视口范围的内容，以实现滚动效果。
• transform: translate(100%, 100%);：通过translate属性将页面移动到视口之外，从而隐藏页面的初始位置。
• display: none;：可以将页面的初始状态设置为隐藏，待滚动到相应位置时再显示。

这些属性可以结合使用，根据滚动事件的触发来控制页面的显示和隐藏，从而实现全屏滚动的效果。具体的实现方式可能因应用场景而有所差异。

76 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE

• 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
• 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
• 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

@前端进阶之旅: 代码已经复制到剪贴板

77 什么是视差滚动效果，如何给每页做不同的动画

视差滚动效果是一种在网页中使用的动画效果，通过在滚动页面时，不同层级的元素以不同的速度移动，形成立体的运动效果。这种效果可以给用户带来更加丰富、生动的视觉体验。

实现视差滚动效果时，可以将页面划分为背景层、内容层和悬浮层等不同的层级。通过设置不同层级的元素以不同的速度移动，可以形成层次感和立体效果。

具体实现视差滚动效果的方法如下：

1. 使用HTML和CSS创建页面的不同层级，如背景层、内容层和悬浮层。
2. 监听滚动事件（如鼠标滚轮事件或触摸滑动事件）。
3. 当滚动事件触发时，根据滚动的距离和速度，计算出不同层级元素的位移值。
4. 使用CSS的transform属性或JavaScript的动画库（如GSAP、ScrollMagic等）来实现元素的平移或缩放效果。
5. 根据需求，为每个页面或元素设置不同的动画效果，如淡入淡出、旋转、缩放等。
6. 根据滚动的进度和方向，控制元素的动画播放顺序和速度，以达到预期的视差滚动效果。

需要注意的是，在实现视差滚动效果时，要考虑到性能和用户体验。过多或复杂的动画效果可能会影响页面加载和滚动的流畅性，因此需要谨慎选择和设计动画效果，并进行性能优化，如合理使用硬件加速、使用节流和防抖等技术手段。

另外，为每个页面或元素设置不同的动画效果可以根据具体的设计需求来确定。可以根据页面的主题、内容或目的来决定使用何种动画效果，如淡入淡出效果、元素的移动或旋转效果等，以增加页面的吸引力和交互性。可以通过CSS的animation属性或JavaScript的动画库来实现这些动画效果，并根据滚动进度或其他触发条件来控制动画的播放。

总结

• 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
• 一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的
• 实现原理
  • 以 “页面滚动条” 作为 “视差动画进度条”
  • 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
  • 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

78 a标签上四个伪类的执行顺序是怎么样的

伪类在a标签上的执行顺序是 link（未访问链接） -> visited（已访问链接） -> hover（鼠标悬停） -> active（激活状态）。

执行顺序可以用记忆口诀 "L-V-H-A"（Love Hate）来记忆，表示喜欢和讨厌的顺序。首先应用 link 样式，然后是 visited 样式，接着是 hover 样式，最后是 active 样式。这个顺序也是 CSS 解析和应用伪类样式的规定顺序。

79 伪元素和伪类的区别和作用

• 伪元素 – 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
• 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

@前端进阶之旅: 代码已经复制到剪贴板

• 伪类 – 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

@前端进阶之旅: 代码已经复制到剪贴板

80 ::before 和 :after 中双冒号和单冒号有什么区别

• 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
• 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
• 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
• 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
• 总结起来，::before 是CSS3中写伪元素的新语法，而 :after 是早期版本CSS中存在的、兼容IE的旧语法，用于表示伪元素。在实际开发中，为了兼容性考虑，可以选择使用单冒号的写法。

81 如何修改Chrome记住密码后自动填充表单的黄色背景

• 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
• 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
• 解决方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

@前端进阶之旅: 代码已经复制到剪贴板

82 网站图片文件，如何点击下载？而非点击预览

可以通过在 <a> 标签中添加 href 属性来指定图片文件的路径，并使用 download 属性来指示浏览器下载该文件而非预览。

<a href="logo.jpg" download>下载</a>

@前端进阶之旅: 代码已经复制到剪贴板

上述代码会在网页中显示一个链接，点击该链接会下载名为 logo.jpg 的图片文件。

您还可以通过添加 download 属性的值来指定下载文件的名称，如下所示：

<a href="logo.jpg" download="网站LOGO">下载</a>

@前端进阶之旅: 代码已经复制到剪贴板

上述代码会下载名为 网站LOGO.jpg 的图片文件。

请注意，download 属性在某些浏览器中可能不被支持或具有限制。在不支持该属性的浏览器中，点击链接可能仍然会打开预览。此外，如果您在网站中使用了内容安全策略（Content Security Policy），可能需要额外配置才能允许下载文件。

确保文件路径正确，并根据需要设置适当的下载文件名称。

83 你对 line-height 是如何理解的

• line-height 是一行字的高度，包括了字体的实际高度以及行间距（字间距）。
• 当一个元素没有显式设置 height 属性时，它的高度会由 line-height 决定。
• 如果一个容器没有设置高度，并且容器内部有文本内容，那么容器的高度会由 line-height 撑开。
• 如果将 line-height 设置为与容器的 height 相同的值，可以实现单行文本的垂直居中。
• 注意，line-height 和 height 都可以撑开元素的高度，但是设置 height 属性会触发元素的 haslayout（仅适用于部分浏览器），而 line-height 不会触发该特性。

需要注意的是，line-height 还可以影响多行文本的行间距和垂直居中，它是一个很常用的属性用于调整文本的排版和布局。

84 line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

对于 line-height 的三种赋值方式，如下所述：

1. 带单位：使用像素 (px) 或其他单位 (如 em) 进行赋值。当使用固定值（如 px）时，line-height 会直接采用该固定值作为行高。而当使用相对单位（如 em）时，line-height 会根据元素的父元素的字体大小 (font-size) 来计算行高，即乘以相应的倍数。
2. 纯数字：直接使用数字进行赋值。这种情况下，数字会被传递给后代元素，作为其行高的比例因子。例如，如果父元素的行高为 1.5，而子元素的字体大小为 18px，那么子元素的行高就会被计算为 1.5 * 18 = 27px。
3. 百分比：使用百分比进行赋值。百分比值会相对于父元素的字体大小进行计算，并将计算后的值传递给后代元素作为其行高。

总的来说，带单位的方式是直接指定具体的行高值，纯数字和百分比的方式会将计算后的行高值传递给后代元素。这些不同的赋值方式可以根据具体的需求和设计效果来选择使用。

85 设置元素浮动后，该元素的 display 值会如何变化

• 设置元素浮动后，元素的 display 值并不会自动变成 block，而是保持原有的 display 值。浮动元素的 display 值仍然是根据元素的默认样式或通过 CSS 显式设置的值。
• 然而，浮动元素会生成一个块级框，并且脱离了正常的文档流，会影响其他元素的布局。常见的浮动值为 left 或 right，使元素向左或向右浮动，并允许其他内容环绕在其周围。
• 需要注意的是，对于一些内联元素，如 span、a 等，默认的 display 值是 inline，当设置这些内联元素为浮动时，会自动转换为 block，但这并不适用于所有元素。

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

加载中...

5 Javascript如何实现继承？

在 JavaScript 中，实现继承的方式有多种，包括构造继承、原型继承、实例继承和拷贝继承等。其中，使用构造函数与原型混合方式是较常用和推荐的方式。

以下是使用构造函数与原型混合方式实现继承的示例代码：

function Parent() {
  this.name = 'poetry';
}

function Child() {
  this.age = 28;
}

// 使用构造函数继承
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var demo = new Child();
console.log(demo.age); // 输出: 28
console.log(demo.name); // 输出: poetry
console.log(demo.constructor); // 输出: Child

@前端进阶之旅: 代码已经复制到剪贴板

通过将 Child.prototype 设置为 new Parent()，子类 Child 继承了父类 Parent 的属性和方法。然后，通过手动将 Child.prototype.constructor 设置为 Child，确保子类的构造函数指向自身。

这样，demo.constructor 的输出将是 Child，表示 demo 实例的构造函数是 Child，以确保子类的实例通过 constructor 属性可以准确地识别其构造函数。

6 谈谈This对象的理解

• 在全局作用域中，this 指向全局对象（在浏览器环境中通常是 window 对象）。
• 在函数中，this 的值取决于函数的调用方式。
  • 如果函数是作为对象的方法调用，this 指向调用该方法的对象。
  • 如果函数是作为普通函数调用，this 指向全局对象（非严格模式下）或 undefined（严格模式下）。
  • 如果函数是通过 call、apply 或 bind 方法调用，this 指向 call、apply 或 bind 方法的第一个参数所指定的对象。
  • 如果函数是作为构造函数调用（使用 new 关键字），this 指向新创建的对象。
• 在箭头函数中，this 的值是继承自外部作用域的，它不会因为调用方式的改变而改变。

下面是一些示例代码，以说明 this 的不同情况：

// 全局作用域中的 this
console.log(this); // 输出: Window

// 对象方法中的 this
const obj = {
  name: 'poetry',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
obj.sayHello(); // 输出: Hello, poetry!

// 普通函数调用中的 this
function greeting() {
  console.log(`Hello, ${this.name}!`);
}
greeting(); // 输出: Hello, undefined (非严格模式下输出: Hello, [全局对象的某个属性值])

// 使用 call/apply/bind 改变 this
const person = {
  name: 'poetry'
};
greeting.call(person); // 输出: Hello, poetry!
greeting.apply(person); // 输出: Hello, poetry!
const boundGreeting = greeting.bind(person);
boundGreeting(); // 输出: Hello, poetry!

// 构造函数中的 this
function Person(name) {
  this.name = name;
}
const poetry = new Person('poetry');
console.log(poetry.name); // 输出: poetry

// 箭头函数中的 this
const arrowFunc = () => {
  console.log(this);
};
arrowFunc(); // 输出: Window

@前端进阶之旅: 代码已经复制到剪贴板

7 事件模型

事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

1. 捕获阶段（Capture Phase）：事件从最外层的父节点开始向下传递，直到达到目标元素的父节点。在捕获阶段，事件会经过父节点、祖父节点等，但不会触发任何事件处理程序。
2. 目标阶段（Target Phase）：事件到达目标元素本身，触发目标元素上的事件处理程序。如果事件有多个处理程序绑定在目标元素上，它们会按照添加的顺序依次执行。
3. 冒泡阶段（Bubble Phase）：事件从目标元素开始向上冒泡，传递到父节点，直到传递到最外层的父节点或根节点。在冒泡阶段，事件会依次触发父节点、祖父节点等的事件处理程序。

事件流的默认顺序是从目标元素的最外层父节点开始的捕获阶段，然后是目标阶段，最后是冒泡阶段。但是可以通过事件处理程序的绑定顺序来改变事件处理的执行顺序。

例如，以下代码演示了事件流的执行顺序：

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

@前端进阶之旅: 代码已经复制到剪贴板

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('Outer div clicked');
}, true); // 使用捕获阶段进行事件监听

inner.addEventListener('click', function() {
  console.log('Inner div clicked');
}, false); // 使用冒泡阶段进行事件监听

btn.addEventListener('click', function() {
  console.log('Button clicked');
}, false); // 使用冒泡阶段进行事件监听

@前端进阶之旅: 代码已经复制到剪贴板

当点击按钮时，事件的执行顺序如下：

1. 捕获阶段：触发外层div的捕获事件处理程序。
2. 目标阶段：触发按钮的事件处理程序。
3. 冒泡阶段：触发内层div的冒泡事件处理程序。

输出结果为：

Outer div clicked
Button clicked
Inner div clicked

@前端进阶之旅: 代码已经复制到剪贴板

这个示例展示了事件流中捕获阶段、目标阶段和冒泡阶段的执行顺序。

可以通过addEventListener方法的第三个参数来控制事件处理函数在捕获阶段或冒泡阶段执行，true表示捕获阶段，false或不传表示冒泡阶段。

8 new操作符具体干了什么呢?

• 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
• 属性和方法被加入到 this 引用的对象中
• 新创建的对象由 this 所引用，并且最后隐式的返回 this

实现一个简单的 new 方法，可以按照以下步骤进行操作：

1. 创建一个新的空对象。
2. 将新对象的原型链接到构造函数的原型对象。
3. 将构造函数的作用域赋给新对象，以便在构造函数中使用 this 引用新对象。
4. 执行构造函数，并将参数传递给构造函数。
5. 如果构造函数没有显式返回一个对象，则返回新对象。

function myNew(constructor, ...args) {
  // 创建一个新的空对象
  const newObj = {};

  // 将新对象的原型链接到构造函数的原型对象
  Object.setPrototypeOf(newObj, constructor.prototype);

  // 将构造函数的作用域赋给新对象，并执行构造函数
  const result = constructor.apply(newObj, args);

  // 如果构造函数有显式返回一个对象，则返回该对象；否则返回新对象
  return typeof result === 'object' && result !== null ? result : newObj;
}

@前端进阶之旅: 代码已经复制到剪贴板

使用上述自定义的 myNew 方法，可以实现与 new 操作符类似的效果，如下所示：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var poetry = myNew(Person, 'poetry', 25);
console.log(poetry.name); // 输出: poetry
console.log(poetry.age); // 输出: 25
poetry.sayHello(); // 输出: Hello, my name is poetry

@前端进阶之旅: 代码已经复制到剪贴板

注意，这只是一个简化的实现，不考虑一些复杂的情况，例如原型链的继承和构造函数返回对象的情况。在实际应用中，建议使用内置的 new 操作符来创建对象实例，因为它处理了更多的细节和边界情况。

9 Ajax原理

• Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据
• Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制

// 手写简易ajax
/** 1. 创建连接 **/
var xhr = null;
xhr = new XMLHttpRequest()
/** 2. 连接服务器 **/
xhr.open('get', url, true)
/** 3. 发送请求 **/
xhr.send(null);
/** 4. 接受请求 **/
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			success(xhr.responseText);
		} else {
			/** false **/
			fail && fail(xhr.status);
		}
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

// promise封装
function ajax(url) {
  const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(
            JSON.parse(xhr.responseText)
          )
        } else if (xhr.status === 404 || xhr.status === 500) {
          reject(new Error('404 not found'))
        }
      }
    }
    xhr.send(null)
  })
  return p
}

@前端进阶之旅: 代码已经复制到剪贴板

// 测试
const url = '/data/test.json'
ajax(url)
  .then(res => console.log(res))
  .catch(err => console.error(err))

@前端进阶之旅: 代码已经复制到剪贴板

ajax 有那些优缺点?

• 优点：
  • 通过异步模式，提升了用户体验.
  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
  • Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
  • Ajax可以实现动态不刷新（局部刷新）
• 缺点：
  • 安全问题 AJAX暴露了与服务器交互的细节。
  • 对搜索引擎的支持比较弱。
  • 不容易调试。

10 如何解决跨域问题?

首先了解下浏览器的同源策略 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源

1. 通过jsonp跨域

封装一个可用的 JSONP 方法，可以参考以下示例代码：

function jsonp(url, params, callback) {
  // 生成唯一的回调函数名
  const callbackName = 'jsonp_' + Date.now();

  // 将参数拼接到 URL 中
  const queryString = Object.keys(params)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
    .join('&');

  // 创建 script 元素
  const script = document.createElement('script');
  script.src = url + '?' + queryString + '&callback=' + callbackName;

  // 定义回调函数
  window[callbackName] = function(data) {
    // 调用回调函数
    callback(data);

    // 删除 script 元素和回调函数
    document.head.removeChild(script);
    delete window[callbackName];
  };

  // 将 script 元素添加到页面中
  document.head.appendChild(script);
}

@前端进阶之旅: 代码已经复制到剪贴板

使用示例：

jsonp('http://www.example.com/api', { user: 'admin' }, function(data) {
  console.log(data);
});

@前端进阶之旅: 代码已经复制到剪贴板

这个 jsonp 函数接受三个参数：URL、参数对象和回调函数。它会生成一个唯一的回调函数名，并将参数拼接到 URL 中。然后创建一个 <script> 元素，并将 URL 设置为带有回调函数名的 URL。定义一个全局的回调函数，当响应返回时调用该回调函数，并将数据传递给回调函数。最后将 <script> 元素添加到页面中，触发跨域请求。当请求完成后，删除 <script> 元素和回调函数。

这样，你就可以通过封装的 JSONP 方法来实现跨域请求并获取响应数据了。

2. document.domain + iframe跨域

自 Chrome 101 版本开始，document.domain 将变为可读属性，也就是意味着上述这种跨域的方式被禁用了

此方案仅限主域相同，子域不同的跨域应用场景

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

@前端进阶之旅: 代码已经复制到剪贴板

2.）子窗口：(http://child.domain.com/b.html)

document.domain = 'domain.com';
// 获取父窗口中的变量
alert('get js data from parent ---> ' + window.parent.user);

@前端进阶之旅: 代码已经复制到剪贴板

3. nginx代理跨域

通过 Nginx 配置反向代理，将跨域请求转发到同源接口，从而避免浏览器的同源策略限制。

下面是一个示例配置，展示了如何通过 Nginx 实现跨域代理：

server {
  listen 80;
  server_name your-domain.com;

  location /api {
    # 设置代理目标地址
    proxy_pass http://api.example.com;

    # 设置允许的跨域请求头
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

    # 处理预检请求（OPTIONS 请求）
    if ($request_method = OPTIONS) {
      return 200;
    }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

在上面的示例中，假设你的域名是 your-domain.com，需要代理访问 api.example.com。你可以将这个配置添加到 Nginx 的配置文件中。

这个配置会将 /api 路径下的请求代理到 http://api.example.com。同时，通过添加 Access-Control-Allow-* 头部，允许跨域请求的来源、方法、头部等。

这样，当你在前端发送请求到 /api 路径时，Nginx 会将请求代理到 http://api.example.com，并在响应中添加跨域相关的头部，从而解决跨域问题。注意要根据实际情况进行配置，包括监听的端口、域名和代理的目标地址等。

4. nodejs中间件代理跨域

使用 Node.js 构建一个中间件，在服务器端代理请求，将跨域请求转发到同源接口，然后将响应返回给前端。

可以使用 http-proxy-middleware 模块来创建一个简单的代理服务器。下面是一个示例代码：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 创建代理中间件
const apiProxy = createProxyMiddleware('/api', {
  target: 'http://api.example.com', // 设置代理目标地址
  changeOrigin: true, // 修改请求头中的 Origin 为目标地址
  pathRewrite: {
    '^/api': '', // 重写请求路径，去掉 '/api' 前缀
  },
  // 可选的其他配置项...
});

// 将代理中间件应用到 '/api' 路径
app.use('/api', apiProxy);

// 启动服务器
app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

@前端进阶之旅: 代码已经复制到剪贴板

在上面的示例中，首先使用 express 框架创建一个服务器实例。然后，使用 http-proxy-middleware 模块创建一个代理中间件。通过配置代理中间件的 target 选项，将请求代理到目标地址 http://api.example.com。

你可以通过其他可选的配置项来进行更多的定制，例如修改请求头、重写请求路径等。在这个示例中，我们将代理中间件应用到路径 /api 下，即当请求路径以 /api 开头时，会被代理到目标地址。

最后，启动服务器并监听指定的端口（这里是 3000）。

请确保你已经安装了 express 和 http-proxy-middleware 模块，并将上述代码保存为一个文件（例如 proxy-server.js）。然后通过运行 node proxy-server.js 来启动代理服务器。

现在，当你在前端发送请求到 /api 路径时，Node.js 代理服务器会将请求转发到 http://api.example.com，从而实现跨域访问。记得根据实际情况修改目标地址和端口号。

5. 后端在头部信息里面设置安全域名

后端可以在响应的头部信息中设置 Access-Control-Allow-Origin 字段，指定允许跨域访问的域名。例如，在 Node.js 中可以使用 cors 模块来实现：

const express = require('express');
const cors = require('cors');

const app = express();

// 允许所有域名跨域访问
app.use(cors());

// 其他路由和逻辑处理...

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

@前端进阶之旅: 代码已经复制到剪贴板

6. 通过webpack devserver代理

使用 webpack-dev-server 的代理功能可以实现在开发过程中的跨域请求。你可以配置 devServer 对象中的 proxy 选项来设置代理。下面是一个示例配置：

module.exports = {
  // 其他配置项...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 设置代理目标地址
        pathRewrite: { '^/api': '' }, // 重写请求路径，去掉 '/api' 前缀
        changeOrigin: true, // 修改请求头中的 Origin 为目标地址
      },
    },
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

在上面的示例中，我们配置了一个代理，将以 /api 开头的请求转发到 http://api.example.com。通过 pathRewrite 选项，我们去掉了请求路径中的 /api 前缀，以符合目标地址的接口路径。

将上述配置添加到你的 webpack.config.js 文件中，然后启动 webpack-dev-server。现在，当你在前端发送以 /api 开头的请求时，webpack-dev-server 会将请求转发到目标地址，并返回响应结果。

注意，这里的配置是针对开发环境下的代理，当你构建生产环境的代码时，代理配置不会生效。

请确保你已经安装了 webpack-dev-server，并在你的 package.json 文件的 scripts 中添加启动命令，例如：

{
  "scripts": {
    "start": "webpack-dev-server --open"
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

运行 npm start 或 yarn start 来启动 webpack-dev-server。

这样，通过配置 webpack-dev-server 的代理，你就可以在开发过程中实现跨域请求。记得根据实际情况修改目标地址和请求路径。

7. CORS（跨域资源共享）

在服务端设置响应头部，允许特定的域名或所有域名访问该资源。可以通过在响应头部中设置 Access-Control-Allow-Origin 字段来指定允许访问的域名。

示例代码（Node.js + Express）：

const express = require('express');
const app = express();

// 允许所有域名访问
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

// 路由和处理逻辑
// ...

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

@前端进阶之旅: 代码已经复制到剪贴板

8. WebSocket

使用 WebSocket 协议进行通信，WebSocket 不受同源策略限制，因此可以在不同域之间进行双向通信。

示例代码（JavaScript）：

const socket = new WebSocket('ws://example.com/socket');

socket.onopen = () => {
  console.log('WebSocket connection established.');
  // 发送数据
  socket.send('Hello, server!');
};

socket.onmessage = (event) => {
  console.log('Received message from server:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket connection closed.');
};

@前端进阶之旅: 代码已经复制到剪贴板

9. 代理服务器

在同一域名下，前端通过发送请求给同域下的代理服务器，然后由代理服务器转发请求到目标服务器，并将响应返回给前端，实现跨域请求。

示例代码（Node.js + Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/data', (req, res) => {
  // 向目标服务器发送请求
  axios.get('http://api.example.com/data')
    .then((response) => {
      // 将目标服务器的响应返回给前端
      res.json(response.data);
    })
    .catch((error) => {
      res.status(500).json({ error: 'An error occurred' });
    });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

@前端进阶之旅: 代码已经复制到剪贴板

11 模块化开发怎么做？

当涉及模块化开发时，有多种方法可供选择：

1. 立即执行函数模式：

• 使用立即执行函数来创建模块，将私有成员放在函数作用域内，不直接暴露给外部。
• 通过返回一个包含公共方法的对象，使这些方法可以在外部访问。

var module = (function() {
  var privateVar = 'Private Variable';

  function privateMethod() {
    console.log('This is a private method');
  }

  function publicMethod() {
    console.log('This is a public method');
  }

  return {
    publicMethod: publicMethod
  };
})();

module.publicMethod(); // Output: This is a public method

@前端进阶之旅: 代码已经复制到剪贴板

2. CommonJS：

• 使用 require 导入模块，使用 module.exports 或 exports 导出模块。
• 适用于 Node.js 环境。

// math.js
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract
};

@前端进阶之旅: 代码已经复制到剪贴板

// app.js
const math = require('./math');

console.log(math.add(2, 3)); // Output: 5
console.log(math.subtract(5, 2)); // Output: 3

@前端进阶之旅: 代码已经复制到剪贴板

3. ES Modules：

• 使用 import 导入模块，使用 export 导出模块。
• 适用于现代浏览器环境和支持 ES6 模块的工具链。

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

@前端进阶之旅: 代码已经复制到剪贴板

// app.js
import { add, subtract } from './math';

console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3

@前端进阶之旅: 代码已经复制到剪贴板

4. AMD（Asynchronous Module Definition）：

• 使用 define 定义模块，通过异步加载模块。
• 适用于浏览器环境和需要按需加载模块的场景。

// math.js
define([], function() {
  function add(a, b) {
    return a + b;
  }

  function subtract(a, b) {
    return a - b;
  }

  return {
    add,
    subtract
  };
});

@前端进阶之旅: 代码已经复制到剪贴板

// app.js
require(['math'], function(math) {
  console.log(math.add(2, 3)); // Output: 5
  console.log(math.subtract(5, 2)); // Output: 3
});

@前端进阶之旅: 代码已经复制到剪贴板

以上是常见的模块化开发方式，每种方式都有自己的特点和使用场景，可以根据具体需求选择适合的模块化规范。

12 异步加载JS的方式有哪些？

你提到的异步加载 JS 的方式都是常见且有效的方法。以下是对每种方式的简要介绍：

1. 设置<script>属性 async="async"：

• 通过将async属性设置为"async"，脚本将异步加载并立即执行，不会阻塞页面的解析和渲染。
• 脚本加载完成后，将在页面中的任何位置立即执行。

<script src="script.js" async="async"></script>

@前端进阶之旅: 代码已经复制到剪贴板

2. 动态创建 script DOM：

• 使用 JavaScript 动态创建 <script> 元素，并将其添加到文档中。
• 通过设置 src 属性指定脚本的 URL，异步加载脚本。

var script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script);

@前端进阶之旅: 代码已经复制到剪贴板

3. XmlHttpRequest 脚本注入：

• 使用 XmlHttpRequest 对象加载脚本内容，并将其注入到页面中。
• 通过异步请求获取脚本内容后，使用 eval() 函数执行脚本。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'script.js', true);
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
   eval(xhr.responseText);
 }
};
xhr.send();

@前端进阶之旅: 代码已经复制到剪贴板

4. 异步加载库 LABjs：

• LABjs 是一个用于异步加载 JavaScript 的库，可以管理和控制加载顺序。
• 它提供了简洁的 API 来定义和加载依赖关系，以及控制脚本加载的时机。

$LAB
 .script('script1.js')
 .wait()
 .script('script2.js');

@前端进阶之旅: 代码已经复制到剪贴板

5. 模块加载器 Sea.js：

• Sea.js 是一个用于 Web 端模块化开发的加载器，可以异步加载和管理模块依赖关系。
• 它支持异步加载 JavaScript 模块，并在模块加载完成后执行回调函数。

seajs.use(['module1', 'module2'], function(module1, module2) {
 // 执行依赖模块加载完成后的逻辑
});

@前端进阶之旅: 代码已经复制到剪贴板

6. Deferred Scripts（延迟脚本）：

• 使用 <script> 元素的 defer 属性可以将脚本延迟到文档解析完成后再执行。
• 延迟脚本会按照它们在文档中出现的顺序执行，但在 DOMContentLoaded 事件触发之前执行。

<script src="script.js" defer></script>

@前端进阶之旅: 代码已经复制到剪贴板

7. Dynamic Import（动态导入）：

• 使用动态导入语法 import() 可以异步加载 JavaScript 模块。
• 这种方式返回一个 Promise 对象，可以通过 then() 方法处理模块加载完成后的逻辑。

import('module.js')
 .then(module => {
   // 执行模块加载完成后的逻辑
 })
 .catch(error => {
   // 处理加载失败的情况
 });

@前端进阶之旅: 代码已经复制到剪贴板

8. Web Workers（Web 工作者）：

• Web Workers 是运行在后台线程中的 JavaScript 脚本，可以进行耗时操作而不会阻塞主线程。
• 可以使用 Web Workers 异步加载和执行 JavaScript 脚本，以提高页面的响应性。

var worker = new Worker('worker.js');
worker.onmessage = function(event) {
 // 处理从 Worker 返回的消息
};
worker.postMessage('start');

@前端进阶之旅: 代码已经复制到剪贴板

13 那些操作会造成内存泄漏？

JavaScript 内存泄露指对象在不需要使用它时仍然存在，导致占用的内存不能使用或回收

• 未使用 var 声明的全局变量
• 闭包函数(Closures)
• 循环引用(两个对象相互引用)
• 控制台日志(console.log)
• 移除存在绑定事件的DOM元素(IE)
• setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
• 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收

下面是一些常见操作可能导致内存泄漏的示例代码：

1. 未使用 var 声明的全局变量：

function foo() {
  bar = 'global variable'; // 没有使用 var 声明
}
foo();

@前端进阶之旅: 代码已经复制到剪贴板

1. 闭包函数（Closures）：

function outer() {
  var data = 'sensitive data';
  return function() {
    // 内部函数形成了闭包
    console.log(data);
  };
}
var inner = outer();
inner(); // 闭包引用了外部函数的变量，导致变量无法被释放

@前端进阶之旅: 代码已经复制到剪贴板

1. 循环引用：

function createObjects() {
  var obj1 = {};
  var obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1;
  // 对象之间形成循环引用，导致无法被垃圾回收
}
createObjects();

@前端进阶之旅: 代码已经复制到剪贴板

1. 控制台日志（console.log）：

function processData(data) {
  console.log(data); // 控制台日志可能会引用数据，阻止垃圾回收
  // 处理数据的逻辑
}

@前端进阶之旅: 代码已经复制到剪贴板

1. 移除存在绑定事件的 DOM 元素（IE）：

var element = document.getElementById('myElement');
element.onclick = function() {
  // 处理点击事件
};
// 移除元素时没有显式地解绑事件处理程序，可能导致内存泄漏（在 IE 浏览器中）
element.parentNode.removeChild(element);

@前端进阶之旅: 代码已经复制到剪贴板

1. 使用字符串作为 setTimeout 的第一个参数：

setTimeout('console.log("timeout");', 1000);
// 使用字符串作为参数，会导致内存泄漏（不推荐）