关于前端:面试题整理

1. W3C规范盒模型、IE盒模型

W3C盒模型：包含margin、border、padding、content,并且content局部不蕴含其余局部。IE盒模型：包含margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content局部蕴含了padding和border.

2. 弹性盒flex布局的各种属性

容器的属性：

flex-direction属性：决定主轴的方向（即我的项目的排列方向）。

1.row（默认值）：主轴为程度方向，终点在左端。2.row-reverse：主轴为程度方向，终点在右端。3.column：主轴为垂直方向，终点在上沿。4.column-reverse：主轴为垂直方向，终点在下沿。

flex-wrap属性：默认状况下，我的项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
```
1.nowrap（默认）：不换行。2.wrap：换行，第一行在上方。3.wrap-reverse：换行，第一行在下方。
```
flex-flow属性：是flex-direction属性和flex-wrap属性的简写模式，默认值为row nowrap。

justify-content属性定义了我的项目在主轴上的对齐形式。

1.flex-start（默认值）：左对齐2.flex-end：右对齐3.center： 居中4.space-between：两端对齐，我的项目之间的距离都相等。5.space-around：每个我的项目两侧的距离相等。所以，我的项目之间的距离比我的项目与边框的距离大一倍。

align-items属性：定义我的项目在穿插轴上如何对齐。

1.flex-start：穿插轴的终点对齐。2.flex-end：穿插轴的起点对齐。3.center：穿插轴的中点对齐。4.baseline: 我的项目的第一行文字的基线对齐。5.stretch（默认值）：如果我的项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性：定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用。

1.flex-start：与穿插轴的终点对齐。2.flex-end：与穿插轴的起点对齐。3.center：与穿插轴的中点对齐。4.space-between：与穿插轴两端对齐，轴线之间的距离均匀散布。5.space-around：每根轴线两侧的距离都相等。所以，轴线之间的距离比轴线与边框的距离大一倍。6.stretch（默认值）：轴线占满整个穿插轴。

我的项目的属性：

order属性定义我的项目的排列程序。数值越小，排列越靠前，默认为0。
flex-grow属性定义我的项目的放大比例，默认为0，即如果存在残余空间，也不放大。
flex-shrink属性定义了我的项目的放大比例，默认为1，即如果空间有余，该我的项目将放大。
flex-basis属性定义了在调配多余空间之前，我的项目占据的主轴空间（main size）。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为auto，即我的项目的原本大小。能够设为跟width或height属性一样的值（比方350px），则我的项目将占据固定空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩align-items属性。默认值为auto，示意继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3. CSS优化技巧

性能优化：

内联首屏要害CSS（Critical CSS）

性能优化中有一个重要的指标——首次无效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）呈现在屏幕上的工夫。这一指标影响用户看到页背后所需期待的工夫，而内联首屏要害CSS（即Critical CSS，能够称之为首屏要害CSS）能缩小这一时间。内联CSS可能使浏览器开始页面渲染的工夫提前只将渲染首屏内容所需的要害CSS内联到HTML中

异步加载CSS
文件压缩
去除无用CSS

有选择地应用选择器

1.放弃简略，不要应用嵌套过多过于简单的选择器。2.通配符和属性选择器效率最低，须要匹配的元素最多，尽量避免应用。3.不要应用类选择器和ID选择器润饰元素标签，多此一举，还会升高效率。4.不要为了谋求速度而放弃可读性与可维护性。

缩小应用低廉的属性
如box-shadow/border-radius/filter/透明度/:nth-child等。

优化重排与重绘
1.缩小重排

重排会导致浏览器从新计算整个文档，从新构建渲染树，这一过程会升高浏览器的渲染速度。1.扭转font-size和font-family2.扭转元素的内外边距3.通过JS扭转CSS类4.通过JS获取DOM元素的地位相干属性（如width/height/left等）5.CSS伪类激活6.滚动滚动条或者扭转窗口大小应用Flex时，比应用inline-block和float时重排更快，所以在布局时能够优先思考Flex。

2.防止不必要的重绘

