前端面试基础题-html，css，JavaScript
1.回流和重绘
什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流和重绘区别：
回流必将引起重绘，而重绘不一定会引起回流。
比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的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)
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
