前端八股文(HTML篇)二

目录

1.说一下web worker

2.iframe有哪些优点和缺点

3.label的作用是什么?如何使用?

4.script标签中defer和async的区别

5.Canvas和SVG的区别

6.head标签有什么作用,其中什么标签必不可少?

7.浏览器是如何对HTML5的离线储存资源进行管理和加载?

8.img的srcset属性的作用?

9.浏览器乱码的原因是什么?如何解决?

10.说一下 HTML5 drag API


1.说一下web worker

在HTML页面中,如果在执行脚本时,页面的状态时不可相应的,直到脚本执行完成后,页面才变成可相应。web worker 是运行在后台的js,独立于其他脚本,不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了。

如何创建web worker:

  1. 检测浏览器对于web worker的支持性
  2. 创建web worker文件(js,回传函数等)
  3. 创建web worker对象

2.iframe有哪些优点和缺点

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

优点:

  • 用来加载速度较慢的内容(如广告)
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信

缺点:

  • iframe会阻塞主页面的onload事件
  • 无法被一些搜索引擎识别
  • 会产生很多页面,不容易管理

3.label的作用是什么?如何使用?

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

使用方法1:


使用方法2:


4.script标签中defer和async的区别

如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。他不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

其中蓝色代表js脚本网络加载事件,红色代表js脚本执行时间,绿色代表html解析时间。

defer和async属性都是去异步加载外部的js脚本文件,它们都不会阻塞页面的解析,其区别如下:

  • 执行顺序:多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行;
  • 脚本是否并行执行:async属性,表示后续文档的加载和执行与js脚本的加载和执行时并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载时并行进行的,js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前。

5.Canvas和SVG的区别

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

其特点如下:

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序
  • 复杂度高会减慢渲染速度
  • 不适合游戏应用‘

2.Canvas:Canvas是画布,通过JavaScript来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制。

其特点如下:

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

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


6.head标签有什么作用,其中什么标签必不可少?

head标签用于定义文档的头部,它是所有头部元素的容器。标签中的元素可以引用脚本,指示浏览器在哪里找到样式表,提供元信息等。

文档的头部描述了文档的各种属性和信息,包括文档的标题,在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在head部分:,,,

你可能感兴趣的:(八股文,前端,html)