当元素的外观（如color，background，visibility等属性）产生扭转时，会触发重绘。在网站的应用过程中，重绘是无奈防止的。不过，浏览器对此做了优化，它会将屡次的重排、重绘操作合并为一次执行。不过咱们仍须要防止不必要的重绘，如页面滚动时触发的hover事件，能够在滚动的时候禁用hover事件，这样页面在滚动时会更加晦涩。

不要应用@import

首先，应用@import引入CSS会影响浏览器的并行下载。应用@import援用的CSS文件只有在援用它的那个css文件被下载、解析之后，浏览器才会晓得还有另外一个css须要下载，这时才去下载，而后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无奈并行下载所需的款式文件。其次，多个@import会导致下载程序错乱。在IE中，@import会引发资源文件的下载程序被打乱，即排列在@import前面的js文件先于@import下载，并且打乱甚至毁坏@import本身的并行下载。所以不要应用这一办法，应用link标签就行了。

代码优化：

合并多个雷同属性；
把具备雷同属性的标签写在一块；
简化色彩；
在父级元素中用Class；
不要应用令人目迷五色的正文；
不要在行内元素中退出CSS；
移除多余的空格和空行，减小style文件大小.

4. HTTP和HTTPS的区别

1、https协定须要到CA （Certificate Authority，证书颁发机构）申请证书，个别收费证书较少，因此须要肯定费用。2、http是超文本传输协定，信息是明文传输，https则是具备安全性的ssl加密传输协定。3、http和https应用的是齐全不同的连贯形式，用的端口也不一样，前者是80，后者是443。4、http的连贯很简略，是无状态的；HTTPS协定是由SSL+HTTP协定构建的可进行加密传输、身份认证的网络协议，比http协定平安。

5. 罕用GIT指令

新建代码库

# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个我的项目和它的整个代码历史$ git clone [url]

配置

# 显示以后的Git配置$ git config --list# 编辑Git配置文件$ git config -e [--global]# 设置提交代码时的用户信息$ git config [--global] user.name "[name]"$ git config [--global] user.email "[email address]"

减少/删除文件

# 增加指定文件到暂存区$ git add [file1] [file2] ...# 增加指定目录到暂存区，包含子目录$ git add [dir]# 增加当前目录的所有文件到暂存区$ git add .# 增加每个变动前，都会要求确认# 对于同一个文件的多处变动，能够实现分次提交$ git add -p# 删除工作区文件，并且将这次删除放入暂存区$ git rm [file1] [file2] ...# 进行追踪指定文件，但该文件会保留在工作区$ git rm --cached [file]# 改名文件，并且将这个改名放入暂存区$ git mv [file-original] [file-renamed]

代码提交

# 提交暂存区到仓库区$ git commit -m [message]# 提交暂存区的指定文件到仓库区$ git commit [file1] [file2] ... -m [message]# 提交工作区自上次commit之后的变动，间接到仓库区$ git commit -a# 提交时显示所有diff信息$ git commit -v# 应用一次新的commit，代替上一次提交# 如果代码没有任何新变动，则用来改写上一次commit的提交信息$ git commit --amend -m [message]# 重做上一次commit，并包含指定文件的新变动$ git commit --amend [file1] [file2] ...

分支

# 列出所有本地分支$ git branch# 列出所有近程分支$ git branch -r# 列出所有本地分支和近程分支$ git branch -a# 新建一个分支，但仍然停留在以后分支$ git branch [branch-name]# 新建一个分支，并切换到该分支$ git checkout -b [branch]# 新建一个分支，指向指定commit$ git branch [branch] [commit]# 新建一个分支，与指定的近程分支建设追踪关系$ git branch --track [branch] [remote-branch]# 切换到指定分支，并更新工作区$ git checkout [branch-name]# 切换到上一个分支$ git checkout -# 建设追踪关系，在现有分支与指定的近程分支之间$ git branch --set-upstream [branch] [remote-branch]# 合并指定分支到以后分支$ git merge [branch]# 抉择一个commit，合并进以后分支$ git cherry-pick [commit]# 删除分支$ git branch -d [branch-name]# 删除近程分支$ git push origin --delete [branch-name]$ git branch -dr [remote/branch]

标签

