前端面试题之HTML和浏览器

00-一些术语

  • DTD：Document Type Definition文档类型定义，是一组机器可读规则，定义XML和HTML的特定版本中所有允许元素及它们的属性和层次关系的定义。DTD对HTML文档的声明会影响浏览器的渲染模式。
  • SGML：标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言。
  • HTML：超文本标记语言，主要用于规定怎么显示网页。
  • XML：可扩展标记语言是未来网页语言的发展方向，XML和HTML的最大区别就是XML的标记可以自定义，数量不限，而HTML标记都是固定的，而且数量有限。XML主要用于存储数据，目前这一功能被JSON取代。
  • XHTML： 可扩展超文本标记语言，是现在基本所有网页都在使用的标记语言，本质上和HTML没什么区别，只是XHTML语法更严格，如标签必须小写，需要闭合等。

01-DOCTYPE的作用

<!DOCTYPE>声明写在HTML文件的第一行，目的是告知浏览器用什么文档标准解析文档。

写了文档类型声明后，浏览器解析器会用标准模式来解析。

不写doctype或者书写不正确，浏览器会以向后兼容的方式来解析文档，以保证老的网站能正确访问。

HTML5只需要声明<!doctype html>，HTML5不基于SGML，不需要声明DTD。

IE5.5引入了文档模式概念，通过使用doctype实现切换。

标准模式与兼容模式的区别：

标准模式的渲染方式和JS引擎解析方式都是以该浏览器最高标准运行。

兼容模式中，页面以向后兼容的方式显示，以防止老网站能正确访问。

02-HTML元素分类

HTML4中，元素分为两大类：inline内联元素与block块级元素。

内联元素：也叫行内元素，一个行内元素只占据它对应标签的边框所包含的内容。常见的行内元素： span strong button input 等等

块级元素：占据容器整个宽度。常见的块级元素：div ul li dl ol h1 p 等等

行内元素与块级元素的区别：

  • 格式上，默认情况下，行内元素一行可以放多个，块级元素则独占一行
  • 内容上，默认情况下，行内元素只能包含文本和其他行内元素，而块级元素则可以包含行内元素和其他块级元素（特殊情况：div元素中不能包含p标签，a标签中可以放任何元素）
  • 行内元素与块级元素属性的不同主要体现在盒子模型上，行内元素不能设置宽高，靠内容撑开，上下内外边距不会影响其他元素。

HTML4中的分类不够完善，实际开发过程中因为页面表现的需要，产出了inline-block行内块元素。通过css设置display属性转换显示模式。

HTML5中，元素主要分成了7类：Metadata、Flow、 Sectioning、 Heading 、Phrasing 、Embedded、 Interactive。

03-空元素

标签中没有内容的HTML标签称为空元素或自闭合标签。空元素是在开始标签中关闭。

常见的空元素：hr br img input link meta

04-外部样式引入

link标签定义文档与外部资源的关系，只能存放在head中，次数不限。

link标签的rel属性定义当前文档与被链接文档之间的关系，常见的stylesheet指的是定义一个外部加载样式表

<head>
  <link rel="stylesheet" href="./css/base.css">
</head>

除了通过link导入外部样式，还可以通过@import导入样式

<style>
	@import '../css/base.css'
</style>

link与@import的区别：

  • 从属关系上：link是标准的html标签，除了导入样式表外还有其他作用，@import是CSS语法规则，只有导入样式表作用。
  • 加载顺序上：link引入的css被同时加载，@import引入的css将在页面加载完毕后才加载
  • 兼容性：link是标签，不能存在兼容问题，@import是css2.1才有的语法，IE5+才能识别
  • link可以被JS进行DOM操作，而@import不行。

05-简单理解浏览器

浏览器主要功能是将用户选择的web资源呈现出来，需要从服务器请求资源，并展示在浏览器窗口中。通用资源格式是html，也包括pdf、image及其他格式。用户通过URL来指定请求资源位置。

浏览器会根据web标准解析资源，但由于浏览器厂商自己的扩展，不同的浏览器对标准的支持不同，带来了严重兼容性问题。

简单说，浏览器分为内核和外壳shell，外壳很多，内核比较少。浏览器的外壳指的是菜单、工具栏等，主要提供给用户进行界面操作，参数设置等。内核才是浏览器的核心。内核基于标记语言显示内容的程序或模块，有些浏览器不区分外壳和内核。Mazilla将Gecko独立出来后才有了内核外壳的明确划分。

06-对浏览器内核的简单理解

内核主要分为两部分：渲染引擎和JS引擎

渲染引擎就是在浏览器窗口中显示请求的内容，默认情况下，渲染引擎可以显示HTML、XML及图片，可以借助一些浏览器扩展显示其他类型数据，如PDF等。

JS引擎解析执行JavaScript实现网页动态效果，最开始渲染引擎和JS引擎并没有明确的区分，后来JS引擎越来独立（如V8引擎）,内核就倾向于指渲染引擎。

07-常见的浏览器内核

Trident：IE浏览器内容，IE浏览器虽然已经不在维护，但Trident内核还在被使用。这种内核bug很多，但使用范围广。

