面试题

html篇

对语义化的理解

1. 便于开发者理解，维护
2. 便于搜索引擎解析，和SEO

title和alt区别

1. title是给用户看的，hover的时候做提示用的
2. alt是给搜索引擎读识别的，当图像无法显示是，以alt中的文字替代

iframe得优缺点

优点：

1. 解决第三方图标/广告加载缓慢问题

缺点：

1. iframe会阻塞主页面的onload事件

href和src区别

1. href是建立html与资源之间的链接或者关系，或者建立元素与锚点之间的联系，目的不是引用资源，而是建立联系
2. src是把当前带有src的标签替代成src所指向的资源
3. 浏览器解析方式不同：遇到src会暂停其它资源的下载/处理，直到把src资源编译加载完毕，这也是为什么要把src放在html末尾的原因

css篇

选择器有哪些？

1. 全局选择器 *
2. 标签选择器 body
3. 类选择器.app
4. ID选择器 #app
5. 组合选择器 .container .head
6. 继承选择器 body div
7. 伪类选择器 :hover

@import和link的区别

1. link是XHTML标签，除了引入css外还可以用于RSS等其它事物，@import只能用于css
2. link在页面加载的同时引入css，@import在页面加载完后引入
3. link无兼容问题，@import低版本浏览器不支持
4. link能够被js控制，从而改变样式，@import不能

display:none和visibility:hidden的区别

1. none只当那元素不存在，hidden会保留该元素的位置，栗子

<span>span1</span>
  <div>div</div>
<span>span2</span>

div：display: none时，span1和span2是同一行的，visibility:hidden时它俩是换行的（即div只是被隐藏了，实际div独占一行的位置还保留着）

position的值， relative和absolute分别是相对于谁进行定位的？

1. static:默认值，没有定位，元素出现在正常的文档流中。
2. relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
3. absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
4. fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
5. sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出，scroll滚动它也不动。

js篇

es5和es6的区别

1. let，const替代var
2. 箭头函数，还有一些新的数据结构，如Set，Map
3. promise解决回调地狱
4. 语法糖：class，和对象里函数的写法func() {}，解构赋值
5. 模板字符串

map和object的区别

1. map的键可以是任意数据类型，obj只能是字符串和Symbol
2. map是干净的,默认情况不包含任何键。只包含显式插入的键。而Object有一个原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。栗子：

m = new Map()
o = {}
Map的原型上有get，set等方法，Object原型上有toString等方法
m.set(get, 'get')  不会改变原型上的get，因为它是这样获取的，m.get('get')
o.toString = 'toStr'  下次再调用o.toString()就不行，因为已经被改了（冲突）

常见的css兼容问题

1. padding和margin不同，解决方法：* { margin: 0; padding: 0; }

vue篇

组件通信的方法有哪些

vue2和vue3的区别

1. 监听：vue3 proxy，vue2 Object.defineProperties
2. vue3对ts支持更好
3. vue3有更多的api，setup语法糖

vue全局变量和vuex的区别

vue父组件和子组件生命周期函数的执行顺序

webpack篇

优化篇

标签：src,面试题,定位,get,import,div,选择器
来源： https://www.cnblogs.com/Lilc20201212/p/16671220.html