HTML知识点汇总
# DOCTYPE 的作用是什么
- <!DOCTYPE>声明位于 HTML 文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。一般指定了之后会以标准模式来进行文档解析,否则就以兼容模式进行解析。在标准模式下,浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下,浏览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。
- DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
- 在 html5 之后不再需要指定 DTD 文档,因为 html5 以前的 html 文档都是基于 SGML 的,所以需要通过指定 DTD 来定义文 档中允许的属性以及一些规则。而 html5 不再基于 SGML 了,所以不再需要使用 DTD。
# link
和 @import
的区别
- 从属关系区别。
@import
只能导入样式表,link
还可以定义RSS
、rel
连接属性、引入网站图标等; - 加载顺序区别;加载页面时,
link
标签引入的CSS
被同时加载;@import
引入的CSS
将在页面加载完毕后被加载; - 兼容性区别
link
是XHTML
标签,除了加载CSS
外,还可以定义RSS
等其他事务;@import
属于CSS
范畴,只能加载CSS
# 常见浏览器内核
# 内核
Trident
:IE
浏览器内核;Gecko
:Firefox
浏览器内核;Presto
:Opera
浏览器内核;Webkit
:Safari
浏览器内核;Blink
:谷歌浏览器内核,属于Webkit
的一个分支,与Opera
一起在研发
# 浏览器
IE:Trident
,IE
内核;Chrome
:以前是Webkit
,现在是Blink
内核;360
、猎豹浏览器内核:IE
+Blink
双内核;- 搜狗、遨游、
QQ
浏览器内核:Trident
(兼容模式)+Webkit
(高速模式); - 百度浏览器、世界之窗内核:
IE
内核; 2345
浏览器:以前是IE
内核,现在是IE
+Blink
双内核;UC
浏览器内核:Webkit
+Trident
;
# 什么是 DTD
DTD( Document Type Definition 文档类型定义)是一组机器可读的规则,它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时,浏 览器将使用这些规则检查页面的有效性并且采取相应的措施。 DTD 是对 HTML 文档的声明,还会影响浏览器的渲染模式(工作模式)。
# 标准模式与兼容模式各有什么区别
标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
# link 标签定义
- link 标签定义文档与外部资源的关系。
- link 元素是空元素,它仅包含属性。 此元素只能存在于 head 部分,不过它可出现任何次数。
- link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。
# 页面导入样式@import 和 link 有什么区别
- 从属关系区别。@import 是 css 提供的语法规则,用于引入外部 css 样式表。link 是 html 的语法,可以用于加载 css,定义 RSS、rel 连接属性、引入网站图标等。
- 加载顺序区别。@import 引入的 css 将在页面加载完毕之后被加载。Link 会跟随着加载页面的顺序一起被加载。
- 兼容性的区别。@import 是 css2.1 才有的语法,只有在 IE5+才能识别。link 标签作为 HTML 元素,不存在兼容性问题。
- DOM 可控性区别。可以通过 JS 操作 DOM ,插入 link 标签来改变样式;由于 DOM 方法是基于文档的,无法使用 @import 的方式插入样式。
# 对浏览器内核的理解
分别有两个部分:渲染引擎和 js 引擎。
- 渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。默认情况下,渲染引擎可以显示 html、xml 文档及图片,也可以借助插件显示其他类型的数据。例如使用 pdf 阅读插件可以查看 pdf 文件。
- js 引擎用来解析和执行 js 来实现页面的动态效果。最开始渲染引擎和 JS 引擎并 没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
# 什么是文档的预解析
webkit、firefox 都做了这个优化,当页面执行 js 脚本的时候,用另外一个线程去解析剩下的文档,并加载后面需要通过网络加载的资源。这样的方式可以使资源并行加载从而使整体加载速度更快。预解析不改变 DOM 树,最终的操作都由主解析进行。自己只解析外部资源的引用,比如脚本文件、图片、样式表等。
# Css 如何阻塞文档解析
理论上,既然样式表不改变 dom 树,也就没必要停止文档的解析,然而在 javascript 脚本执行的时候,可能会在文档解析的过程中请求样式信息,如果样式信息还没有加载和解析,脚本将得到错误的值,显然会导致很多问题。 所以,如果浏览器还未完成 CSSOM 的下载和构建,浏览器就会推迟 JS 脚本的执行和文档的解析,直至 CSSOM 构建完成。也就 是说,在这种情况下,浏览器会先下载和构建 CSSOM,然后再执行 JavaScript,最后再继续 文档的解析。
# 渲染页面时常见哪些不良现象
- FOUC:(浏览器样式闪烁或者叫做无样式内存闪烁)由于浏览器渲染机制(比如 firefox)在 css 加载之前,先呈现了 HTML,就会导致出现无样式内容,然后样式突然呈现导致的闪烁。出现这个问题的主要原因是 css 文件加载时间过长,或者是 css 被放置在了文档最底部。
- 白屏:有些浏览器渲染机制(比如 chrome)要先构建 DOM 树和 CSSOM 树,构建完成只会才会渲染,如果 css 部分放在 HTML 尾部,由于 css 加载没完成,浏览器迟迟没有渲染,从而导致白屏。;也可能是把 js 文件放在头部,脚本的加载会阻塞后面文档内容的解析, 从而页面迟迟未渲染出来,出现白屏问题。
# 如何优化关键渲染路径?
为尽快完成首次渲染,我们需要最大限度减小以下三种可变因素: (1)关键资源的数量。 (2)关键路径长度。 (3)关键字节的数量。
关键资源是可能阻止网页首次渲染的资源。这些资源越少,浏览器的工作量就越小, 对 CPU 以及其他资源的占用也就越少。
同样,关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响:某些资源 只能在上一资源处理完毕之后才能开始下载,并且资源越大,下载所需的往返次数就越多。 最后,浏览器需要下载的关键字节越少,处理内容并让其出现在屏幕上的速度就越快。要减 少字节数,我们可以减少资源数(将它们删除或设为非关键资源),此外还要压缩和优化各 项资源,确保最大限度减小传送大小。 优化关键渲染路径的常规步骤如下: (1)对关键路径进行分析和特性描述:资源数、字节数、长度。 (2)最大限度减少关键资源的数量:删除它们,延迟它们的下载,将它们标记为异步 等。 (3)优化关键字节数以缩短下载时间(往返次数)。 (4)优化其余关键资源的加载顺序:您需要尽早下载所有关键资产,以缩短关键路径 长度。
# 举例三种禁止浏览器缓存的头字段,并写出响应的设置值
Expires: 告诉浏览器把回送的资源缓存多长时间,-1 或 0 为不缓存。添加 Expires 头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效 避免很多不必要的 http 请求。 Cache-control: no-cache Cache-control max-age=31536000 Pragma: no-cache
# 什么是重绘和回流?如何进行优化?
重绘: 重绘是元素节点的几何属性发生改变或是样式发生改变但是不影响到页面的布局,成为重绘,比如 outline、visibility、 color、background-color 等.由于浏览器必须验证 dom 树上其他节点元素的可见性,所以重绘的代价是高昂的。
回流:回流是元素节点的几何位置发生改变或是结构发生改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化会涉及到局部乃至整个页面的布局更新。一个元素节点的回流有可能导致其所有子元素甚至是其后的父子节点都发生回流。
回流必定会发生重绘,重绘不一定会引发回流。
优化
现代浏览器大多都是通过队列机制来批量更新布局,浏览器会把修改操作放在 队列中,至少一个浏览器刷新(即 16.6ms)才会清空队列,但当你获取布局信 息的时候,队列中可能有会影响这些属性或方法返回值的操作,即使没有,浏览器也会强制清空队列,触发回流与重绘来确保返回正确的值。
主要包括以下属性或方法:
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- width、height
- getComputedStyle()
- getBoundingClientRect() 所以,我们应该避免频繁的使用上述的属性,他们都会强制渲染刷新队列。
减少重绘和回流:
CSS 方面:
- 使用 transform 代替 top 等位移
- 使用 visibility 代替 display:none,前者只会引起重绘,后者会引起重绘和回流。
- 避免使用 table 布局。因为一个 table 的改动可能会引起整个 table 重新渲染。
- 尽可能在 DOM 树的最末端改变 class,回流是不可避免的,但可以减少其影 响。尽可能在 DOM 树的最末端改变 class,可以限制了回流的范围,使其影响 尽可能少的节点。
- 避免设置多层内联样式。CSS 选择符从右往左匹配查找,避免节点层级过多。
- 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流,同时,控制动画速度可以选择 requestAnimationFrame。 避免使用 CSS 表达式,可能会引发回流。
- 使用 css3 硬件加速,可以让 transform、opacity、 filters 这些动画不会引起回流重绘 。但是对于动画的其它属性,比如 background-color 这些,还是会引起回流重绘的,不过它还是可以提升这些动画 的性能
Javascript 方面:
- 避免频繁操作样式,不要多次修改 Style 属性,最好是将改动放在一个 class 内,并将需要的改动一次性的进行修改。
- 避免直接操作修改 dom 元素,框架内可以使用 clone,原生可以使用 fragmment(documentFragment)先进行修改后再一次性地更换进文档中。
- 避免频繁的读取会引发重绘和回流的属性,如果需要多次读取,可以先将他通过变量放入缓存中。
- 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素 及后续元素频繁回流。
# DOMContentLoaded 事件和 Load 事件的区别
DOMContentLoaded 是在初始的 HTML 文档被完全加载和解析完成之后触发,而无需等待样式表、图像和子框架的加载完成。Load 事件是当所有资源加载完成后触发的。
# 说说你对 HTML 语义化的理解
我认为语义化就是用正确的标签做正确的事(用合适的标签规划页面内容的结构),比如 H5 的标签 footer、header,能够让人抛开 CSS 样式表,也能知道这个模块在实际应用中想发挥的作用。同时利于 SEO,搜索引擎的爬虫可以有效的根据 HTML 标记来确定上下文和各个关键字的权重。
# b 与 strong 的区别, i 与 em 的区别
b 和 i 是自然标签,分别表示无意义的加粗、无意义的斜体,样式表现为{font-weight:bolder}仅仅表示「这 里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在 HTML4.01 中并不被推荐使用。而 <em> 和 <strong> 是语义样式标签。 <em> 表示一般的强调文本,而 <strong> 表 示比 <em> 语义更强的强调文本。 使用阅读设备阅读网页时:<strong> 会重读,而 <b> 是展示强调内容。
# 前端需要注意那些 SEO
- 合理的 title、description、keywords。搜索对这三项的权重逐个减小,title 值强调重点即可,重要关键词出现不要超过 2 次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同; keywords 列举出重要关键词即可
- 语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页。
- 重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引 擎对抓取长度有限制,保证重要内容肯定被抓取。
- 重要内容不要用 js 输出:爬虫不会执行 js 获取内容
- 少用 iframe:搜索引擎不会抓取 iframe 中的内容
- 非装饰性图片必须加 alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
# iframe 有那些缺点
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 主要缺点有:
- iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态 设置 iframe 的 src 可以避免这种阻塞情况。
- 搜索引擎的检索程序无法解读这种页面,不利于网页的 SEO 。
- iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
- 浏览器的后退按钮失效。
- 小型的移动设备无法完全显示框架
# Label 的作用是什么?是怎么用的?
label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签 相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
2
# 页面可见性(Page Visibility API) 可以有哪些用途?
这个新的 API 的意义在于,通过监听网页的可见性,可以预判网页的卸载,还可以用来节 省资源,减缓电能的消耗。比如,一旦用户不看网页,下面这些网页行为都是可以暂停的。
- 对服务器的轮询
- 网页动画
- 正在播放的音频或视频
# 实现不使用 border 画出 1 px 高的线,在不同浏览器的标准模式与怪异 模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
# Canvas 和 SVG 有什么区别?
Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的, 因此当我们对 Canvas 进行缩放时,会出现锯齿或者失真的情况。 SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中 的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保 存的是图形的绘制方法,因此当 SVG 图形缩放时并不会失真。
# 什么是webp
?
WebP
是谷歌开发的一种新图片格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。
使用 webp
格式的最大优点是是,在相同质量的文件下,它拥有更小的文件体积。
因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减少,这样会提高用户的体验。
这是谷歌开发的一种新的图片格式。
# 浏览器如何判断是否支持 webp
格式图片?
通过创建 Image
对象,将其 src
属性设置为 webp
格式的图片,然后在 onload
事件中获取图片的宽高,如果能够获取,则说明浏览器支持 webp
格式图片。如果不能获取或者触发了 onerror
函数,那么就说明浏览器不支持 webp
格式的图片。
# 扫描二维码登录网页是什么原理,前后两个事件是如何联系的?
核心过程应该是:浏览器获得一个临时 id,通过长连接等待客户端扫描带有此 id 的二维 码后,从长连接中获得客户端上报给 server 的帐号信息进行展示。并在客户端点击确认后, 获得服务器授信的令牌,进行随后的信息交互过程。在超时、网络断开、其他设备上登录后, 此前获得的令牌或丢失、或失效,对授权过程形成有效的安全防护。
我的理解二维码登录网页的基本原理是,用户进入登录网页后,服务器生成一个 uid 来标 识一个用户。对应的二维码对应了一个对应 uid 的链接,任何能够识别二维码的应用都可 以获得这个链接,但是它们没有办法和对应登录的服务器响应。比如微信的二维码登录,只 有用微信识这个二维码才有效。当微信客户端打开这个链接时,对应的登录服务器就获得了 用户的相关信息。这个时候登录网页根据先前的长连接获取到服务器传过来的用户信息进行 显示。然后提前预加载一些登录后可能用到的信息。当客户端点击确认授权登陆后,服务器 生成一个权限令牌给网页,网页之后使用这个令牌进行信息的交互过程。由于整个授权的过 程都是在手机端进行的,因此能够很好的防止 PC 上泛滥的病毒。并且在超时、网络断开、 其他设备上登录后,此前获得的令牌或丢失、或失效,对授权过程能够形成有效的安全防护。