# 列出所有tag$ git tag# 新建一个tag在以后commit$ git tag [tag]# 新建一个tag在指定commit$ git tag [tag] [commit]# 删除本地tag$ git tag -d [tag]# 删除近程tag$ git push origin :refs/tags/[tagName]# 查看tag信息$ git show [tag]# 提交指定tag$ git push [remote] [tag]# 提交所有tag$ git push [remote] --tags# 新建一个分支，指向某个tag$ git checkout -b [branch] [tag]

查看信息

# 显示有变更的文件$ git status# 显示以后分支的版本历史$ git log# 显示commit历史，以及每次commit产生变更的文件$ git log --stat# 搜寻提交历史，依据关键词$ git log -S [keyword]# 显示某个commit之后的所有变动，每个commit占据一行$ git log [tag] HEAD --pretty=format:%s# 显示某个commit之后的所有变动，其"提交阐明"必须合乎搜寻条件$ git log [tag] HEAD --grep feature# 显示某个文件的版本历史，包含文件改名$ git log --follow [file]$ git whatchanged [file]# 显示指定文件相干的每一次diff$ git log -p [file]# 显示过来5次提交$ git log -5 --pretty --oneline# 显示所有提交过的用户，按提交次数排序$ git shortlog -sn# 显示指定文件是什么人在什么工夫批改过$ git blame [file]# 显示暂存区和工作区的差别$ git diff# 显示暂存区和上一个commit的差别$ git diff --cached [file]# 显示工作区与以后分支最新commit之间的差别$ git diff HEAD# 显示两次提交之间的差别$ git diff [first-branch]...[second-branch]# 显示明天你写了多少行代码$ git diff --shortstat "@{0 day ago}"# 显示某次提交的元数据和内容变动$ git show [commit]# 显示某次提交发生变化的文件$ git show --name-only [commit]# 显示某次提交时，某个文件的内容$ git show [commit]:[filename]# 显示以后分支的最近几次提交$ git reflog

近程同步

# 下载近程仓库的所有变动$ git fetch [remote]# 显示所有近程仓库$ git remote -v# 显示某个近程仓库的信息$ git remote show [remote]# 减少一个新的近程仓库，并命名$ git remote add [shortname] [url]# 取回近程仓库的变动，并与本地分支合并$ git pull [remote] [branch]# 上传本地指定分支到近程仓库$ git push [remote] [branch]# 强行推送以后分支到近程仓库，即便有抵触$ git push [remote] --force# 推送所有分支到近程仓库$ git push [remote] --all

撤销

# 复原暂存区的指定文件到工作区$ git checkout [file]# 复原某个commit的指定文件到暂存区和工作区$ git checkout [commit] [file]# 复原暂存区的所有文件到工作区$ git checkout .# 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变$ git reset [file]# 重置暂存区与工作区，与上一次commit保持一致$ git reset --hard# 重置以后分支的指针为指定commit，同时重置暂存区，但工作区不变$ git reset [commit]# 重置以后分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit统一$ git reset --hard [commit]# 重置以后HEAD为指定commit，但放弃暂存区和工作区不变$ git reset --keep [commit]# 新建一个commit，用来撤销指定commit# 后者的所有变动都将被前者对消，并且利用到以后分支$ git revert [commit]# 临时将未提交的变动移除，稍后再移入$ git stash$ git stash pop

其余

# 生成一个可供公布的压缩包$ git archive

6. 如何解决跨域

  跨域是指一个域下的文档或脚本试图去申请另一个域下的资源

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最外围也最根本的平安性能，如果短少了同源策略，浏览器很容易受到XSS、CSFR等攻打。所谓同源是指"协定+域名+端口"三者雷同，即使两个不同的域名指向同一个ip地址，也非同源。
同源策略限度以下几种行为：

  1. Cookie、LocalStorage 和 IndexDB 无奈读取  2. DOM 和 Js对象无奈取得  3. AJAX 申请不能发送

跨域解决方案：
1、通过jsonp跨域

  通常为了加重web服务器的负载，咱们把js、css，img等动态资源拆散到另一台独立域名的服务器上，  在html页面中再通过相应的标签从不同域名下加载动态资源，而被浏览器容许，  基于此原理，咱们能够通过动态创建script，再申请一个带参网址实现跨域通信。  毛病：只能实现get一种申请。

