✔:代表经常提问
❌:代表基本不会提问,了解即可
1、src和href的区别✔
src和href都是用来引用外部的资源
-
src
- 表示对资源的引用,指向的内容会嵌入到当前标签所在的位置
- 指向的资源下载并应⽤到⽂档内,如请求js脚本
- 堵塞解析,所以⼀般js脚本会放在页面底部
-
href
-
表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系
-
不会堵塞,停⽌对当前⽂档的处理
-
2、对HTML语义化的理解✔
- 有利于SEO
- 可读性更强,结构更清晰
- 方便视障人群使用阅读
3、<!DOCTYPE html>
(⽂档类型) 的作⽤✔
-
告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档
-
标准模式、兼容模式两种模式
-
加了是按标准模式解析
4、script标签中defer和async的区别✔
解析到脚本时,都是异步执行,它们都不会阻塞页面的解析
- defe
- 异步加载脚本,等到文档所有元素解析完成之后才执行,DOMContentLoaded事件执行之前
- 如果有多个设置了defer的script标签存在,则会按照顺序执行所有的script;
- async
- 使得script脚本异步的加载并在允许的情况下执行
- async的执行,并不会按着script在页面中的顺序来执行,而是谁先加载完谁执行。
5、常⽤的meta标签有哪些❌
charset
,用来描述HTML文档的编码类型keywords
,页面关键词description
,页面描述refresh
,页面重定向和刷新viewport
,适配移动端,可以控制视口的大小和比例
6、HTML5有哪些更新❌
-
语义化标签
-
媒体标签
-
表单
-
progress标签
-
DOM查询操作
- document.querySelector()
- document.querySelectorAll()
-
Web存储
7、img的srcset属性的作⽤?❌
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下,img 会自动加载不同的图片。用法如下:
<img src="image-128.png" srcset="image-256.png 2x" />
使用上面的代码,就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
8、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?✔
- 行内元素有:
a b span img input select strong
; - 块级元素有:
div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
; - 空元素(没有内容的HTML元素)有:
br、meta、hr、link、input、img
9、说一下 web worker✔
web worker 是运行在后台的 js,独立于其他脚本,不会影响页面的性能。
并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了。
如何创建 web worker:
- 检测浏览器对于 web worker 的支持性
- 创建 web worker 文件(js,回传函数等)
- 创建 web worker 对象
10、HTML5的离线储存怎么使用,它的工作原理是什么❌
-
离线存储指的是:在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
-
原理:HTML5的离线存储是基于一个新建的
.appcache
文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示 -
总结:
这东西固然能再一定程度上让页面加速渲染,但所有缓存技术带来的问题也不言而喻,对开发者相当不友好,比如你改了css或者js,无法及时看到更新效果。并且缓存网站资源的话原本浏览器的缓存机制(304)已经很好了,没必要再使用 manifest 做缓存;实际上因为使用反响并不好,W3C正在废弃manifest。
编辑 | sishen
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~