HTML面试相关问题整理

最新推荐文章于 2024-05-14 17:33:16 发布

tinfengyee

最新推荐文章于 2024-05-14 17:33:16 发布

阅读量440

点赞数

分类专栏：面试前端 # H5C3 文章标签：面试

本文链接：https://blog.csdn.net/tinfengyee/article/details/105721816

版权

前端同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

面试

20 篇文章 0 订阅

订阅专栏

H5C3

8 篇文章 0 订阅

订阅专栏

HTML面试相关问题整理

前言
前端性能优化
HTML5语义化
- b 与 strong 的区别和 i 与 em 的区别？
浏览器架构
一个页面从输入URL到页面加载显示完成，这个过程都发生什么？
为什么最好把 CSS 的``标签放在``之间？为什么最好把 JS 的`script`标签恰好放在``之前，有例外情况吗？
什么是渐进式渲染（progressive rendering）？
viewport
- Viewport属性值
回流Reflow和重绘Repaint
- 常见引起回流属性和方法：
- 如何减少回流？（浏览器绘制过程）
- 为什么操作 DOM 慢？（浏览器绘制过程）
HTML5 有哪些新特性、移除了那些元素？
iframe的作用？缺点
文档的不同注释方式？
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
- COOKIE是如何工作的？
- COOKIE主要用在以下三个方面:
- 三者的用途差异？
- COOKIE的缺陷
- sessionStroage有哪些应用场景？
- 用storage怎么来判断用户是否需要再登陆？
- localStorage是否可以在同源窗口共享？
如何实现浏览器内多个标签页之间的通信?
webSocket 如何兼容低版本浏览器？
前端性能优化？
Canvas 和 SVG 有什么区别？
渐进增强和优雅降级的定义
对 web 标准、可用性、可访问性的理解
IE 各版本和 Chrome 可以并行下载多少个资源？
DOCTYPE 的作用是什么？
SGML 、 HTML 、XML 和 XHTML 的区别？
页面导入样式时，使用 link 和 @import 有什么区别？
href和src区别
css reset 和 normalize.css 有什么区别？
常见的浏览器内核比较
- 主流浏览器内核私有属性 css 前缀？
浏览器的渲染过程？浏览器的渲染原理？
渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程）
- async 和 defer 的作用是什么？有什么区别？（浏览器解析过程）
前端需要注意哪些 SEO ？
用于预格式化文本的标签是？
参考

前言

写完CSS面试相关问题整理，继续整理。

前端性能优化

浏览器前端优化,推荐，从页面渲染来看优化。（这里有页面渲染过程）

减少 HTTP 请求
减少 DOM 操作
避免不必要的重绘与重排
优化 CSS 选择器（从右向左匹配）
CSS/JS minify，减少文件体积
开启 Gzip 压缩
将 CSS 放到顶部，JavaScript 放到尾部
压缩图片以及使用 CSS Sprite
使用 CDN 加速，适当进行文件缓存
合理控制 cookie 大小（每次请求都会包含 cookie）

HTML5语义化

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
好处

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

参考 http://www.daqianduan.com/6549.html

b 与 strong 的区别和 i 与 em 的区别？

从页面显示效果来看，被 <b>和 <strong> 包围的文字将会被加粗，而被<i>和<em>包围的文字将以斜体的形式呈现。

但是 <b> <i>是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为 { font-weight:bolder}，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在 HTML4.01 中并不被推荐使用。

而 <em> 和 <strong>是语义样式标签。<em>表示一般的强调文本，而 <strong>表示比 <em>语义更强的强调文本。

使用阅读设备阅读网页时：<strong>会重读，而<b> 是展示强调内容。

浏览器架构

用户界面
- 主进程
- 内核
  - 渲染引擎
  - JS 引擎
    - 执行栈
  - 事件触发线程
    - 消息队列
      - 微任务
      - 宏任务
  - 网络异步线程
  - 定时器线程

一个页面从输入URL到页面加载显示完成，这个过程都发生什么？

从浏览器输入一个 url 到页面渲染，涉及的知识点及优化点

（1）浏览器url 解析，是否符合url格式，中文会encode等。
（2）在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
（3）浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
（4）握手成功后，浏览器向服务器发送http请求，请求数据包。
（5）服务器处理收到的请求，将数据返回至浏览器
（6）浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。
（7）（生成Dom树、解析css样式、js交互）浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。
（8）最后一步是 TCP 断开连接的四次挥手过程。