2、跨域资源共享（CORS）

  一般跨域申请：只服务端设置Access-Control-Allow-Origin即可，前端毋庸设置，  若要带cookie申请：前后端都须要设置。  因为同源策略的限度，所读取的cookie为跨域申请接口所在域的cookie，而非当前页。  目前，所有浏览器都反对该性能(IE8+：IE8/9须要应用XDomainRequest对象来反对CORS）)，CORS也曾经成为支流的跨域解决方案。

3、 nginx代理跨域
nginx配置解决iconfont跨域

  浏览器跨域拜访js、css、img等惯例动态资源被同源策略许可，  但iconfont字体文件(eot|otf|ttf|woff|svg)例外，  此时可在nginx的动态资源服务器中退出以下配置：  location / {    add_header Access-Control-Allow-Origin *;  }

nginx反向代理接口跨域

  跨域原理： 同源策略是浏览器的安全策略，不是HTTP协定的一部分。  服务器端调用HTTP接口只是应用HTTP协定，不会执行JS脚本，不须要同源策略，也就不存在逾越问题。  实现思路：通过nginx配置一个代理服务器（域名与domain1雷同，端口不同）做跳板机，  反向代理拜访domain2接口，并且能够顺便批改cookie中domain信息，不便以后域cookie写入，实现跨域登录。

nginx具体配置：

  #proxy服务器  server {      listen       81;      server_name  www.domain1.com;      location / {          proxy_pass   http://www.domain2.com:8080;  #反向代理          proxy_cookie_domain www.domain2.com www.domain1.com; #批改cookie里域名          index  index.html index.htm;          # 当用webpack-dev-server等中间件代理接口拜访nignx时，此时无浏览器参加，故没有同源限度，上面的跨域配置可不启用          add_header Access-Control-Allow-Origin http://www.domain1.com;  #以后端只跨域不带cookie时，可为*          add_header Access-Control-Allow-Credentials true;      }  }

4、 nodejs中间件代理跨域

  node中间件实现跨域代理，原理大抵与nginx雷同，都是通过启一个代理服务器，实现数据的转发，  也能够通过设置cookieDomainRewrite参数批改响应头中cookie中域名，  实现以后域的cookie写入，不便接口登录认证。

5、 WebSocket协定跨域

  WebSocket protocol是HTML5一种新的协定。它实现了浏览器与服务器全双工通信，同时容许跨域通信，是server push技术的一种很好的实现。

7. JS有几种数据类型？值类型和援用数据类型区别？

值类型

  number  string  boolean  null  undefined  symbol (ES6)  bigint (ES10)

援用数据类型

  object

值类型和援用数据类型区别：

  值类型：是按值拜访的，能够间接操作保留在变量中的理论值  援用数据类型：是保留在堆内存中的对象。  不能够间接拜访堆内存空间中的地位和操作堆内存空间。  只能操作对象在栈内存中的援用地址。  援用类型数据在栈内存中保留的实际上是对象在堆内存中的援用地址。  通过这个援用地址能够疾速查找到保留中堆内存中的对象。

8. 什么是事件流？事件捕捉？事件冒泡？

当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的门路流传，门路所通过的节点都会收到该事件，这个流传的过程叫做DOM事件流
元素触发事件时，事件的流传过程称为事件流，过程分为捕捉和冒泡两种
冒泡事件：事件由子元素传递到父元素的过程
捕捉事件：事件由父元素到子元素传递的过程

9. 如何增加一个DOM对象到body中？innerHTML和innerText区别？

  //新建一个div元素节点  var div=document.createElement("div");  div.innerText = "helloworld";  //把div元素节点增加到body元素节点中成为其子节点，然而放在body的现有子节点的最初  document.body.appendChild(div);  //插入到最后面  document.body.insertBefore(div, document.body.firstElementChild);

