【2】「2021」前端总结之HTML篇

秋玄语道
332 阅读22分钟

1、HTML、XML、XHTML 的区别

  • HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
  • XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
  • XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

2、HTML5比HTML多了哪些？

1. 语义化标签

  • header：定义文档的页眉（头部）；
  • nav：定义导航链接的部分；
  • footer：定义文档或节的页脚（底部）；
  • article：定义文章内容；
  • section：定义文档中的节（section、区段）；
  • aside：定义其所处内容之外的内容（侧边）；
  • detail：用于描述文档或文档某个部分的细节；

2.媒体标签

（1） audio：音频

<audio src='' controls autoplay loop='true'></audio>

属性：

  • controls 控制面板
  • autoplay 自动播放
  • loop=‘true’ 循环播放

（2）video视频

<video src='' poster='imgs/aa.jpg' controls></video>

属性：

  • poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
  • controls 控制面板
  • width
  • height

（3）source标签 因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

3. 表单

表单类型：

  • email ：能够验证当前输入的邮箱地址是否合法
  • url ： 验证URL
  • number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
  • search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
  • range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
  • color ： 提供了一个颜色拾取器
  • time ： 时分秒
  • data ： 日期选择年月日
  • datatime ： 时间和日期(目前只有Safari支持)
  • datatime-local ：日期时间控件
  • week ：周控件
  • month：月控件

表单属性：

  • placeholder ：提示信息

  • autofocus ：自动获取焦点

  • autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：

    • 表单必须提交过
    • 必须有name属性。

  • required：要求输入框不能为空，必须有值才能够提交。

  • pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"

  • multiple：可以选择多个文件或者多个邮箱

  • form=" form表单的ID"

表单事件：

  • oninput 每当input里的输入框内容发生变化都会触发此事件。
  • oninvalid 当验证不通过时触发此事件。

4. 进度条、度量器

  • progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少

  • meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）

    • high/low：规定被视作高/低的范围
    • max/min：规定最大/小值
    • value：规定当前度量值

设置规则：min < low < high < max

5.DOM查询操作

  • document.querySelector()
  • document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

7. 其他

  • 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：
<img draggable="true" />
复制代码
  • 画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
复制代码
  • SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
  • 地理定位：Geolocation（地理定位）用于定位用户的位置。‘

总结： （1）新增语义化标签：nav、header、footer、aside、section、article （2）音频、视频标签：audio、video （3）数据存储：localStorage、sessionStorage （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） （5）input标签新增属性：placeholder、autocomplete、autofocus、required （6）history API：go、forward、back、pushstate

移除的元素有：

  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
  • 对可用性产生负面影响的元素：frame，frameset，noframes；

3、src和href的区别

src和href都是用来引用外部的资源，它们的区别如下：

  • src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
  • href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

4、对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

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

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

5、常⽤的meta标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

（1）charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" >

（2） keywords，页面关键词：

<meta name="keywords" content="关键词" />

（3）description，页面描述：

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

  • width viewport ：宽度(数值/device-width)
  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

  • all：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • follow：页面上的链接可以被查询；
  • noindex：文件将不被检索；
  • nofollow：页面上的链接不可以被查询。

6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • 行内元素有：a b span img input select strong；
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

  • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
  • 鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

7、HTML5的离线储存怎么使用，它的工作原理是什么

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

**原理：**HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

<html lang="en" manifest="index.manifest">

（2）在 cache.manifest 文件中编写需要离线存储的资源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
  • CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
  • NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
  • FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

如何更新缓存：

（1）更新 manifest 文件

（2）通过 javascript 操作

（3）清除浏览器缓存

注意事项：

（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

（4）FALLBACK 中的资源必须和 manifest 文件同源。

（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

8、浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

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

9、iframe 有那些优点和缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

优点：

  • 解决加载缓慢的第三方内容如图标和广告等的加载问题
  • 并行加载脚本

缺点：

  • iframe会阻塞主页面的Onload事件；
  • 搜索引擎的检索程序无法解读这种页面，不利于SEO;
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
  • 即使内容为空，加载也需要时间

10、label 的作用是什么？如何使用？

label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

  • 使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
复制代码
  • 使用方法2：
<label>Date:<input type="text"/></label>

11、Canvas和SVG的区别

（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

12、cookie、seession和token

1. cookie和seession区别

  • cookie数据存放在客户的浏览器上，session数据放在服务器上。
  • cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
  • session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。
  • 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
  • 所以个人建议：将登陆信息等重要信息存放为SESSION,其他信息如果需要保留，可以放在COOKIE中

