当前位置：首页 > ds >正文

前端基础面试题（4-8）

ds 2025/5/5 8:03:49

文章目录

- - 什么是HTML语义化？
  - - 什么是HTML
    - 如何理解Web语义化？
    - 为什么要使用语义化标签？
  - 如何禁用a标签跳转页面或定位链接？
  - 什么是渐进增强和优雅降级
  - - 渐进增强（progressive enhancement）
    - 优雅降级（graceful degradation）
    - 区别
  - 页面导入样式时，使用link和@import有什么区别？
  - js和css是否阻塞DOM树构建和渲染？
  - - JavaScript对DOM树构建和渲染的影响
    - html页面中有css样式
    - 总结

什么是HTML语义化？

什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

如何理解Web语义化？

通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。

单纯的HTML代码是不带任何样式的，只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。

但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？

那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

为什么要使用语义化标签？

有伙伴会认为，我用DIV+CSS也能做出来一样的效果，虽然单纯看实现效果，两者并没有什么区别。

但是页面不止是给人看的，机器也要看，爬虫也要看，网页结构更清晰方便开发维护。

特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。

总结下语义化的优点：

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
有利于构建清晰的机构，有利于团队的开发、维护

如何禁用a标签跳转页面或定位链接？

当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：

通过标签属性href：使其指向空或不返回任何内容。如：

<a href="javascript:void(0);">点此</a> 
<a href="javascript:;">点此无反应</a>

从标签事件入手：阻止其默认行为。如：

html方法

<a href="" onclick="return false;"> 
<a href="#" onclick="return false;">

在js文件中
阻止默认点击事件，使用 Event.preventDefault() 。
在css文件中
处理点击，不响应任何鼠标事件，使用

pointer-events: none;

什么是渐进增强和优雅降级

渐进增强（progressive enhancement）

主要是针对低版本的浏览器进行页面重构，在保证基本功能的情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级（graceful degradation）

一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

区别

优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的、能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要。
优雅降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

页面导入样式时，使用link和@import有什么区别？

所属类别：link属于HTML标签，而@import是CSS提供的。
加载时机：页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
兼容性：@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题。
样式权重：link方式的样式的权重高于@import的权重。

js和css是否阻塞DOM树构建和渲染？

先做个总结，然后再进行具体的分析：
CSS不会阻塞DOM的解析，但是会影响JavaScript的运行，javascript会阻止DOM树的解析，最终css (CSSOM) 会影响DOM树的渲染，也可以说最终会影响渲染树的生成。

JavaScript对DOM树构建和渲染的影响

JavaScript脚本在html页面中

<html><body><div>1</div><script>let div1 = document.getElementdiv1.innerText = 'time.geekb'</script><div>test</div></body>
</html>

当解析到script脚本标签时，HTML解析器暂停工作，javascript引擎介入，并执行script标签中的这段脚本。

因为这段javascript脚本修改了DOM中第一个div中的内容，脚本执行完成之后，HTML解析器回复解析过程，继续解析后续的内容，直至生成最终的DOM。

html页面中引入javascript文件

//foo.js
let div1 = document.getElementsByTagName
div1.innerText = 'time.geekbang'

<html><body><div>1</div><script type="text/javascript" src="foo.js"><div>test</div></body>
</html>

执行到JavaScript标签时，暂停整个DOM的解析，执行javascript代码。javascript文件的下载过程会阻塞DOM解析，受网络环境、文件大小等因素影响。

优化机制：谷歌浏览器有预解析操作，渲染引擎收到字节流后，开启预解析线程分析HTML中包含的JavaScript、CSS等相关文件，并提前下载。也可使用CDN加速JavaScript文件加载、压缩文件体积。

若JavaScript文件未操作DOM，可通过 async或 defer标记为异步加载：

async：脚本并行加载，加载完成后立即执行，执行时机不确定，仍可能阻塞HTML解析，在 load事件派发之前。
defer：脚本并行加载，等待HTML解析完成后，按加载顺序执行脚本，执行时机在 DOMContentLoaded事件派发之前。

html页面中有css样式

//theme.css
div {color:blue}

<html><head><style src="theme.css"></style></head><body><div>1</div><script>let div1 = document.getElementdiv1.innerText = 'time.geekb'div1.style.color ='red'</script><div>test</div></body>
</html>