十个关于 html 的面试题（上）

死神654

已于 2022-07-19 20:59:04 修改

阅读量161

点赞数

文章标签： html javascript 前端

于 2022-07-14 22:59:26 首次发布

本文链接：https://blog.csdn.net/SiShen654/article/details/125794093

版权

✔：代表经常提问
❌：代表基本不会提问，了解即可

src和href都是用来引用外部的资源

src
- 表示对资源的引用，指向的内容会嵌入到当前标签所在的位置
- 指向的资源下载并应⽤到⽂档内，如请求js脚本
- 堵塞解析，所以⼀般js脚本会放在页面底部
href
- 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系
- 不会堵塞，停⽌对当前⽂档的处理

解析到脚本时，都是异步执行，它们都不会阻塞页面的解析

defe
- 异步加载脚本，等到文档所有元素解析完成之后才执行，DOMContentLoaded事件执行之前
- 如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
async
- 使得script脚本异步的加载并在允许的情况下执行
- async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。

并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
总结：

这东西固然能再一定程度上让页面加速渲染，但所有缓存技术带来的问题也不言而喻，对开发者相当不友好，比如你改了css或者js，无法及时看到更新效果。并且缓存网站资源的话原本浏览器的缓存机制（304）已经很好了，没必要再使用 manifest 做缓存；实际上因为使用反响并不好，W3C正在废弃manifest。

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~

死神654

关注