2. cookie 和 token 的区别？

  • token是 服务经过计算发给客户端的，服务不保存，每次客户端来请求，经过解密等计算来验证是否是自己下发的
  • session是服务本地保存，发给客户端，客户端每次访问都带着，直接和服务的session比对
  • cookie是保存在客户端上的一些基本信息，服务不保存，每次请求时客户端带上cookie，里面有一些账户密码，浏览记录什么的

3. token 如何传递？token 的安全性？token 的签名怎么实现？token 的缺点？

  • 如何传递：前端放到header里面传给后台

  • 安全性：

    • 接口的安全性主要围绕token、timestamp和sign三个机制展开设计，保证接口的数据不会被篡改和重复调用，下面具体来看：

    • Token授权机制：

      • 用户使用用户名密码登录后服务器给客户端返回一个Token（通常是UUID），并将Token-UserId以键值对的形式存放在缓存服务器中。服务端接收到请求后进行Token验证，如果Token不存在，说明请求无效。Token是客户端访问服务端的凭证。

    • 时间戳超时机制：

      • 用户每次请求都带上当前时间的时间戳timestamp，服务端接收到timestamp后跟当前时间进行比对，如果时间差大于一定时间（比如5分钟），则认为该请求失效。时间戳超时机制是防御DOS攻击的有效手段。

    • 签名机制：

      • 将 Token 和 时间戳 加上其他请求参数再用MD5或SHA-1算法（可根据情况加点盐）加密，加密后的数据就是本次请求的签名sign，服务端接收到请求后以同样的算法得到签名，并跟当前的签名进行比对，如果不一样，说明参数被更改过，直接返回错误标识。签名机制保证了数据不会被篡改。

    • token的认证流程：

      1. 客户端通过用户名密码登录服务器并获取Token
      2. 客户端生成时间戳timestamp，并将timestamp作为其中一个参数。
      3. 客户端将所有的参数，包括Token和timestamp按照自己的算法进行排序加密得到签名sign
      4. 将token、timestamp和sign作为请求时必须携带的参数加在每个请求的URL后边（api.com/users?token…
      5. 服务端写一个过滤器对token、timestamp和sign进行验证，只有在token有效、timestamp未超时、缓存服务器中不存在sign三种情况同时满足，本次请求才有效

    • 在以上三中机制的保护下，如果有人劫持了请求，并对请求中的参数进行了修改，签名就无法通过；如果有人使用已经劫持的URL进行DOS攻击，服务器则会因为缓存服务器中已经存在签名或时间戳超时而拒绝服务，所以DOS攻击也是不可能的；

  • 签名实现：

    • 将 Token 和 时间戳 加上其他请求参数再用MD5或SHA-1算法（可根据情况加点盐）加密，加密后的数据就是本次请求的签名sign，服务端接收到请求后以同样的算法得到签名，并跟当前的签名进行比对，如果不一样，说明参数被更改过，直接返回错误标识。签名机制保证了数据不会被篡改。

  • 缺点：token 最大的缺点就是它的大小，最小的它都比 cookie 要大，如果 token 中包含很多声明，那问题就会变得比较严重，毕竟向服务器发送的每个请求都要有这个 token。（意思应该是太大了会导致请求缓慢）

  • 基于Token的验证原理

    • 基于Token的身份验证的过程如下:

      1. 用户通过用户名和密码发送请求。
      2. 程序验证。
      3. 程序返回一个签名的token 给客户端。
      4. 客户端储存token,并且每次用于每次发送请求。
      5. 服务端验证token并返回数据。

    • 每一次请求都需要token。token应该在HTTP的头部发送从而保证了Http请求无状态。我们同样通过设置服务器属性Access-Control-Allow-Origin:* ，让服务器能接受到来自所有域的请求。需要主要的是，在ACAO头部标明(designating)*时，不得带有像HTTP认证，客户端SSL证书和cookies的证书。

  • Token的优势（好处）

    • 无状态、可扩展

      • 在客户端存储的Tokens是无状态的，并且能够被扩展。基于这种无状态和不存储Session信息，负载负载均衡器能够将用户信息从一个服务传到其他服务器上。如果我们将已验证的用户的信息保存在Session中，则每次请求都需要用户向已验证的服务器发送验证信息(称为Session亲和性)。用户量大时，可能会造成一些拥堵。但是不要着急。使用tokens之后这些问题都迎刃而解，因为tokens自己hold住了用户的验证信息。

    • 安全性

      • 请求中发送token而不再是发送cookie能够防止CSRF(跨站请求伪造)。即使在客户端使用cookie存储token，cookie也仅仅是一个存储机制而不是用于认证。不将信息存储在Session中，让我们少了对session操作。token是有时效的，一段时间之后用户需要重新验证。我们也不一定需要等到token自动失效，token有撤回的操作，通过token revocataion可以使一个特定的token或是一组有相同认证的token无效。

    • 可扩展性

      • Tokens能够创建与其它程序共享权限的程序。例如，能将一个随便的社交帐号和自己的大号(Fackbook或是Twitter)联系起来。当通过服务登录Twitter(我们将这个过程Buffer)时，我们可以将这些Buffer附到Twitter的数据流上(we are allowing Buffer to post to our Twitter stream)。使用tokens时，可以提供可选的权限给第三方应用程序。当用户想让另一个应用程序访问它们的数据，我们可以通过建立自己的API，得出特殊权限的tokens。

    • 多平台跨域

      • 我们提前先来谈论一下CORS(跨域资源共享)，对应用程序和服务进行扩展的时候，需要介入各种各种的设备和应用程序。只要用户有一个通过了验证的token，数据和资源就能够在任何域上被请求到。

    • 基于标准

      • 创建token的时候，你可以设定一些选项。我们在后续的文章中会进行更加详尽的描述，但是标准的用法会在JSON Web Tokens体现。最近的程序和文档是供给JSON Web Tokens的。它支持众多的语言。这意味在未来的使用中你可以真正的转换你的认证机制。

