1.对HTML语义化的理解
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。通俗来讲就是用正确的标签做正确的事情
语义化的优点如下: 对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于SEO。除此之外,语义类还支持读屏软件,根据文章可以自动生成目录
对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护
2.DOCTYPE(⽂档类型)的作⽤
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类 型定义来解析文档,不同的渲染模式会影响浏览器对CSS代码甚⾄JavaScript脚本的解析。它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式(可通过document.compatMode获取,比如,语雀官网的文档类型是CSS1Compat):
CSS1Compat:标准模式(Strickmode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
BackCompat:怪异模式(混杂模式)(Quickmode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。
3.script标签中defer和async的区别
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本,它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析
defer和async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:
执行顺序:多个带async属性的标签,不能保证加载的顺序;多个带 defer属性的标签,按照加载顺序执行;
脚本是否并行执行:async属性,表示后续文档的加载和执行与js 脚本的加载和执行是并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前。