前端面试八股文【很经典 很全面 字字珠玑】【建议收藏+关注】

1. 重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
2. 重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
3. 浏览器的渲染机制
   对 DOM 的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
   对 DOM 的样式进行修改，比如 color 和 background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘

---

6.让一个元素水平垂直居中的方式有哪些？

1. 定位+margin
2. 定位+transform
3. flex 布局
4. grid 布局
5. table 布局
6. display:fixed

---

7.CSS 的哪些属性哪些可以继承？哪些不可以继承？

CSS 的三大特性：继承、层叠、优先级
子元素可以继承父类元素的样式

1. 字体的一些属性：font
2. 文本的一些属性：line-height
3. 元素的可见性：visibility:hidden
4. 表格布局的属性：border-spacing
5. 列表的属性：list-style
6. 页面样式属性：page
7. 声音的样式属性

---

8.有没有用过预处理器？

预处理语言增加了变量、函数、混入等强大的功能
SASS LESS

---

9. CSS样式文件引入的方式有哪些? link和@import的区别是?

link连接方式和import导入方式，两者区别如下：

1. link链接时，不用写
2. 一般而言，链接的效率要高于导入（因为导入样式表相当于是将所有的样式规则原样复制到当前源文件中，增加了代码量，从而影响了加载的速度）

---

10.display属性有什么作用？它有哪些值？

1. display:none 隐藏标签元素
2. display:inline 在同一行显示
3. display:block 以块状方式独占一行显示

---

11. 介绍一下页面元素定位中的绝对定位、相对定位、流动定位、浮动定位，并阐述他们的区别

1. 流动定位：
   保持在标准文档流中原有的位置，元素是按从左往右，从上往下的顺序摆放， left,top等属性无效
2. 相对定位：
   相对定位是指相对于盒子元素原有的位置进行偏移，不会脱离标准文档流，也不对其他元素产生任何影响。需设定垂直方向和水平向的偏移量，分别是left、top、right、bottom。
3. 绝对定位：
   绝对定位是以某一个点为基准进行偏移。绝对定位是以最近的一个已定位的父级元素为基准，如果父级元素没有定位或没有父级元素，则以浏览器窗口为基准；会脱离标准文档流，不影响同一级的盒子元素位置。
4. 浮动定位：只能设置水平方向上的定位，指内容停靠在容器的左边还是右边。垂直方向上不能设浮动定位。

---

12.谈谈你见过的浏览器不兼容问题？如何使用IETest?

1. 以火狐代表的浏览器不支持如下用法：
   （1）document.all
   （2）unload事件
   （3）innerText属性
2. 很多版本的浏览器不支持clear:both来清除浮动
3. 各浏览器默认的margin和padding不同。解决方法： *{margin:0;padding:0;}
4. 对盒子的解析标准不同

IETest安装之后，即可以使用，可用来检查当前代码在不同浏览器版本中的兼容性

---

13.display:none和visibility:hidden的区别是

1. display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2. 使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
3. visibility:hidden和opacity:0 有类似效果

14.html5有哪些新特性，如何处理html5对低版本的兼容问题

新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation

---

Javascript 篇

---

1.浏览器加载文件(repaint/reflow)

浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。

1. reflow
   在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
   CSS文件虽然不影响js文件的加载，但是却会造成js执行的阻塞。因为js代码执行前，浏览器必须保证css文件已下载和解析完成。
   办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。
2. repaint
   repaint（重绘）和reflow相似，但是在元素改变样式的时候触发，这个比reflow造成的影响要小，所以能触发repaint解决的时候就不要触发reflow。

---

2.cookie、localstorage和sessionStorage的区别

一、存储的时间有效期不同

1. cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
2. sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
3. localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储的大小不同

1. cookie的存储是5kb左右，存储量较小，一般页面最多存储20条左右信息
2. localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

三、与服务端的通信

1. cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
2. localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

四、读写操作程度

1. cookie操作繁琐 localStorage和sessionStorage 更简单些

---

3.浏览器本地存储与服务器端存储之间的区别

1. 服务器端保存数据占用服务器端的资源，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。
2. 浏览器端一般只用来存储小数据，而服务器则可以存储大数据。
3. 服务器存储数据安全性高，浏览器只适合存储对安全不敏感的一般数

---

4. src和href的区别?

1. src指向外部资源的位置, 用于替换当前元素, 比如js脚本, 图片等元素
2. href指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 比如加载css

---

5. bind函数的兼容性

用法:
bind()函数会创建一个新函数, 为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

---

6. 解释下事件代理

事件代理又称之为事件委托。是JavaScript中绑定事件的常用技巧，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡

---

7.解释下js中this是怎么工作的?

this 在 JavaScript 中主要有以下五种使用场景。