关于HTML的那些事儿

2020-01-02  本文已影响0人  乌龟小姐v

一、html语义化

1、什么是语义化?

就是用合理的、正确的标签来展示内容,比如h1~h6定义标题。

2、好处

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

1、把<link>放在<head>中

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

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

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

例外情况:当你的脚本里包含document.write()时。但是现在,document.write()不推荐使用。同时,将<script>标签放在底部,意味着浏览器不能开始下载脚本,直到整个文档(document) 被解析。也许,对此比较好的做法是,<script>使用defer属性,放在<head>中。
ps:defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

三、什么是渐进式渲染(progressive rendering)

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

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

一些举例:

四、viewport

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

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

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

2、Viewport属性值

五、Reflow和Repaint

Reflow

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

Repaint

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

引起Repaint和Reflow的一些操作
Repaint和Reflow是不可避免的,只能说对性能的影响减到最小,给出下面几条建议:

六、img中的alt和元素的title属性作用

href和src的区别

浏览器的渲染过程

1、解析HTML生成DOM树
2、解析CSS生成CSSDOM树
3、将DOM树与CSSOM规则树合并在一起生成渲染树
4、遍历渲染树开始布局,计算每个节点的位置大小信息
5、将渲染树每个节点绘制到屏幕

为何会出现浏览器兼容问题

处理兼容问题的思路

1、要不要做

doctype有什么用

doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。

声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行,位于html标签之前。

浏览器本身分为两种模式,一种是标准模式,一种是怪异模式,浏览器通过doctype来区分这两种模式,doctype在html中的作用就是触发浏览器的标准模式,如果html中省略了doctype,浏览器就会进入到Quirks模式的怪异状态,在这种模式下,有些样式会和标准模式存在差异,而html标准和dom标准值规定了标准模式下的行为,没有对怪异模式做出规定,因此不同浏览器在怪异模式下的处理也是不同的,所以一定要在html开头使用doctype。

iframe框架有那些优缺点

优点:
缺点:
上一篇 下一篇

猜你喜欢

热点阅读