前端面试题系列文章：
【12】「2023」性能优化相关知识点
【13】「2023」H5相关知识点
X-Mind原图地址：
1. script标签中的defer和async的区别
对于普通<script>标签加载的脚本，在加载&执行的过程中，会阻塞后续的DOM渲染。
async: 如果存在async属性，那么普通脚本会被并行请求，而此时不会阻塞DOM的渲染，加载完成后尽快执行。defer: 具有defer属性的脚本也是并行请求的，但是执行阶段在文档解析完成后（触发DOMContentLoaded事件前）。
2. 常见的meta标签
meta标签是HTML语言head区域的一个辅助性标签，常用于定义页面的说明
keywords： 用于告诉搜索引擎，你网页的关键字description: 用于告诉搜索引擎，你网站的主要内容viewport: 这个属性常用于设计移动端网页robots: 用来告诉爬虫那些内容需要索引，哪些内容不需要索引'renderer: 用于指定双核浏览器默认以何种方式渲染页面，比如360浏览器charset="utf-8"用来指定页面字符集
3. HTML5中的语义化标签
header元素为文档或节规定页眉。nav定义导航链接。main规定文档的主内容。article元素规定独立的自包含内容。section元素定义文档中的节。aside元素页面主内容之外的某些内容（比如侧栏）。footer元素为文档或节规定页脚。
标签语义化的优点： 1. 代码结构清晰，易于阅读开发和维护 2. 有利于SEO，搜索引擎爬虫会根据不同的标签赋予不同的权重 3. 方便其他设备（如屏幕阅读器）根据语义渲染网页
4. Svg 和 Canvas 的区别
SVG：
- 是基于xml来描述2d图形的
- SVG基于XML就意味着SVG DOM中的每个元素都是可用的
- 不依赖分辨率，放大不会失真
Canvas：
- canvas是基于像素点的
- canvas中的事件比较复杂，因为canvas中没有dom，只能通过距离左上角的位置来确定点击的位置（3d场景中使用碰撞检测法）
- 依赖分辨率，每次分辨率改变都需要重新渲染
5. 行内元素、块元素、空元素
- 行内元素： a、b、 span 、img、 input 、select、 strong
- 块元素： div、ul、ol、li、h1~h6、p
- 空元素：
<br>、<hr>、<img>、<input>、<link>、<meta>
6. <!DOCTYPE html>的作用
指定了HTML文档遵循的文档定义类型，告诉浏览器用哪个HTML的版本来解析html文件
7. web worker
7.1 Web worker
JavaScript单线程执行的基础上，再开一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
7.2 创建线程
在创建线程的时候需要给实例化的Worker传入唯一一个参数，指向一个javascript文件资源的url或者Blob对象，调用这个构造函数后，一个线程就被创建了。
var worker = new Worker("worker.js");
var workder = new Worker(blob);
7.3 线程通信
子线程和主线程之间提供了postmessage和onmessage来进行发送数据和接收数据
8. HTML5离线缓存
离线缓存是Html5新特性之一，简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用
9. 前端SEO
9.1 SEO定义
SEO(Search Engine Optimization),即搜索引擎优化。SEO是伴随着搜索引擎产生的。SEO的存在就是为了提升在搜索引擎的搜索结果中的排序位置（优先级）和数量而做的优化行为
9.2 为什么要做SEO？
提高网站在搜索引擎中的权重，增强搜索引擎友好度，已达到增加流量，改善用户（潜在）体验的效果
9.3 搜索引擎原理
在搜索引擎网站的后台，会有一个很庞大的数据库，里面存储了海量的关键信息。这些网站信息是利用爬虫从互联网中收集下来的。当一个关键字对应多个网站，因此就出现了优先级的问题，相应的当与关键词最吻合的网址就会排在最前面了。
10. 如何做SEO
10.1 网站结构布局优化
- 网站目录结构尽量不要超过三级，超过三级，”蜘蛛“便不愿意往下爬了。
- 控制首页链接数量，太多首页会减低网站首页的权重
- 导航优化：导航尽量采用文字方式，图片代码加上alt和title标签
- 将重要内容放在前面，爬虫是从上到下读取页面信息的
- 控制页面大小，减少http请求，提升网站的加载速度
10.2 网页代码优化
- 突出重要内容，合理的title, desctiption,和keywords
- 语义化书写HTMl标签，比如h1-h6是用于标题类的，列表的形式代码使用ul或ol
- 页内
<a />标签链接，要加上title属性说明，让访客和爬虫知道。而外部链接要加上el="nofollow"属性，告诉爬虫不要爬了。 - 正文内容要用标签表示，不可滥用h标签
- img标签加上alt属性。当网络速度很慢图片没有加载出来的时候，他可以让用户在图片没有显示的时候就知道这个图片的作用
- 重要内容不要用JS输出，因为爬虫不会读取JS里的内容
- 尽量少使用iframe框架，因为爬虫一般不会读取里面的内容
- 搜索引擎会过滤掉display为none的内容
