前端面试基础题-html，css，JavaScript

1.回流和重绘

1.什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2.什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
3.区别：
回流必将引起重绘，而重绘不一定会引起回流。
比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

【扩展】

浏览器的帮忙
所以我们能得知回流比重绘的代价要更高，回流的花销跟render tree有多少节点需要重新构建有关系
因为这些机制的存在，所以浏览器会帮助我们优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
自己的优化
但是靠浏览器不如靠自己，我们可以改变一些写法减少回流和重绘
比如改变样式的时候，不去改变他们每个的样式，而是直接改变className 就要用到cssText 但是要注意有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法，但是IE不支持累加，前面添一个分号可以解决。
还有添加节点的时候比如要添加一个div里面有三个子元素p，如果添加div再在里面添加三次p，这样就触发很多次回流和重绘，我们可以用cloneNode(true or false) 来避免，一次把要添加的都克隆好再appened就好了，还有其他很多的方法就不在此赘述。

2.浏览器的渲染过程

浏览器渲染的过程主要包括以下五步：

1.浏览器将获取的HTML文档解析成DOM树。
2.处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
3.将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
4.渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
5.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

4.Css选择器的优先级

三条标准:
1.就近原则,后加样式优于前面的样式
2.内嵌样式>内联样式>外联样式
3.!Important 大于一切样式
权重计算规则:
内联样式: style=“ ”-----权值 1000
ID 选择器: #ID -----权值 100
类/伪类/属性选择器 -----权值 10
类型选择器和伪元素 :div/p------权值 1
继承的样式没有权值
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

5.bfc工作原理格式化上下文（block formatting context）

BFC 规定了内部的 Block Box 如何布局。

定位方案：
内部的 Box 会在垂直方向上一个接一个放置。
Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每个元素的 margin box 的左边，与包含块 border box 的左边相接触。BFC 的区域不会与 float
box 重叠。
BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算 BFC 的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发 BFC
根元素，即 html
float 的值不为 none（默认）overflow 的值不为 visible（默认）
display 的值为 inline-block、table-cell、table-caption position 的值为 absolute 或 fixed

6.清除浮动的方法

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
1.父级 div 定义 height
2.最后一个浮动元素后加空 div 标签并添加样式clear:both
3.包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。父级 div 定义 zoo

7.盒模型

有两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading;
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).
ie模式 box-sizing属性
w3c模式

8.垂直水平居中的实现方案

使一个盒子水平居中的方法
1.flex布局 jusitufy-content：center aligin-item：center
2.绝对定位 top:50%;left:50%; transfrom:translate(-50%,-50%)

如何居中 div ?
水平居中使用 margin(0 auto)
垂直居中:

position:absolute;
top:50%;
Left:50%;
transform:translate(-50%,-50%)

或者考虑

display:table-cell;
Text-align:center;
Vertical-align:middle;

何让一个元素垂直/ / 水平（垂直水平）都居中，请列出你能想到的几种方式？
1.水平垂直居中 —— 方式一

<div class="div-demo"></div><style>
.div-demo{
  width:100px;
  height:100px;
  background-color:#06c;
  margin: auto;
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>

水平垂直居中 —— 方式二

<style>
.div-demo{
  width:100px;
  height:100px;
  background-color:#06c;
  margin: auto;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
</style>

水平垂直居中 —— 方式三，（新旧伸缩盒兼容）

<body class="container">
<div class="div-demo"></div>
<style>
h ht t ml l,b bo od dy y{
  height:100%;
}
.container{
  display: box;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.div-demo{
  width:100px;
  height:100px;
  background-color:#06c;
}
</style>
</body>

9. link与@import的区别

link 属于 XHTML 标签,除了加载 CSS 之外还能用于定义 RSS,而 @import
是 CSS 提供的,只能用于加载 CSS
link 加载的文件,在页面加载的时候,link 文件会同时加载,而 @import 引入
的 CSS 文件,是页面在加载完成后再加载的
@import 有兼容性问题,IE5 以下的浏览器是无法识别的,而 link 无兼容性
问题

10.跨域的原因以及解决方案

【跨域的原理】跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。

11.原型与原型链

1.原型和原型链是JS实现继承的一种模型。
2.原型链的形成是真正是靠proto 而非prototype
【原型】函数都要 prototype(显示原型)属性，而 prototype 会自动初始化一
个空对象，这个对象就是原型对象
原型对象中会有一个 constructor 属性,这个属性将指向了函数本身
实例化对象都有一个proto(隐式原型)属性，proto属性指向原型
对象
【原型链】从实例对象往上找构造这个实例的相关对象，然后这个关联的对象
再往上找，找到创造它的上一级的原型对象，以此类推，一直到 object.prototype
原型对象终止,原型链结束.
原型链中的原型对象中的内容, , 是会被不同的实例, ,所共有

12.let const var 的区别

var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
var 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全
局的，由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以
在代码中的任意位置声明变量总是等效于在代码开头声明；
let 是更完美的 var，不是全局变量，具有块级函数作用域，大多数情况不会
发生变量提升。
let 声明的变量具有块级作用域
let 生命的变量不能通过 window.变量名访问
形如 for(let x...)的循环是每次迭代都为 x 创建新的绑定
let 约束了变量提升
let 不允许在相同作用域内重复声明同一个变量名，var 是允许的
const 定义的常量值，不能够重新赋值，如果值是一个对象，可以改变对象
里边的属性值。const 变量声明的时候必须初始化

13.es6 箭头函数

箭头函数是函数的一种简写形式，使用括号包裹参数，跟随一个=>，紧接着是函数体
箭头函数最直观的三个特点：
1.不需要 function 关键字来创造
2.省略 return 关键字
3.修复了 this 指向

14.拓展运算符解构赋值

15.sync await

16. promise 地域回调

17.cookies、localStorage、sessionStorage

cookies是网站为了表示用户身份而储存在用户本地终端上的数据,Cookies
的数据始终在同源的 http 请求中携带,会在浏览器和服务器中来回传递,大小不
能 4K(通常经过加密,所以不用担心账号被盗,同源策略[ 同源是指"协议+域名+端口"
三者相同 ]可以防止 XSS 和 CSRF 攻击浏览器,XSS 就是用过浏览器的 cookies,
截取用户数据,CSRF 是模拟用户在网页上面的操作,完成数据请求.异步策略牵
扯到了 JSONP)
sessionStorage和 localStorage 的数据都是在本地存储,不会把数据发给
服务器,localStorage是关闭浏览器,数据还存在不会丢失,而sessionStorage 是
离开浏览器后,数据会自动删除.

18.this指向问题

19.null undefine 区别

null 表示一个值被定义了，定义为“空值”；
undefined 表示根本不存在定义(声明一个变量但未赋值)

20.防抖与节流

21.箭头函数与普通函数的区别

箭头函数没有 prototype(原型)，所以箭头函数本身没有 this
箭头函数的 this 在定义的时候继承自外层第一个普通函数的 this。
如果箭头函数外层没有普通函数，严格模式和非严格模式下它的 this 都会指
向 window(全局对象)
箭头函数本身的 this 指向不能改变，但可以修改它要继承的对象的 this。
箭头函数的 this 指向全局，使用 arguments 会报未声明的错误。
箭头函数的 this 指向普通函数时,它的 argumens 继承于该普通函数
使用 new 调用箭头函数会报错，因为箭头函数没有 constructor
箭头函数不支持 new.target
箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
箭头函数相对于普通函数语法更简洁优雅
箭头函数不能当做 Generator 函数,不能使用 yield 关键字(python)