其中，步骤2的具体过程是：

浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
ISP（运营商）缓存：若上述均失败，继续向ISP搜索。
域名服务器：到此处的过程为：根域服务器（.） -> 顶级域名服务器（eg: .com，.org）->主域名服务器（eg: google.com）

浏览器如何渲染网页
使用 HTML 创建文档对象模型（DOM）
使用 CSS 创建 CSS 对象模型（CSSOM）
基于 DOM 和 CSSOM 执行脚本（Scripts）
合并 DOM 和 CSSOM 形成渲染树（Render Tree）
使用渲染树布局（Layout）所有元素
渲染（Paint）所有元素

1、HTML的加载

　　HTML是一个网页的基础，下载完成后解析

2、其他静态资源加载

　　解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启用别的线程下载。

　　但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果

3、DOM树构建

　　在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树

4、CSSOM树构建

　　CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树

5、渲染树构建

　　当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树

6、布局计算

　　渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

7、渲染

　　布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

https://blog.csdn.net/jean_0920/article/details/100084233

https://www.cnblogs.com/WaTa/p/5477374.html

为什么最好把 CSS 的`<link>`标签放在`<head>`之间？为什么最好把 JS 的`script`标签恰好放在`</body>`之前，有例外情况吗？

把<link>放在<head>中：

把<link>标签放在<head></head>之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把<script>标签恰好放在</body>之前：

脚本在下载和执行期间会阻塞 HTML 解析。把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含document.write()时。但是现在，document.write()不推荐使用。同时，将<script>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，<script>使用defer属性，放在<head>中。

什么是渐进式渲染（progressive rendering）？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在这里找到。

viewport

Viewport ：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。举个例子：如果我们的屏幕是320像素 * 480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。

Viewport属性值

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

回流Reflow和重绘Repaint

回流Reflow
当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫Reflow（回流或重排）。

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

当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint（重绘）。因此重排必然会引起重绘。

常见引起回流属性和方法：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

（1）添加或者删除可见的 DOM 元素；
（2）元素尺寸改变——边距、填充、边框、宽度和高度
（3）内容变化，比如用户在 input 框中输入文字
（4）浏览器窗口尺寸改变——resize事件发生时
（5）计算 offsetWidth 和 offsetHeight 属性
（6）设置 style 属性的值
（7）当你修改网页的默认字体时。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列
回流。

常见引起重绘属性和方法：
在这里插入图片描述
常见引起回流属性和方法：

如何减少回流？（浏览器绘制过程）

（1）使用 transform 替代 top

（2）比如改变样式的时候，不去改变他们每个的样式，而是直接改变className。（预先定义好 css 的 class，然后修改 DOM 的 className）。

（3）不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

（4）把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM

（5）不要把节点的属性值放在一个循环里当成循环里的变量

详细资料可以参考：《浏览器的回流与重绘》
什么是回流，什么是重绘，有什么区别？

为什么操作 DOM 慢？（浏览器绘制过程）

一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗。

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

史上最全–HTML5新特性都有哪些

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

新增的有：

新的图形标签：SVG, 绘画 canvas;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
新的技术 webworker, websocket;
新的多媒体标签 video 和 audio 元素;
新增的input的type类型和属性, 表单控件(表单类型)，calendar、date、time、email、url、search;
HTML5专有的API 地理位置本地存储缓存等
新的文档属性 document.visibilityState

移除的元素有：

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

iframe的作用？缺点

https://blog.csdn.net/baxiadsy_csdn/article/details/86245809
frame是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

优点

一般用来展示内容，如教程右边的手机
典型的，比如所见即所得的网页编辑器；
便于修改，模拟分离，像一些信息管理系统会用到。
iframe能够原封不动的把嵌入的网页展现出来。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

但现在基本不推荐使用。除非特殊需要，一般不推荐使用。

缺点
7. iframe的创建比一般的DOM元素慢了1-2个数量级
8. iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。
9. iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

文档的不同注释方式？

HTML 的注释方法

CSS 的��释方法/*注释内容*/

JavaScript 的注释方法/* 多行注释方式 */ //单行注释方式

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

请描述一下cookies，sessionStorage和localStorage的区别？
前端存储浅谈——cookie、sessionStorage、localStorage

相关资料：
SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。,sessionStorage, localStorage 不会在请求头携带。

