关于前端:面试题整理

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

容器的属性：

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。

性能优化：

内联首屏要害 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-family
2. 扭转元素的内外边距
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 文件大小.

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

新建代码库

# 在当前目录新建一个 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

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

同源策略 /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 技术的一种很好的实现。

值类型

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

援用数据类型

  object

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

  值类型：是按值拜访的，能够间接操作保留在变量中的理论值

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

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

  // 新建一个 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 标签，但不包含本身）

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

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

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

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

避免内存泄露：

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

第一步创立 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();}

构造函数：

  用 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');

关于前端:面试题整理

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

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

3. CSS 优化技巧

4. HTTP 和 HTTPS 的区别

5. 罕用 GIT 指令

6. 如何解决跨域

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

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

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

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

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

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

Just My Socks（注册教程内含优惠码）

关于前端:面试题整理

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

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

3. CSS 优化技巧

4. HTTP 和 HTTPS 的区别

5. 罕用 GIT 指令

6. 如何解决跨域

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

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

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

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

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

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

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）