13、 请描述cookie、sessionStorage和localStorage的区别

  1. cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

  2. cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

  3. sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

  4. 存储大小：

    • cookie数据大小不能超过4k。
    • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

  5. 有期时间：

    • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
    • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
    • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

14、cookie

1. 如何防止cookie被盗用？

  • 禁止第三方网站带cookie(same-site属性)
  • 每次请求需要输入图形验证码
  • 使用Token验证
  • 为cookie设置HttpOnly
  • 设置CSP
  • 使用Referer验证
  • 禁止网页内嵌
  • 使用https
  • cookie带上用户ip加密

2. 如何防止cookie被盗用？

  • httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。
  • secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie

3. 如何设置cookie的过期时间

  • 通过设置expires属性。如果Cookie没有设置expires属性，那么 cookie 的生命周期只是在当前的会话中，关闭浏览器意味着这次会话的结束，此时 cookie 随之失效。

15、 web worker

1.什么是web worker？

web worker 是运行在后台的 JavaScript，不会影响页面的性能。提供协程能力，如果有一个比较密集的计算任务，可以放到另一个进程中处理，等处理好了再把结果传回主程，这样主要进程就不会阻塞，页面可以正常渲染和响应,可充分利用多核的CPU

2.Web Worker线程的限制是什么？

  1. 同源限制

    • 分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

  2. DOM 限制

    • Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

  3. 通信联系

    • Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

  4. 脚本限制

    • Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

  5. 文件限制

    • Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

16、请谈谈你对重绘与回流的理解

  • 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少

  • 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作

  • 会触发回流的操作:

    1. 页面初次渲染
    2. 浏览器窗口大小改变
    3. 元素尺寸、位置、内容发生改变
    4. 元素字体大小变化
    5. 添加或者删除可见的 dom 元素
    6. 激活 CSS 伪类（例如：:hover）
    7. 查询某些属性或调用某些方法：
      {1}.clientWidth、clientHeight、clientTop、clientLeft
      {2}.offsetWidth、offsetHeight、offsetTop、offsetLeft
      {3}.scrollWidth、scrollHeight、scrollTop、scrollLeft
      {4}.getComputedStyle()
      {5}.getBoundingClientRect()
      {6}.scrollTo()

  • 回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

17、回流和重绘的区别，怎么避免回流

  • 区别：

    • 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
    • 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
    • 注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值
    • 回流必将引起重绘，而重绘不一定会引起回流

  • 如何避免：

    • css:

      • 避免设置多层内联样式。
      • 如果需要设置动画效果，最好将元素脱离正常的文档流。
      • 避免使用CSS表达式（例如：calc()）。

    • js:

      • 避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。
      • 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
      • 可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。
avatar
文章
阅读
粉丝