特征	cookie	sessionStorage	localStorage
存储大小	数据大小不能超过4 k	比 cookie 大得多，可以达到 5M 或更大	比 cookie 大得多，可以达到 5M 或更大
有期时间	设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭	(一直存在，除非标签（会话）关闭) 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话	（一直存在，除非手动清空）存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
作用域	在所有同源窗口中都是共享的	只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享	在所有同源窗口中都是共享的

都要同源，不能跨域。

回答：

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏
览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

COOKIE是如何工作的？

Cookie可用于客户端数据的存储，在没有其它存储办法时，使用这种方式是可行的，但随着现在浏览器开始支持各种各样的存储方式而逐渐被废弃。由于服务器指定Cookie以后浏览器的每次请求都会携带Cookie数据，这会带来额外的性能负担（尤其是在移动环境下）。

新的浏览器API已经允许开发者直接在本地存储数据，如可以使用Web storage API （本地存储localStorage和会话存储sessionStorage）和IndexedDB（索引数据库）

COOKIE主要用在以下三个方面:

会话状态管理（如用户登录状态、购物车）
个性化设置（如用户自定义设置）
浏览器行为跟踪（如跟踪分析用户行为）

三者的用途差异？

例如：曾经使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，Cookie就退休了。还有像一些网页游戏会产生一些本地数据，也使用LocalStorage。但如果需要拆分页面，会跳转多个子页面的时候，就需要用到sessionStorage。

COOKIE的缺陷

主要在：性能、安全、大小

每个 HTTP 请求中都包含 Cookies，从而导致传输相同的数据减缓我们的 Web 应用程序。
每个 HTTP 请求中都包含 Cookies，从而导致发送未加密的数据到互联网上，可能会导致数据泄露，虽然进行过加密，但是攻击者拿到cookie后仍然可以登录，因为难以识别是否为同一个用户在登陆。
Cookies 只能存储有限的 4KB 数据，对于复杂的存储需求来说是不够用的。

sessionStroage有哪些应用场景？

答：可以用来做多账户登录, 还有一些政府网站, . …在不需要和服务器交互的场所，用来存储用户数据之类的，可以在路由页跳转的时候取出更改储存，减少调用接口的次数，减轻服务器压力。

用storage怎么来判断用户是否需要再登陆？

答：可以用加密的方法存储，每次用户访问的时候可以取出调用服务器接口作为参数发送进行对比，存在账号密码就直接跳过登录页。

localStorage是否可以在同源窗口共享？

答：同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。

如何实现浏览器内多个标签页之间的通信?

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

（2）使用 SharedWorker （只在 chrome 浏览器实现了），两个页面共享同一个线程，通过向线程发送数据和接收数据来实现标签页之间的双向通行。
（3）可以调用 localStorage、cookies 等本地存储方式，localStorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们通过监听 storage 事件，控制它的值来进行页面信息通信；
（4）如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的。

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

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

webSocket 如何兼容低版本浏览器？

基于长轮询的 XHR
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、

前端性能优化？

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

第一个方面是页面的内容方面

（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 的文件进行压缩，来减小文件的体积。

Canvas 和 SVG 有什么区别？

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

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

详细资料可以参考：《SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？》

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

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

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

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

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

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

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

IE 各版本和 Chrome 可以并行下载多少个资源？

（1） IE6 2 个并发
（2） iE7 升级之后的 6 个并发，之后版本也是 6 个
（3） Firefox，chrome 也是6个

DOCTYPE 的作用是什么？

SGML 、 HTML 、XML 和 XHTML 的区别？

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

HTML 是超文本标记语言，主要是用于规定怎么显示网页。

XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。

XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。

页面导入样式时，使用 link 和 @import 有什么区别？

（1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。

（2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载（并行下载）；@import 引入的 CSS 将在页面加载完毕后被加载。（link 支持并行下载，@import 等待页面加载完成之后再进行加载）

（3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。

（4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

href和src区别

href
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
src
src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
当浏览器解析到src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

css reset 和 normalize.css 有什么区别？

回答：
css reset 是最早的一种解决浏览器间样式不兼容问题的方案，它的基本思想是将浏览器的所有样式都重置掉，从而达到所有浏览器样式保持一致的效果。但是使用这种方法，可能会带来一些性能上的问题，并且对于一些元素的不必要的样式的重置，其实反而会造成画蛇添足的效果。