Gecko：Firefox和Flock采用的内核，功能强大但内存消耗高。

Presto：Opera曾经的内核，速度快，但兼容性较差。

Webkit：Safari的内核，速度较快，对网页的兼容性较低。

Blink：Webkit的分支，Chrome浏览器和现在的Opera浏览器内核。

除了这些浏览器内核，国内的浏览器很多都是使用IE+Chrom双内核，UC浏览器宣称研发了U3内核，但似乎还是基于Webkit和Trifent，也有说基于火狐内核。

08-浏览器渲染原理

（1）首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元
素及属性节点组成的。

（2）然后对 CSS 进行解析，生成 CSSOM 规则树。

（3）根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，
渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种
对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应
几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。

（4）当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲
染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是
要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

（5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们
的内容显示在屏幕上，绘制使用 UI 基础组件。值得注意的是，这个过程是逐步完成的，为
了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html
都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同
时，可能还在通过网络下载其余内容。

09-浏览器解析JS

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时， HTML
解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，
等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。

并不是说 script 标签必须放在底部，可以给 script 标签添加 defer 或者 async 属性。

defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。

async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

10-文档预解析

Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，只解析外部资源的引用，比如外部脚本、样式表及图片。

11-CSS怎么阻塞文档解析

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，但JS执行时可能在文档解析过程中请求样式信息，如果样式没有加载和解析会产生错误，导致许多问题。

如果浏览器尚未完成 CSSOM 的下载和构建，却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

12-页面渲染时常见的不良现象

FOUC：主要指的是样式闪烁的问题，由于浏览器渲染机制（比如 firefox），在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。

白屏：有些浏览器渲染机制（比如 chrome）要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。

13-优化关键渲染路径

为尽快完成首次渲染，需要最大限度减小以下三种可变因素：

  • 关键资源的数量。
  • 关键路径长度。
  • 关键字节的数量。

关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。

关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。

浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。

优化关键渲染路径的常规步骤如下：
（1）对关键路径进行分析和特性描述：资源数、字节数、长度。
（2）最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。
（3）优化关键字节数以缩短下载时间（往返次数）。
（4）优化其余关键资源的加载顺序：需要尽早下载所有关键资产，以缩短关键路径长度。

14-重绘与回流

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background color，将这样的操作称为重绘。

回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作称为回流。

常见引起回流属性和方法：
任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
（1）添加或者删除可见的 DOM 元素；
（2）元素尺寸改变——边距、填充、边框、宽度和高度
（3）内容变化，比如用户在 input 框中输入文字
（4）浏览器窗口尺寸改变——resize 事件发生时
（5）计算 offsetWidth 和 offsetHeight 属性
（6）设置 style 属性的值
（7）当你修改网页的默认字体时。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

减少回流的方法：

（1）使用 transform 替代 top
（2）不要把节点的属性值放在一个循环里当成循环里的变量
（3）不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
（4）把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM
（5）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。

可能发生的回流和重绘会导致DOM操作慢，从而影响性能。

15-DOMContentLoaded 事件和 Load 事件的区别

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的加载完成。

Load 事件是当所有资源加载完成后触发的。

16-HTML5 有哪些新特性、移除了那些元素

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
新增的有：
绘画 canvas;

用于媒介回放的 video 和 audio 元素;

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

sessionStorage 的数据在浏览器关闭后自动删除;

语意化更好的内容元素，比如 article、footer、header、nav、section;

表单控件，calendar、date、time、email、url、search;

新的技术 webworker, websocket;

新的文档属性 document.visibilityState

移除的元素有：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;

对可用性产生负面影响的元素：frame，frameset，noframes；

17-如何处理 HTML5 新标签的浏览器兼容问题

（1） IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式。

（2）当然也可以直接使用成熟的框架，比如 html5shim

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

[if lte IE 9]……[endif] 判断 IE 的版本，限定只有 IE9 以下浏览器版本需要执行的语句。

18-HTML 语义化

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

19-前端需要注意哪些 SEO

  • 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同； description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可。
  • 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
  • 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
  • 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
  • 少用 iframe：搜索引擎不会抓取 iframe 中的内容
  • 非装饰性图片必须加 alt
  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标

20-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 文件发生改变时，资源请求本身也会触发更新。

21-浏览器对 HTML5 的离线储存资源进行管理和加载

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

22-常见的浏览器端的存储技术

浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。

还有两种存储技术用于大规模数据存储，webSQL（已被废除）和 indexDB。

IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

23-cookies,sessionStorage和localStorage的区别

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。

区别在于SessionStorage， LocalStorage属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。

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

有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域：sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。localStorage在所有同源窗口中都是共享的。cookie在所有同源窗口中都是共享的。

24-iframe 有那些缺点

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
主要缺点有
（1） iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。
（2） 搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。
（3） iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
（4） 浏览器的后退按钮失效。
（5） 小型的移动设备无法完全显示框架。

25-38 Label 的作用是什么？是怎么用的

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

<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>

26-HTML5 的 form 的自动完成功能

