huanghongrui / blog_delete Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 0.0 64 KB

記錄學習的過程，遇到的難題，遇到過的坑，如何解決的答案，自學過程的心得.

HTML 89.41% CSS 10.59%

note

blog_delete's People

Contributors

Stargazers

Watchers

blog_delete's Issues

CentOs报错: cannot create temp file for here-document: No space left on device

由于磁盘的空间已满，所以无法再创建临时文件。这个时候可选择清理磁盘，或者扩展。

定位 => 清理 => 设置

$ cd /
$ du -h --max-depth=1 #复用该命令查找即可#

找到目标

$ pwd
> /var/log
$ du -h --max-depth=1
> 4.0K	./ntpstats
> 2.1G	./journal   #这里#
> 44K	./anaconda
> 128K	./redis

PS: 这journal目录是什么? 它可以被删除吗？这时需要了解一下了..

journalctl 用来查询 systemd-journald 服务收集到的日志。systemd-journald 服务是 systemd init 系统提供的收集系统日志的服务。
只要我不需要日志进行任何调试，可以删除 /var/log/journal/* 内的所有内容，但不要删除目录本身。

好吧，我不需要它

$ cd journal
$ rm -rf ./*

删除后，问题虽然解决，但是过段时间肯定还会出现这个问题..所以我需要设置些什么

$ vi /etc/systemd/journald.conf
$ SystemMaxUse=50M  #该参数将控制目录大小为50M#
保存退出
$ sudo systemctl kill --kill-who=main --signal=SIGUSR2 systemd-journald.service 
# 防止不生效，重新启动日志记录服务以强制进行日志轮换。

问题解决.

一些需求和业务场景所需要解决的代码问题。

禁止识别电话

<meta name="format-detection" content="telephone=no">

默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

禁止复制、选中文本

Element {
 
  -webkit-user-select: none;
 
  -moz-user-select: none;
 
  -khtml-user-select: none;
 
   user-select: none;

长时间按住页面出现闪退

element {
  -webkit-touch-callout: none;
}

收集一些前端面试题，供大伙闲余时间看看

HTML

DOCTYPE的作用？标准模式与兼容模式各有什么区别?

1. <!DOCTYPE>声明位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

2. 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 <!DOCTYPE HTML>？

1. HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）; HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

SGML、HTML、XML、DTD分别是什么?

Standard Globalized Markup Language (简称:SGML)，意为标准通用标记语言。用于定义标准的标记语言，可理解为定义文档的元语言。

HyperText Markup Language (简称:HTML)，意为超文本标记语言，用于创建网页的标准标记语言。

Extensible Markup Language (简称:XML)，意为可扩展标记语言，从SGML中简化修改出来的，设计用来传送及携带数据信息，不用来表现或展示数据。用途焦点是它说明数据说明，以及携带数据信息。

Document Type Definition (简称:DTD)，意为文档类型定义。概念源于SGML，每一份SGML文件，均应有相对应的DTD。

行内元素、块级元素、空元素各有那些？

空元素：<hr>、<img>、<input>、<link>、<meta>、<area>、<base>、<br>、<col>、<colgroup>、<embed>、<param>、<source>、<track>、<wbr>、<keygen>-已废弃、<command>-已废弃

行内元素：<b>、<i>、<small>、<abbr>、<cite>、<code>、<dfn>、<em>、<kbd>、<strong>、<samp>、<var>、<a>、<bdo>、<br>、<img>、<map>、<object>、<q>、<script>、<span>、<sub>、<sup>、<button>、<input>、<label>、<select>、<textarea>、<big>-已废弃、<tt>-已废弃、<acronym>-已废弃、

块级元素：<header>、<footer>、<figure>、<figcaption>、<hgroup>、<video>、<section>、<output>、<article>、<aside>、<audio>、<canvas>、<p>、<hr>、<dl>、<dd>、<ul>、<ol>、<div>、<pre>、<h1~6>、<form>、<fieldset>、<table>、<tfoot>、<address>、<noscript>、<blockquote>

使用<link>和在<style>中@import样式有什么区别？

link属于XHTML标签，除加载CSS外，还可用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

当页面加载的时，<link>会同时被加载，而@import引用的CSS会等到页面被加载完才加载;

import是CSS2.1 提出的，只在IE5以上才能被识别，而<link>是XHTML标签，无兼容问题;

浏览器内核的理解？

浏览器内核主分为：渲染引擎和JS引擎。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

排版引擎(layout engine)也称渲染引擎(Rendering Engine)、浏览器引擎（web browser engine）。它是一种软件组件，负责获取标记式内容并将排版后的内容输出至显示器或打印机。所有网页浏览器、电子邮件客户端、电子阅读器以及其它需要根据表示性的标记语言来显示内容的应用程序都需要排版引擎。

JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

常见浏览器内核？

Trident(IE内核)

Gecko(Firefox内核)

Webkit(Safari)

Bink(Chromium)

Presto(Opera)

简述你对HTML语义化的理解?

正确的标签做正确的事情。

HTML语义化会让页面的内容结构化，便于浏览器和搜索引擎解析。

在没有CSS样式的情况下会以一种文档格式显示，且易于阅读。

搜索引擎的爬虫依赖HTML标记来确定上下文和各个关键字的权重，语义化有利于SEO。

便于开发者阅读理解，从而提高工作效率。

HTML5有哪些新特性

语义化标签：article、footer、header、nav、section、time、aside、mark、summary、details

视频音频：html5针对视频文件和音频文件的特殊性，给 <video>和<audio>提供了非常丰富的方法,属性和事件，用于操控这俩元素。

绘图-canvas：它用于网页上绘制图形，<canvas>本身只是个图型容器，需要使用JavaScript来绘制图形。

矢量图形-SVG：它是一种使用 XML 描述 2D 图形的语言。因为基于 XML，所以 DOM 中的每个元素都是可用的。

拖放-drag/drop：增加了拖拽事件的api,和定义可以拖拽的属性

地理定位：通过getCurrentPosition()获取一系列定位信息

离线存储：通过创建 cache manifest 文件，可以创建 web 应用的离线版本。

Web存储：localStorage/sessionStorage

WebSocket：使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

如何处理HTML5新标签的浏览器兼容问题？

HTML5的语义标签在低版本IE浏览器存在兼容问题。

1. 可通过createElement来创建HTML5标签和加上对应的样式。

2. 使用封装好的Js库：html5shiv.js

HTML5的离线储存怎么使用，解释下工作原理？

在用户没有联网时，可正常访问站点或应用，当用户联网时，更新用户机器的缓存文件。

原理：HTML5离线存储基于一个新建的.appcache文件的缓存机制（不是存储技术），通过该文件上的解析清单来实现离线存储资源，这些资源会如Cookie一般被存储起来，当离线状态时，浏览器可通过被离线存储的数据进行页面展示。

优势：离线浏览、速度、服务器负载更小

1. 在文档<html>中添加 manifest 属性。

2. 在.manifest 中边写离线存储的资源。

3. 在离线状态时，操作applicationCache进行实现。

应用缓存初级使用指南
有趣的HTML5：离线存储
使用应用缓存

描述下 cookies，sessionStorage 和 localStorage 的区别？

Cookie：是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），且数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

数据存储大小：Cookie不可超过4k, sessionStorage和localStorage可5M+

有效时间：localStorage数据持久存储，除非主动删除数据；sessionStorage的数据在所在浏览器关闭时删除；cookie在过期时间前有效;

iframe有哪些缺点？

1. 不利于SEO, 因为搜索引擎的检索程序无法解读这种页面。

2. iframe会阻塞主页面的Onload事件。

3. iframe和主页面共享连接池，加上浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe，最好通过Javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

HTML5的form如何关闭自动完成功能？

给不想要提示的 <form> 或 <input> 设置 autocomplete=off。

如何实现浏览器内多个标签页之间的通信?

1. WebSocket.

2. SharedWorker.

3. localStorage、Cookies 等本地存储方式.

localStorge在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，这时通过监听事件，控制它的值来进行页面信息通信；

注意： Safari 在无痕模式下设置localStorage会抛出异常.

webSocket如何兼容低浏览器？

Adobe Flash Socket.

ActiveX HTMLFile (IE).

基于 multipart 编码发送 XHR.

基于长轮询的 XHR.

页面可见性（Page Visibility API）可以有哪些用途？

document.visibilityState（只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.

典型用法是防止当页面正在渲染时加载资源, 或者当页面在背景中或窗口最小化时禁止某些活动.（如:自动暂停音乐或视频的播放）

如何在页面上实现一个圆形的可点击区域？

1. <map>和<area>. (<map><area>标签及在实际开发中的应用)

2. CSS3的border-radius属性.

3. Javascript实现

document.onclick = function(e){
    let [x,y,r] = [100,100,100] // x,y为坐标原点，r为半径
    let x1 = e.clientX; // 获取x坐标
    let y1 = e.clientY; // 获取y坐标
    let dis = Math.abs(Math.sqrt((Math.pow(x-x1,2)+Math.pow(y-y1,2))))
    if(dis < r){
        alert("bbb")
    }
}

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"/>

网页验证码是为了解决什么安全问题？

区分用户是计算机还是人的公共全自动程序。可防止恶意破解密码、刷票、论坛灌水；有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响。

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<b>是展示强调内容。

i内容展示为斜体，em表示强调的文本。

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

自然样式标签: b、i、u、s、pre

语义样式标签: strongem、ins、del、code

CSS

介绍下标准CSS盒子模型？低版本IE的盒模型有何不同？

[标准 | W3C]盒模型: content-box:

content包含: width + height

好处: 可以针对性的控制内容块的大小..很细致的做出调整.

[IE | 怪异]盒模型: border-box:

content包含: width + height + padding + border

好处1: 适合用来排版布局，每个盒子之间排版时无需考虑padding与border的宽度计算.

好处2: 能统一IE和非IE之间的差异.

Css选择符有哪些？可以继承的有哪些？

选择器:

1. id选择器：#Name {...}

2. 类选择器: .Name {...}

3. 标签选择器: div/span/h1/ul {...}

4. 相邻选择器：h1 + p {...}

5. 子选择器：ul > li {...}

6. 后代选择器：div p {...}

7. 通配符选择器：* {...}

8. 属性选择器：a[href = 'http://sunnyman.club'] {...}

9. 伪类选择器：a:hover {...}

不可继承：边框、盒子模型、背景属性。

可继承：字体、文本样式属性。

1. 所有元素可继承：visibility

2. 内联元素可继承：缩写省略.

块状元素可继承：text-indent

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

表格元素可继承：border-collapse.

Css优先级算法如何计算？

1. 优先级就近原则，同权重情况下样式定义最近者为准.

2. 载入样式以最后载入的定位为准.

权重优先级：!important > 内联 > id > class > tag

Css3新增伪类有哪些？

p:first-of-type：选择在当前父元素中第一个出现的p元素

p:last-of-type：选择在当前父元素中最后一个出现的p元素

p:only-of-type：选择p元素,前提是它没有相同类型的兄弟元素。

p:only-child：选择p元素,前提是它没有任何兄弟元素

p:nth-child(n)：选择父元素中的第n个元素，要求它是一个p元素

:nth-last-child(n)：和 :nth-child 一样，只是它从结尾处反序计数

p:nth-of-type(n)：选择父元素中的第n个p元素

:nth-last-of-type(n)：和 :nth-of-type 一样，只是它从结尾处反序计数

:last-child：选择最后一个元素

:empty：选择没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

:target：选择当前活动的目标元素。(URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素)

:not(X)：匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。

:enabled：匹配任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。

:disabled：匹配被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。

:checked：匹配任何处于选中状态的radio、checkbox、select>option

居中？

1. 水平居中：为div设置宽度，添加margin: 0 auto;

      div {
        width: 100px;
        margin: 0 auto;
      }

2. 绝对定位居中.

      div {
        position: absolute;
        width: 100px;
        height: 100px;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

3. 水平垂直居中（1）

      div {
        position: absolute/relative;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin: -50px;  //已知容器宽高.使用它
        // transform: translate(-50%, -50%); //未知容器宽高.使用它
      }

4. 水平垂直居中（2）

      .wrap {
         display: flex;
         align-items: center;
         justify-content: center;
      }
      .wrap > div {
        width: 100px;
        height: 100px;
      }

display有哪些值？说说它们的作用。

flex：flex容器

block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

none：元素不显示，并从文档流中移除。

inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block：默认宽度为内容宽度，可以设置宽高，同行显示。

list-item：象块类型元素一样显示，并添加样式列表标记。

table：此元素会作为块级表格来显示。

inherit：规定应该从父元素继承 display 属性的值。

position的值relative和absolute定位原点是？

absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

relative：元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。

static：默认值。指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。（top, bottom, left, right z-index 属性无效）

sticky：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

inherit：规定从父元素继承 position 属性的值。

Css3有哪些新特性？

选择器：查看上方Css3新增伪类选择器

边框：border-radius | box-shadow | border-image

背景：background-size | background-origin

字体文本：@font-face | text-shadow | word-wrap | text-decoration

转换：transform: translate | rotate | scale | skew | matrix

过渡：transition

动画：animation | @keyframes

多列：multi-column | column-gap | column-rule 查看

界面：resize | box-sizing | loutline-offset

线性渐变：gradient

反射：box-reflect

请说下CSS3的Flexbox（弹性盒布局模型），以及适用场景？

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。在布局上有了比以前更加灵活的空间。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器", 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。较为复杂的布局可以通过嵌套一个伸缩容器（flex container）来实现。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

Flex 布局教程：语法篇、 Flexbox——快速布局神器

用纯CSS创建一个三角形的原理是什么？

将其中三条边透明化即可.

.demo {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent yellow transparent;
}

一个满屏[品]字布局如何设计?

// flex版
#top {
  width: 100%;
  height: 50%;
}
#bot {
  height: 50%;
  display: flex;
}
#bot div {
  height: 100%;
  width: 50%;
  border: solid;
}

// 简单版
.top {
  width: 100%;
  height: 50%;
}
div.a, div.b {
  display: inline-block;
  height: 50%;
  width: 50%;
}

css多列等高如何实现？

1. 视觉等高实现之绝对定位 Demo传送门

//HTML
<div class="outer">
  <div class="left">
    <div class="equh"></div>
    <div class="left-con">
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </div>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
    <p>right</p>
  </div>
</div>

//CSS
.outer {
  width: 960px;
  margin: 0 auto;
  border: 1px solid #000;
  overflow: hidden;
  background-color: green;
  color: #fff;
}
.left {
  width: 200px;
  position: relative;
  float: left;
}
.equh {
  width: 100%;
  height: 999em;
  position: absolute;
  left: 0;
  top: 0;
  border-right: 1px solid #000;
  background-color: orange;
}
.left-con {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.right {
  padding: 1em;
  overflow: hidden;
}

2. 视觉等高实现之padding-bottom与margin-bottom Demo传送门

      //HTML
<div class="box">
  <div class="sub">
    <p>a</p>
  </div>
  <div class="sub">
    <p>b</p>
    <p>b</p>
  </div>
  <div class="sub">
    <p>c</p>
    <p>c</p>
    <p>c</p>
  </div>
</div>

 //CSS
.box {
  width: 600px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px solid #888;
}
.sub {
  float: left;
  width: 30%;
  margin-right: 3%;
  border: 1px solid orange;
  padding-bottom: 9999px; //核心
  margin-bottom: -9999px; //核心
}

3. 真实等高实现之table-cell Demo传送门

//HTML
<div class="box">
  <div class="row">
    <div class="cell">你一定也有过这种感觉的。当你心事重重，渴望找一个人聊一聊的时候，那个可以聊的人来了，可是你们却并没有聊什么。当然，聊是聊了，可是他聊他的，你也试着开始聊你的，只是到后来，你放弃了……那么，最后的办法就是静下来，啃啮自己的寂寞。或者反过来说，让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
    <div class="cell">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句：一命二运三风水，四积阴功五读书。</div>
    <div class="cell">奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！</div>
  </div>
</div>

// CSS
.box {
  width: 600px;
  margin: 40px auto;
  font-size: 12px;
}
.row {
  display: table-row;
  overflow: hidden;
}
.cell {
  display: table-cell;
  width: 30%;
  padding: 1.6%;
  background-color: #f5f5f5;
  // 在IE6/7下使用上一方法，添加一些hack即可，这样就能做到全部兼容了
  *float: left;
  *padding-bottom: 9999px;
  *margin-bottom: -9999px;
}

该方案利用了所有单元格高度都相等的特性，不过由于ie6/7不支持该属性，因此略有瑕疵。不过总的来说还是非常不错的方案。

4. 真实等高实现之弹性盒模型(如不考虑兼容性的问题) Demo传送门

// HTML跟上面Demo一致
// CSS
.box {
  width: 600px;
  margin: 20px auto;
  display: flex;
}
.cell {
  width: 30%;
  border: 1px solid red;
}

Css:多列等高布局

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么？

1. png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

2. 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3. IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

4. IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

5. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 解决方法：通过加入 CSS 属性 -webkit-text-size-adjust: none;

6. 超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: a:link {} a:visited {} a:hover {} a:active {}

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

为什么要初始化CSS样式。

因浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute的容器块计算方式跟正常流有什么不同？

无论哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素

若此元素为 inline 元素，则容器块为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial（容器块）

CSS里的visibility属性有个collapse值是干嘛用的？在不同浏览器下以后什么区别？

对于普通元素visibility:collapse;会将元素完全隐藏,不占据页面布局空间,与display:none;表现相同. 如果目标元素为table,visibility:collapse;将table隐藏,但是会占据页面布局空间. 仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

如果元素拥有display:none,那么元素不被渲染,position,float不起作用;

如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用;

如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.

有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.

css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

//*权重为1
div{ ... }
//权重为10
.class1{ ... }
//*权重为100
#id1{ ... }
//*权重为100+1=101
#id1 div{ ... }
//权重为10+1=11
.class1 div{ ... }
//权重为10+10+1=21
.class1 .class2 div{ ... }

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现.

请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

1. 父级div定义height;

2. 父级div 也一起浮动;

3. 常规的使用一个class来清除浮动;

.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

4. SASS编译的时候，浮动元素的父级div定义伪类:after

&::after,&::before{
    content: ".";
      visibility: hidden;
      display: block;
      height: 0;
      clear: both;
}

解析原理：

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4) 通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

5) zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

zoom:1的清除浮动原理?

清除浮动，触发hasLayout；

zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。

来龙去脉大概如下：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性，可以通过css3里面的动画属性scale进行缩放。

移动端的布局用过媒体查询吗？

假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法

当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。

包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。 CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

@media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } }

使用 CSS 预处理器吗？喜欢那个？

SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)

CSS优化、提高性能的方法有哪些？

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；

如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；

提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;

使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）

浏览器是怎样解析CSS选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。

只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数

margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干；

padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，如:first-line、:first-letter、:before、:after等

而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前，使用::before，否者，使用::after

在代码顺序上，::after生成的内容也比::before生成的内容靠后。

如果按堆栈视角，::after生成的内容会在::before生成的内容之上

如何修改chrome记住密码后自动填充表单的黄色背景？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: yellow;
  background-image: none;
  color: black;
}

设置元素浮动后，该元素的display值是多少？

自动：{ display: block }

怎么让Chrome支持小于12px 的文字？

1. 用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

2. 使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。

3. 继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust: none，做到最大兼容考虑。

4. 使用12px以上字体：为了兼容、为了代码更简单从新考虑权重下兼容性。

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smooth: antialiased;

font-style属性可以让它赋值为“oblique” oblique是什么意思？

倾斜的字体样式

position:fixed在android下无效怎么处理？

fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，

原来的网页还好好的在那，fixed的内容也没有变过位置，所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的。

处理方法：

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1000ms/60 ＝ 16.7ms

display:inline-block 什么时候会显示间隙？(携程)

1. 移除空格

2. margin负值

3. 让闭合标签吃胶囊

4. font-size:0

5. letter-spacing

6. word-spacing

7. 其他成品方法: 去除inline-block元素间间距的N种方法

overflow: scroll时不能平滑滚动的问题怎么处理？

-webkit-overflow-scrolling: touch | auto,这行代码启用了硬件加速特性，使滑动很流畅。这个方法可解决ios5.0、android4.0以后系统的滑动卡顿问题。

auto：普通滚动，当手指从触摸屏上移开，滚动立即停止

touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

啥是Cookie 隔离？（请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

什么是CSS 预处理器 / 后处理器？

预处理器例如：Less、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

style标签写在body前后各有什么区别？

写在head标签中利于浏览器逐步渲染（资源下载 -> CSS树+文档树 -> 渲染树 -> 布局 -> 绘画）。

写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

浏览器的渲染机制

rem布局的优缺点

1. 首先需要弄清楚它的本质：基于根元素html的等比缩放.

详细文章：Rem布局的原理解析

png | jpg | gif 这些图片格式解释一下，分别什么时候用。有没有了解过WebP？

png: 优点-透明、无损，缺点-色彩多活复杂会使图片体积很大，用途：图标、透明背景

jpg: 优点-色彩丰富，体积小，缺点-有损压缩，用于颜色丰富的图，用途：颜色丰富图

gif: 优点-动态、透明、小体积，缺点-只有256种颜色，用途-动态图

图片格式那么多，哪种更适合你？

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

<div id="wrap">
  <div class='one'></div>
  <div class='two'></div>
</div>

#wrap {
  display: flex;
  flex-direction: column;
  height: 300px;
}
.one {
  height: 100px;
}
.two {
  flex-grow: 1;
}

你对line-height是如何理解的？

1. 指一行文字的高度。具体来说是指两行文字间基线之间的距离。

2. 一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用

3. 使用行高代替高度避免haslayout

css行高line-height的一些深入理解及应用

视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

一般原理：一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚动的大致原理。

1. 以 “页面滚动条” 作为 “视差动画进度条” 的.

2. 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的（或者直接称为“隐藏进度条”）.

3. 鉴听mousewheel事件，事件被触发即播放动画，实现“翻页”效果.

相关文章：如何实现视差滚动效果的网页？

Website 效果： 40个极好的视差滚动国外网站

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

一次设计，普遍适用

可以自动识别不同的设备屏幕宽度、并做出相应调整的网页设计。

1. 网页头部加入<meta name="viewport" content="width=device-width, initial-scale=1" />

2. 再通过 media 来根据不同屏幕分辨率选择不同CSS规则。

// 如:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="Leo.css" />
@media screen and (max-device-width: 400px) {}
...

3. 所有主流浏览器都支持viewport元标签，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用Css3-mediaqueries.js

<!--[if lt IE 9]>
　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

相关文章：自适应网页设计（Responsive Web Design）

全屏滚动的原理是什么？用到了CSS的那些属性？

1. 容器的父元素使用overflow: hidden，隐藏滚动条.

2. 容器的子元素(页)高度全屏撑开.

3. JS监听鼠标键盘或手势事件来更改容器的top值来切换显示的效果.

4. 使用transition为滚动带来视觉效果.

Website 效果：豆瓣APP

轮子： fullPage.js、 AlloyTouch

相关文章：用 ES6 写全屏滚动插件

元素竖向的百分比设定是相对于容器的高度吗？

1. 当元素属性height的值设置为百分比单位时，是相对父容器的高度.

2. 其他表示竖向的属性：padding | margin.当百分比设置他们时，他们的值是则是相对父容器的宽度.

抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

通常，一个项目只引用一个CSS，但是对于较大的项目，需要把CSS文件进行分类。

按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”、等等，并以此顺序引用。

相关文章： CSS规范 - 分类方法

JavaScript

JavaScript的基本数据类型。

最新的 ECMAScript 标准定义了 7 种数据类型: Undefined、Null、Boolean、Number、String、Symbol、Object

JavaScript有哪些内置对象？

数据封装类对象： Object、Array、Boolean、Number、String

其他对象： Function、Arguments、Math、Date、RegExp、Error

相关文章：了解 JavaScript 中的内置对象

常用的JavaScript的基本规范？

最好的办法就是使用 Eslint | Tslint(如果你使用Ts)

1. 不混用Tab和空格，选择一种缩进

2. 确定每行规定字符(80~120个)

3. JS命名：变量-驼峰，常量-大写

4. HTML和CSS使用双引号, JS使用单引号

5. 不要在同一行声明多个变量。

6. 请使用 ===/!==来比较true/false或者数值

7. 使用对象字面量替代new Array这种形式

8. 不要使用全局函数。

9. Switch语句必须带有default分支

10. 函数不应该有时候有返回值，有时候没有返回值。

11. For循环必须使用大括号

12. If语句必须使用大括号

13. for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污染。

等等-。-

JavaScript原型，原型链 ? 有什么特点？

需了解：构造函数、原型、实例

个人比方： (人类)原型 <=> (夫妻)构造函数 => (孩子)实例 => (技能)天赋_

1. 每一个构造函数都拥有一个prototype属性，这个属性指向一个对象，也就是原型对象。当使用这个构造函数创建实例的时候，prototype属性指向的原型对象就成为实例的原型对象。

2. 原型对象默认拥有一个constructor属性，指向指向它的那个构造函数（也就是说构造函数和原型对象是互相指向的关系）。每个对象都拥有一个隐藏的属性[[prototype]]，指向它的原型对象，这个属性可以通过Object.getPrototypeOf(obj) 或 obj.__proto__ 来访问。

3. 实际上，构造函数的prototype属性与它创建的实例对象的[[prototype]]属性指向的是同一个对象，即 实例对象.__proto__ === 构造函数.prototype

4. 原型对象就是用来存放实例**有的那部分属性。

5. 在JavaScript中，所有的对象都是由它的原型对象继承而来，反之，所有的对象都可以作为原型对象存在。

6. 访问对象的属性时，JavaScript会首先在对象自身的属性内查找，若没有找到，则会跳转到该对象的原型对象中查找。

原型链（prototype chain）:JavaScript中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，

所有原型链的终点都是Object函数的prototype属性，因为在JavaScript中的对象都默认由Object()构造。Objec.prototype指向的原型对象同样拥有原型，不过它的原型是null，而null则没有原型。

相关文章：三分钟看完JavaScript原型与原型链

JavaScript有几种类型的值？，你能画一下他们的内存图吗？

栈：基础数据类型（Undefined，Null，Boolean，Number、String、Symbol）

堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；

1. 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

2. 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得数据

Javascript作用链域?

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。

如何将字符串转化为数字，例如'12.3Leo'?

1. parseFloat('12.3Leo')

2. 使用正则

如何将浮点数点左边的数每三位添加一个逗号，如10000000.00转化为『10,000,000.00』?

function tsFun(num){
  return num && num
    .toString()
    .replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
      return $2 + ',';
    });
}

如何实现数组的随机排序？

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
  return Math.random() - 0.5;
})

Javascript如何实现继承？几种继承方式?

1、构造继承

2、原型继承

3、实例继承

4、拷贝继承

参考文章：构造函数的继承、非构造函数的继承

JavaScript创建对象的几种方式？

1、对象字面量的方式

  person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2、用function来模拟无参的构造函数

 	function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
    person.name="Mark";
    person.age="25";
    person.work=function(){
    alert(person.name+" hello...");
 	}
 	person.work();

3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

  function Pet(name,age,hobby){
     this.name=name;//this作用域：当前对象
     this.age=age;
     this.hobby=hobby;
     this.eat=function(){
        alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
     }
  }
  var maidou =new Pet("麦兜",25,"coding");
  maidou.eat();

4、用工厂方式来创建（内置对象）

   var wcDog =new Object();
   wcDog.name="旺财";
   wcDog.age=3;
   wcDog.work=function(){
     alert("我是"+wcDog.name+",汪汪汪......");
   }
 	 wcDog.work();

5、用原型方式来创建

  function Dog(){...}
  Dog.prototype.name="旺财";
  Dog.prototype.eat=function(){
    alert(this.name+"是个吃货");
  }
  var wangcai =new Dog();
  wangcai.eat();

5、用混合方式来创建

  function Car(name,price){
    this.name=name;
    this.price=price;
  }
  Car.prototype.sell=function(){
   alert("我是"+this.name+"，我现在卖"+this.price+"万元");
  }
  var camry =new Car("凯美瑞",27);
  camry.sell();

谈谈This对象的理解。

1. this总是指向函数的直接调用者（而非间接调用者）

2. 如果有new关键字，this指向new出来的那个对象

3. 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

相关文章：《你不知道的JavaScript》-this解析

什么是window对象? 什么是document对象?

window对象是指浏览器打开的窗口。

document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性。

null/undefined的区别？

undefined不是一个有效的JSON，而null是

null：表示一个对象是“没有值”的值，也就是值为“空”；类型(typeof)是object

undefined：表示一个变量声明了没有初始化(赋值)；类型(typeof)是undefined

相关文章：null/undefined的区别？

写一个通用的事件侦听器函数。

Leo.Event = {
 		// 页面加载后
 		readyEvent : function(fn) {
 			if (fn==null) {
 				fn = document;
 			}
 			var oldOnload = window.onload;
 			if (typeof window.onload !== 'function') {
 				window.onload = fn;
 			} else {
 				window.onload = function() {
 					oldOnload();
 					fn();
 				};
 			}
 		},
 		// 视能力分别使用dom0||dom2||IE方式 来绑定事件
 		// 参数： 操作的元素,事件名称 ,事件处理程序
 		addEvent : function(element, type, handler) {
 			if (element.addEventListener) {
 				//事件类型、需要执行的函数、是否捕捉
 				element.addEventListener(type, handler, false);
 			} else if (element.attachEvent) {
 				element.attachEvent('on' + type, function() {
 					handler.call(element);
 				});
 			} else {
 				element['on' + type] = handler;
 			}
 		},
 		// 移除事件
 		removeEvent : function(element, type, handler) {
 			if (element.removeEventListener) {
 				element.removeEventListener(type, handler, false);
 			} else if (element.datachEvent) {
 				element.detachEvent('on' + type, handler);
 			} else {
 				element['on' + type] = null;
 			}
 		},
 		// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
 		stopPropagation : function(event) {
 			if (event.stopPropagation) {
 				event.stopPropagation();
 			} else {
 				event.cancelBubble = true;
 			}
 		},
 		// 取消事件的默认行为
 		preventDefault : function(event) {
 			if (event.preventDefault) {
 				event.preventDefault();
 			} else {
 				event.returnValue = false;
 			}
 		},
 		// 获取事件目标
 		getTarget : function(event) {
 			return event.target || event.srcElement;
 		},
 		// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
 		getEvent : function(e) {
 			var event = e || window.event;
 			if (!event) {
 				var getEv = this.getEvent.caller;
 				while (getEv) {
 					event = c.arguments[0];
 					if (event && Event == event.constructor) {
 						break;
 					}
 					c = c.caller;
 				}
 			}
 			return event;
 		}
 	};

["1", "2", "3"].map(parseInt) 答案是多少？

答案：[1, NaN, NaN]

详细解析：Why?

什么是事件？IE与火狐的事件机制有什么区别？如何阻止冒泡？

1. 在网页中的某个操作。

2. 事件处理机制：IE是事件冒泡、Firefox则支持捕获型事件和冒泡型事件

3. 阻止冒泡：ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true）

什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数

特性：

函数内再嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收

测试题：

// 利用闭包，修改下面的代码，让循环输出的结果依次为1， 2， 3， 4， 5
for (var i=1; i<=5; i++) {
  setTimeout( function timer() {
      console.log(i);
  }, i * 1000 );
}

其他

单页面应用及其优缺点

单页Web应用（single page web application，SPA）：浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

单页Web应用的优点：

提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

单页Web应用的缺点：

首次加载耗时比较多。
SEO问题，不利于百度，360等搜索引擎收录。
容易造成Css命名冲突。
前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。

谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

谈谈MVC模式

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

写些代码

手写实现一个promise

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      };
    });
    return promise2;
  }
  catch(fn){
    return this.then(null,fn);
  }
}
function resolvePromise(promise2, x, resolve, reject){
  if(x === promise2){
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  let called;
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      let then = x.then;
      if (typeof then === 'function') { 
        then.call(x, y => {
          if(called)return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          if(called)return;
          called = true;
          reject(err);
        })
      } else {
        resolve(x);
      }
    } catch (e) {
      if(called)return;
      called = true;
      reject(e); 
    }
  } else {
    resolve(x);
  }
}
//resolve方法
Promise.resolve = function(val){
  return new Promise((resolve,reject)=>{
    resolve(val)
  });
}
//reject方法
Promise.reject = function(val){
  return new Promise((resolve,reject)=>{
    reject(val)
  });
}
//race方法 
Promise.race = function(promises){
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(resolve,reject)
    };
  })
}
//all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
Promise.all = function(promises){
  let arr = [];
  let i = 0;
  function processData(index,data){
    arr[index] = data;
    i++;
    if(i == promises.length){
      resolve(arr);
    };
  };
  return new Promise((resolve,reject)=>{
    for(let i=0;i < promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      },reject);
    };
  });
}

防抖函数

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!

function debounce(func, wait, immediate) {
    var timeout, result;
    var debounced = function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };
    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
}

节流函数

节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器

function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};
    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(context, args);
        if (!timeout) context = args = null;
    };
    var throttled = function() {
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

bind函数

Function.prototype.bind2 = function (context) {
    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};
    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));//防止构造函数的引用问题
    }
    fNOP.prototype = this.prototype;//防止直接 fBound.prototype导致修改this原型
    fBound.prototype = new fNOP();
    return fBound;
}

apply函数

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;
    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }
    delete context.fn
    return result;
}

call函数

Function.prototype.call2 = function (context) {
    var context = context || window;
    context.fn = this;
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('context.fn(' + args +')');
    delete context.fn
    return result;
}

获取浏览器URL中查询字符串中的参数

function showWindowHref(){
    var sHref = window.location.href;
    var args = sHref.split('?');
    //无参数的情况
    if(args[0] == sHref){
        return "";
    }
    var arr = args[1].split('&');
    var obj = {};
    for(var i = 0;i< arr.length;i++){
        var arg = arr[i].split('=');
        obj[arg[0]] = arg[1];
    }
    return obj;
}

深浅拷贝

//shallowCopy
var shallowCopy = function(obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj，并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}
//deepCopy
var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

去重

//ES6
function delRepeat(array) {
    if (!Array.isArray(array) || !array.length) return;
    resArray = [];
    array.forEach( item => {
        if (!resArray.includes(item))  {
            resArray.push(item)
        }
    })
    return resArray;
}
//indexOf
function unique(array) {
    var res = [];
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res;
}
//filter
function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}
//Set
function unique(array) {
   return Array.from(new Set(array));
}
//Map
function unique (arr) {
    const seen = new Map()
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

原型继承和 Class 继承

组合继承

function Parent(value) {
       this.val = value
    }
    Parent.prototype.getValue = function() {
       console.log(this.val)
    }
    function Child(value) {
        Parent.call(this, value)
    }
    Child.prototype = new Parent()
    const child = new Child(1)
    child.getValue() // 1
    child instanceof Parent // true

这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费

寄生组合继承

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

这种继承方式对组合继承进行了优化，组合继承缺点在于继承父类函数时调用了构造函数，我们只需要优化掉这点就行了。以上继承实现的核心就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数

Class 继承

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 实现继承的核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value)。当然了，之前也说了在 JS 中并不存在类，class 的本质就是函数

单例模式

作用：

划分模块
惰性单例
命名空间管理
无法修改的静态变量(闭包加单例)

var LazySingle=(function(){
  var instance = null;
  function Single(){
    return {}
  }
  return function(){
   if(!instance){
    instance = Single()
   }
   return instance
  }
})()

装饰者模式

观察者模式

一个对象，维护一个依赖列表，当任何状态发生改变自动通知它们。

//通用代码
var observer = {
    //订阅
    addSubscriber: function (callback) {
        this.subscribers[this.subscribers.length] = callback;
    },
    //退订
    removeSubscriber: function (callback) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (this.subscribers[i] === callback) {
                delete (this.subscribers[i]);
            }
        }
    },
    //发布
    publish: function (what) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (typeof this.subscribers[i] === 'function') {
                this.subscribers[i](what);
            }
        }
    },
    // 将对象o具有观察者功能
    make: function (o) { 
        for (var i in this) {
            o[i] = this[i];
            o.subscribers = [];
        }
    }
};

发布订阅模式

var pubsubClass = {
    list: {},
    subscribe:function (key,callbak) {
        if (!this.list[key]) {
            this.list[key] = [];
        }
        this.list[key].push(callbak);
    },
    publish: function (key,args) {
    var fns = this.list[key];

    if(!fns || fns.length === 0) {
        return;
    }
    var len = fns.length;

    while (len--) {
        fns[len].apply(this,args);     
    }
},
unsubscribe:function(key,fn){
    var fns = this.list[key];
    if(!fns) {
        return false;
    }
    if (!fn) {
        fns && (fns.length = 0);
    }
    else {
        //将和参数fn相同的回调删除
        var len = fns.length;
        while(len--){
            if(fns[len] === fn){
                fns.splice(len, 1);
            }
        }
    }
}

};




在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。
观察者 模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

参考/转载

JS 算法

快速排序

function fastRank(ary) {
  if (!Array.isArray(ary) || ary.length <= 1) return ary;
  let baseVal = ary.splice(0, 1)[0];
  let leftAry = [];
  let rightAry = [];
  ary.forEach(item => {
    if (item < baseVal) {
      leftAry.push(item);
    } else {
      rightAry.push(item);
    }
  })
  return fastRank(leftAry).concat(baseVal, fastRank(rightAry));
}

动画（Animation）

动画是使网络应用和网站吸引人的重要因素。用户希望有快速响应和高度交互的用户界面。但是，为界面设置动画未必很简单。什么应设置动画，何时显示，以及动画应有哪种感觉？

1. 作用

动画是使网络应用和网站吸引人的重要因素。

设置合适动画
- 出色的动画可增添一层乐趣，增加项目对用户的吸引力。
支持交互动画
- 要有策略地放置动画以_增强_用户交互。

2. 方法

网页上创建动画有两种主要方法：使用 CSS 和使用 JavaScript。
至于选择哪种方法取决于项目的其他依赖关系，以及想尝试实现什么类型的效果。

当为UI元素采用较小的独立状态时，使用 CSS。
在需要高级效果或对动画进行大量控制时，使用 JavaScript（如弹跳、停止、暂停、倒退或减速）。
如果需要手动协调整个场景，可直接使用 requestAnimationFrame（高级 JavaScript 方法）。

3. 缓动

linear（匀速线性）
ease-in（缓入）
ease-out（缓出）
ease-in-out（缓入缓出）

4. 自定义缓动

自定义缓动能够给项目提供更多个性。
- CSS 编写动画，可以通过定义三次贝塞尔曲线来定义时间。
贝塞尔曲线
- 拥有 4 个值 (2 对数字)，每对数字描述三次贝塞尔曲线的控制点的 X 和 Y 坐标。
- 贝塞尔曲线的起点坐标为 (0, 0)，终点坐标为 (1, 1)。
- 可设置两个控制点的 X 和 Y 值。两个控制点的 X 值必须在 0 到 1 之间，每个控制点的 Y 值可以超过 [0, 1] 限制，规范未说明可超过多少。

自定义曲线Css:

transition: transform 650ms cubic-bezier(0.438, 0.708 0.568, -0.100);

Google动画曲线工具

5. 合适

一般来说，缓出将是正确的选择，当然也是很好的默认选择。
Quintic缓出动画
- 其中一组知名的缓出公式: easeInQuint。
- 其他缓动公式应谨慎使用。
合适的持续时间
- 任何动画均须有正确的持续时间。若太短，动画让人感觉有攻击性和突然；若太长，则让人觉得很卡和讨厌。
- 缓出：约 200 毫秒 - 500 毫秒。这让眼睛有机会看到动画，但不会觉得卡顿。
- 缓入：约 200 毫秒 - 500 毫秒。请记住，它在结尾将晃动，没有时间量变化将缓和这种影响。
- 弹跳或弹性效果：约 800 毫秒 - 1200 毫秒。记得留出时间让弹性或弹跳效果“停下”。若没有这点额外时间，动画的弹性跳动部分看上去比较有攻击性，让人感觉不舒服。

6. 不对称动画定时

不对称的动画定时可表达个性的同时快速响应用户交互，从而提升用户体验。还能使感觉出现对比，使界面在视觉上更吸引人。

经验法则
- 始终快速响应用户交互。
- 对于用户交互触发的 UI 动画，例如视图变换或显示元素，采用快速前奏和慢速结尾。
- 对于由代码触发的 UI 动画，例如错误或模态视图，采用较慢前奏和快速结尾。

7 性能

在设置动画时应保持 60fps，因为任何卡顿或停顿都会引起用户注意，并对其体验产生负面影响。

尽可能坚持改变变形和透明度。
使用 will-change 来确保浏览器知道对什么设置动画。
- 这使浏览器能够在您做出更改之前进行最合适的优化。但是，请勿过度使用 will-change，因为过度使用可能导致浏览器浪费资源，进而引起其他性能问题。
- 如果动画可能在接下来的 200 毫秒内触发（由用户交互触发或由应用的状态触发），则对动画元素使用 will-change 是个好主意。对于大多数情况，在应用的当前视图中您打算设置动画的任何元素都应启用它，无论您打算改变哪个属性。
- will-change: transform, opacity;
改变页面（布局）结构或导致绘图的动画属性特别消耗资源。
- 给某些属性设置动画的开销比其他属性要小.
- 给元素的 width 和 height 设置动画会改变其几何形状，并且可能导致页面上的其他元素移动或改变大小。此过程称为布局（在 Firefox 等基于 Gecko 的浏览器中称为自动重排）如页面有很多元素，则可能开销很大。每当触发布局时，页面或其一部分通常需要进行绘制，这一般比布局操作本身更消耗资源。
应尽可能避免给触发布局或绘制的属性设置动画。
- 对于大部分现代浏览器，这意味着将动画限制为 opacity 或 transform，两种都可经浏览器高度优化；至于动画是由 JavaScript 还是由 CSS 处理并不重要。
CSS 对比 JavaScript 的性能
- 基于 CSS 的动画以及原生支持的网络动画通常由一个名为“合成器线程”的线程处理。这不同于在其中执行样式、布局、绘制和 JavaScript 的浏览器“主线程”。这意味着，如果浏览器正在主线程上运行一些高开销任务，则这些动画可以继续运行而不中断。
- 在许多情况下，变形和透明度的其他更改还可由合成器线程来处理。
- 如果任何动画触发绘制、布局或同时触发这两者，则“主线程”将必须执行工作。这点同时适用于基于 CSS 和 JavaScript 的动画，并且布局或绘制的开销可能拖慢与 CSS 或 JavaScript 执行相关的任何工作，使问题变得无意义。

CSS触发器:有关对指定的属性设置动画会触发哪个动作的详细信息

8. 注意

力求使所有动画保持 60fps。这样，用户不会觉得动画卡顿，从而不会影响其使用体验。确保任何动画元素在动画开始之前更改的任何内容设置了 will-change。
动画应支持用户交互。
小心选择为目标设置动画的属性；有些属性比其他属性开销更大。
避免为开销大的属性设置动画
- 导致页面卡顿的动画最糟的事情。
需要注意潜在的性能瓶颈，以及动画如何影响应用的个性。卡顿或选择不当的动画可能对用户体验产生负面影响，因此动画需要高性能并且恰当。
避免缓入或缓入缓出动画，除非可以使其保持简短；这类动画可能让最终用户觉得很迟钝。
使用变换来切换不同视图；避免使用 left、top 或任何其他会触发布局的属性。
确保使用的所有动画简洁明快，并且设置较短的持续时间
考虑在屏幕尺寸增大时您的动画和布局如何变化；考虑哪些适合小屏幕的动画用在桌面环境时可能看起来很怪。
注意您的动画不能导致性能问题；确保了解对指定 CSS 属性设置动画的影响。
改变页面（布局）结构或导致绘图的动画属性特别消耗资源。
应尽可能避免给触发布局或绘制的属性设置动画。

9. 参考/转载

Google_Animations

深入React

通过这些题目可以使我们更了解React框架，也有助于大伙的面试。建议配合其源码来了解其原理加深理解。:)

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React 使用场景？

逻辑复杂单页应用，偏中后台管理系统。
适合超大规模多人协作的复杂项目。
构建大型应用程序。

React 生命周期?(生命周期图谱)

挂载组件实例被创建并插入DOM时，生命周期调用顺序：

constructor( props ): 初始化state或方法绑定
static getDerivedStateFromProps(): 返回一个对象来更新 state，如果返回 null 则不更新任何内容
render(): 渲染
componentDidMount(): 组件渲染到DOM后运行

更新组件的props或state变化时触发更新，组件更新的生命周期调用顺序：

static getDerivedStateFromProps(props, state): 返回一个对象来更新 state，如果返回 null 则不更新任何内容
shouldComponentUpdate(nextProps, nextState): 当 props 或 state 发生变化时执行，默认返回true，当返回false时，则不会调用render和componentDidUpdate钩子
render(): 渲染
getSnapshotBeforeUpdate(prevProps, prevState): 在最近一次渲染输出（提交到 DOM 节点）之前调用，返回值为 null 或 snapshot 值（该值将作为componentDidUpdate的第三个参数）。
componentDidUpdate( prevProps, prevState, snapshot): 会在更新后会被立即调用。首次渲染不会执行此方法。(当返回false时，则不会调用render和componentDidUpdate钩子)

卸载当组件从DOM中移除时，组件调用方法：

componentWillUnmount(): 会在组件卸载及销毁之前直接调用。

错误当渲染过程，生命周期，或子组件的构造函数中抛出错误时，调用方法：

static getDerivedStateFromError(error): 此生命周期会在后代组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state (渲染阶段调用,不允许出现副作用)
componentDidCatch(error, info): 在后代组件抛出错误后被调用 *(在render阶段调用,允许执行副作用)

实现组件的方式？

通过 JavaScript 函数定义无状态组件 (最简单的方式)
使用 React.Component(ES6 classes方式) 定义React组件的基类
使用 React.PureComponent 定义组件 (仅在你的 props 和 state 较为简单时，才使用 React.PureComponent，或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新)
使用 React.memo 为高阶组件，适用于函数组件，不适用于class组件

应该在React生命周期的什么阶段发出Ajax请求？

componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。

shouldComponentUpdate函数有什么作用？

shouldComponentUpdate是一个允许我们自行决定某些组件（以及他们的子组件）是否进行更新的生命周期函数，reconciliation的最终目的是尽可能以最有效的方式去根据新的state更新UI。
如果你已经知道UI的哪些状态无需进行改变，就没必要去让React去判断它是否该改变。让shouldComponentUpdate返回falss, React就会让当前的组件和其子组件保持不变。

当组件的setState函数被调用之后，发生了什么？

React会做的第一件事就是把你传递给setState的参数对象合并到组件原先的state。这个事件会导致一个“reconciliation”（调和）的过程。reconciliation的最终目标就是，尽可能以最高效的方法，去基于新的state来更新UI。为了达到这个目的，React会构建一个React元素树（你可以把这个想象成一个表示UI的一个对象）。一旦这个树构建完毕，React为了根据新的state去决定UI要怎么进行改变，它会找出这棵新树和旧树的不同之处。React能够相对精确地找出哪些位置发生了改变以及如何发生了什么变化，并且知道如何只通过必要的更新来最小化重渲染。

为什么循环产生的组件中要利用上key这个特殊的Prop？

Keys负责帮助React跟踪列表中哪些元素被改变/添加/移除。React利用子元素的key在比较两棵树的时候，快速得知一个元素是新的还是刚刚被移除。没有keys，React也就不知道当前哪一个的item被移除了。

refs 是什么?

Refs是能访问DOM元素或组件实例的一个函数；

什么时候应该选择用class实现一个组件，什么时候用一个函数实现一个组件？

组件用到了state或者用了生命周期函数，那么就该使用Class Component。其他情况下，应使用Function component

并不是父子关系的组件，如何实现相互的数据通信？

使用父组件，通过props将变量传入子组件 （如通过refs，父组件获取一个子组件的方法，简单包装后，将包装后的方法通过props传入另一个子组件 ）
状态管理：Redux | MobX | Dva ..

为什么虚拟 dom 会提高性能?

浏览器引擎的执行引擎和渲染引擎在不同线层执行，每次操作Dom都会进行线层间的通信，还会引起浏览器的回流和重绘，这样是很浪费性能的；虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

何为高阶组件

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。

调用 super(props) 的目的是什么

在 JavaScript 中，super 指代父类的构造函数。重点在于，在你调用父类构造函数之前，你无法在构造函数中使用 this。JavaScript 不会允许你这么做；

class Person {
 constructor(name) {
   this.name = name;
 }
}
class PolitePerson extends Person {
 constructor(name) {
   this.greetColleagues(); // 🔴 这是不允许的，下面会解释原因
   super(name);
 }
 greetColleagues() {
   alert('Good morning folks!');
   alert('My name is ' + this.name + ', nice to meet you!'); }
 }
}

但我们忘了 this.greetColleagues() 是在 super() 有机会设置 this.name 之前被调用的。this.name 甚至还没被定义！如你所见，像这样的代码理解起来会很困难。

为了避免这样的陷阱，JavaScript 强制规定，如果你想在构造函数中只用this，就必须先调用 super。让父类做它该做的事！这一限制也适用于定义成类的 React 组件。

事件在 React 中的处理方式

为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新 DOM 时，React 不需要担心跟踪事件监听器。

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.