后面出现一种更好的解决浏览器间样式不兼容的方法，就是 normalize.css ，它的思想是尽量的保留浏览器自带的样式，通过在原有的样式的基础上进行调整，来保持各个浏览器间的样式表现一致。相对与 css reset，normalize.css 的方法保留了有价值的默认值，并且修复了一些浏览器的 bug，而且使用 normalize.css 不会造成元素复杂的继承链。

常见的浏览器内核比较

Trident：这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于 IE 的高市场占有率，微软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 标准脱节。还有就是 Trident 内核的大量 Bug 等安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。

Gecko：这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

Presto：Opera 曾经采用的就是 Presto 内核，Presto 内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理 JS 脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

Webkit：Webkit 是 Safari 采用的内核，它的优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。

Blink：谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是KHTML 的分支一样。Blink 引擎现在是谷歌公司与 Opera Software 共同研发，上面提到过的，Opera 弃用了自己的 Presto 内核，加入 Google 阵营，跟随谷歌一起研发 Blink。

详细的资料可以参考：《浏览器内核的解析和对比》
《五大主流浏览器内核的源起以及国内各大浏览器内核总结》

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

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

浏览器的渲染过程？浏览器的渲染原理？

1.解析HTML生成DOM树。
2.解析CSS生成CSSOM规则树。
3.将DOM树与CSSOM规则树合并在一起生成渲染树。
4.遍历渲染树开始布局，计算每个节点的位置大小信息。
5.将渲染树每个节点绘制到屏幕。
https://baijiahao.baidu.com/s?id=1593097105869520145&wfr=spider&for=pc

推荐看这个
浏览器前端优化,推荐

使用 HTML 创建文档对象模型（DOM）
使用 CSS 创建 CSS 对象模型（CSSOM）
基于 DOM 和 CSSOM 执行脚本（Scripts）
合并 DOM 和 CSSOM 形成渲染树（Render Tree）
使用渲染树布局（Layout）所有元素
渲染（Paint）所有元素

步骤四 — 渲染树（Render Tree）
一旦所有节点已被解析，DOM 和 CSSOM 准备合并，浏览器便会构建渲染树。如果我们把节点想象成单词，那么对象模型就是句子，渲染树便是整个页面。

步骤五 — 布局（Layout）
布局阶段需要确定页面上所有元素的大小和位置。

步骤六 — 渲染（Paint）
最终的渲染阶段，会真正地光栅化屏幕上的像素，把页面呈现给用户。

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

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

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

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

（5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

1、HTML的加载

　　HTML是一个网页的基础，下载完成后解析

2、其他静态资源加载

　　解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启用别的线程下载。

　　但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果

3、DOM树构建

　　在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树

4、CSSOM树构建

　　CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树

5、渲染树构建

　　当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树

6、布局计算

　　渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

7、渲染

　　布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

详细资料可以参考：《浏览器渲染原理》
《浏览器的渲染原理简介》
《前端必读：浏览器内部工作原理》
《深入浅出浏览器渲染原理》
页面渲染机制（一、DOM和CSSOM树的构建）

渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程）

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。

async 和 defer 的作用是什么？有什么区别？（浏览器解析过程）

（1）脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。

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

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

前端需要注意哪些 SEO ？

（1）合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超
过2次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不
同页面 description 有所不同；keywords 列举出重要关键词即可。

（2）语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。

（3）重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被
抓取。

（4）重要内容不要用 js 输出：爬虫不会执行 js 获取内容

（5）少用 iframe：搜索引擎不会抓取 iframe 中的内容

（6）非装饰性图片必须加 alt

（7）提高网站速度：网站速度是搜索引擎排序的一个重要指标

用于预格式化文本的标签是？

预格式化就是保留文字在源码中的格式最后显示出来样式与源码中的样式一致所见即所得。

<pre> 定义预格式文本，保持文本原有的格式

参考

浏览器前端优化

Front-end-basic-knowledge
Front-End-Interview-Notebook

tinfengyee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML面试相关问题整理

HTML面试相关问题整理前言HTML5语义化b 与 strong 的区别和 i 与 em 的区别？浏览器架构为什么最好把 CSS 的``标签放在``之间？为什么最好把 JS 的`前言写完CSS面试相关问题整理，继续整理。HTML5语义化什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。好处易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎...
复制链接

扫一扫