autocomplete 属 性 规 定 输 入 字 段 是 否 应 该 启 用 自 动 完 成 功 能 。 默 认 为 启 用 ， 设 置 为autocomplete=off 可以关闭该功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone,
email, password, datepickers, range 以及 color。

27-实现浏览器内多个标签页之间的通信

（1）使用 WebSocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端。

（2）使用 SharedWorker （只在 chrome 浏览器实现了），两个页面共享同一个线程，通过向线程发送数据和接收数据来实现标签页之间的双向通行。

（3）可以调用 localStorage、cookies 等本地存储方式，localStorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们通过监听 storage 事件，控制它的值来进行页面信息通信；

（4）如果能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的。

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有
办法直接通信，因此可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发:

  • 第一种实现的方式是使用 websocket 协议，因为 websocket 协议可以实现服务器推送，
    所以服务器就可以用来当做这个中介者。 标签页通过向服务器发送数据，然后由服务器向
    其他标签页推送转发。
  • 第二种是使用 ShareWorker 的方式， shareWorker 会在页面存在的生命周期内创建一个
    唯一的线程，并且开启多个页面也只会使 用同一个线程。这个时候共享线程就可以充当中
    介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。
  • 第三种方式是使用 localStorage 的方式，可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。
  • 第四种方式是使用 postMessage 方法，如果能够获得对应标签页的引用，就可以使用 postMessage 方法，进行通信。

28-页面可见性（Page Visibility API） 可以有哪些用途

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。
（1）对服务器的轮询
（2）网页动画
（3）正在播放的音频或视频

29-Canvas 和 SVG 有什么区别

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。 Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。

30-渐进增强和优雅降级的定义

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

优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

31-attribute 和 property 的区别

attribute 是 dom 元素在文档中作为 html 标签拥有的属性；

property 就是 dom 元素在 js 中作为对象拥有的属性。

对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。

32-对 web 标准、可用性、可访问性的理解

可用性（Usability）：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。

可访问性（Accessibility）：Web 内容对于残障用户的可阅读和可理解性

可维护性（Maintainability）：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

33-浏览器架构

浏览器架构

34-DHTML

DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。

DHTML 实现了网页从 Web 服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

包括：

（1）动态内容（Dynamic Content）：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。

（2）动态排版样式（Dynamic Style Sheets）：W3C 的 CSS 样式表提供了设定 HTML 标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

35-disabled 和 readonly 的区别

disabled 指当 input 元素加载时禁用此元素。input 内容不会随着表单提交。

readonly 规定输入字段为只读。input 内容会随着表单提交。

无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value

36-主流浏览器内核私有属性 css 前缀

内核 前缀
mozilla 内核 （firefox,flock 等） -moz
webkit 内核 （safari,chrome 等） -webkit
opera 内核 （opera 浏览器） -o
trident 内核 （ie 浏览器） -ms

37-前端性能优化

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验，可以从这些方面来进行优化：

页面方面：

（1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。

（2）通过 DNS 缓存等机制来减少 DNS 的查询次数。

（3）通过设置缓存策略，对常用不变的资源进行缓存。

（4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。

（5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。

服务器方面：

（1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。

（2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。

（3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie

CSS 和 JavaScript 方面：

（1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。

（2）避免使用 @import 标签。

（3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。

（4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。

38-扫码登录的原理

核心过程应该是：浏览器获得一个临时 id，通过长连接等待客户端扫描带有此 id 的二维码后，从长连接中获得客户端上报给 server 的帐号信息进行展示。并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程形成有效的安全防护。

我理解的二维码登录网页的基本原理是，用户进入登录网页后，服务器生成一个 uid 来标识一个用户。对应的二维码对应了一个对应 uid 的链接，任何能够识别二维码的应用都可以获得这个链接，但是它们没有办法和对应登录的服务器响应。比如微信的二维码登录，只有用微信识这个二维码才有效。当微信客户端打开这个链接时，对应的登录服务器就获得了用户的相关信息。这个时候登录网页根据先前的长连接获取到服务器传过来的用户信息进行显示。然后提前预加载一些登录后可能用到的信息。当客户端点击确认授权登陆后，服务器生成一个权限令牌给网页，网页之后使用这个令牌进行信息的交互过程。由于整个授权的过程都是在手机端进行的，因此能够很好的防止 PC 上泛滥的病毒。并且在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程能够形成有效的安全防护。

39-HTML 规范中为什么要求引用资源不加协议头 http 或者 https

如果用户当前访问的页面是通过 HTTPS 协议来浏览的，那么网页中的资源也只能通过HTTPS 协议来引用，否则浏览器会出现警告信息，不同浏览器警告信息展现形式不同。

为了解决这个问题，可以省略 URL 的协议声明，省略后浏览器照样可以正常引用相应的资源，这项解决方案称为 protocol-relative URL，暂且可译作协议相对 URL。

如果使用协议相对 URL，无论是使用 HTTPS，还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，避免弹出类似的警告信息，同时还可以节省 5 字节的数据量。

posted @ 2023-06-23 22:22  渔-火  阅读(15)  评论(0)  编辑  收藏  举报