innerHTML和innerText区别：
innerHTML设置或获取标签所蕴含的HTML+文本
信息(从标签起始地位到终止地位全部内容，包含HTML标签，但不包含本身)
innerText设置或获取标签所蕴含的文本信息（从标签起始地位到终止地位的内容，去除HTML标签，但不包含本身）

10. 什么是闭包？堆栈溢出有什么区别？内存透露？哪些操作会造成内存透露？怎么避免内存透露？

闭包就是可能读取其余函数外部变量的函数。

  因为在Javascript语言中，只有函数外部的子函数能力读取局部变量，  因而能够把闭包简略了解成"定义在一个函数外部的函数"。  所以，在实质上，闭包就是将函数外部和函数内部连接起来的一座桥梁。

栈溢出是指一直的调用办法，一直的压栈，最终超出了栈容许的栈深度，就会产生栈溢出，比方递归操作没有终止，死循环。
堆栈溢出仅是js语法环境的“栈”溢出,而内存透露是会波及到电脑硬件(变量过多未回收或其余起因导致浏览器占用cpu过高,浏览器卡死)
造成内存泄露的操作：

  1.意外的全局变量  2.闭包  3.没有清理的DOM元素援用  4.被忘记的定时器或者回调  5.子元素存在引起的内存泄露  6.IE7/8援用计数应用循环援用产生的问题

避免内存泄露：

  1）缩小不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；  2）留神程序逻辑，防止“死循环”之类的 ；  3）防止创立过多的对象  准则：不必了的货色要及时偿还。

11. 简述ajax执行流程（代码）

第一步创立ajax对象：

    new XMLHttpRequest();

第二步填写申请信息:

    xhr.open('method',url,Asynchronous)method(申请形式):    1、get通常用来获取数据，偶然也会携带一些数据        (1)发送的内容显示在浏览器地址栏上。        (2)因为浏览器地址栏长度有限度，而get是通过url向服务器发送数据的，所以发送的数据大小会被限度。    2、post通常用来向服务器发送数据，偶然也会携带一些数据到客户端。        (1)显示在申请头信息。        (2)post传输数据实践来说是没有大小限度的,post的大小限度来自于服务器。url：申请文件的地址Asynchronous(是否异步):    异步：不会期待数据申请完结继续执行下边的代码，当数据申请胜利的时候，在回去进行解决。    同步：必须期待前边的数据申请完结才能够执行下一行代码，可能会造成页面假死。

第三步监控申请后果

  ajax对象下边有一个onload在数据拿到之后就会触发  xhr.responseText示意申请到的文本内容。  xhr.responseXML示意申请到的XML。

第四步发送申请

  xhr.send(data)  data发送给服务器的数据

例：

  document.onclick=function(){      var xhr=new XMLHttpRequest();      xhr.open('get','1.txt',true);      xhr.onload=function(){          alert(xhr.responseText);      }      xhr.send();  }

12. 什么是构造函数？与一般函数有什么区别？

构造函数：

  用new关键字来调用的函数，首字母个别大写  用this来结构它的属性以及办法

两者区别在于：

1、调用形式不一样

  //构造函数也是一个一般函数，创立形式和一般函数一样。  function Foo(){}  Foo();//一般函数调用形式  var f = new Foo();//结构函数调用形式

一般函数调用形式：间接调用person();
结构函数调用形式：须要应用new关键字来调用 new person();

2、作用也不一样（构造函数用来新建实例对象）
3、首字母大小写习惯

个别构造函数的函数名称会用大写
一般函数用小写

4、函数中this的指向不同

一般函数中的this，在严格模式下指向undefined，非严格模式下指向window对象。
```
function foo(){    console.log(this===window);}foo();//代码运行后果：true
```

构造函数的this则是指向它创立的对象实例。

function Foo(){    this.name = "博客园";}var f = new Foo();console.log(f.name);//代码运行后果：博客园//补充：构造函数的函数名和类名雷同：Foo()这个构造函数，Foo是函数名，也是这个对象的类名。

5、写法的不同

构造函数：

function Person(name){    this.name = name;}var p = new Person('John');//应用new关键字，不应用return

一般函数：

function person(name){    var obj = new Object();    obj.name = name;    return obj;//应用return}var p = person('john');