• link是HTML关键字，@import是css关键字
• link是页面加载的时候加载，@import是页面加载完再加载
• link没有兼容问题，@import对IE以下的不支持
• link可以用js操作，而且@import不可以

Go Back

• 如果是普通函数，this 指向（window 或者 globe）
• 如果是一个对象的方法，this 指向改对象
• 如果用了 new，this 指向新的实例

var video = {
	name: "coco",
	tags: [1,2,3],
	play: function() {
		this.tags.forEach(function(tag) {
			console.log(this.name, tag)
		})
	},
	country: {
	    name: "china",
	    print: function() {
	        console.log(this.name)
	    }
	}
}
video.play()
// window 1
// window 2
// window 3
video.country.print()
// china

• this 指向 window，是因为 forEach 方法传入的就是一个普通函数。
• this.tags 指向调用它的对象。
• print 方法中的 this 也是指向调用它最近的对象。

• 两边固定中间自适应
• 中间margin-left margin-right为两边留位置，然后再通过position为两边定位置
• flex更为方便好理解

变量类型

基本类型：Null Undefined String Number Boolean Symbol

引用类型：Object Function

判断类型的方法：type of

判断实例与构造函数依赖的方法：instanceof

原型和原型链

在 JavaScript 中万物皆对象。Null 是所有对象的源头，Null就像上帝，Function 和 Object 就是亚当和夏娃，它们通过 prototype 和 constructor 繁衍后代，prototype 提供基因，constructor 就是子宫。

• 所有的引用类型（数组、对象、函数），都具有对象特征（Null 除外）。
• 所有的引用类型（数组、对象、函数），都有一个浏览器提供的 __proto__ 属性。
• 所有函数都有一个 prototype 属性
• 所有的引用类型（数组、对象、函数）的 __proto__ 都指向它的构造函数的 prototype 属性。

用代码来描述：

// 对象可扩展
var obj = {};
obj.b = 1
var arr = [];
arr.b = 1
function fn() {}
fn.b = 1 

// 判断对象中是否存在该属性
obj.hasOwnProperty('b') === true

// __proto__
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)

// 只有函数有 prototype
console.log(obj.prototype) // undefined
console.log(arr.prototype)	// undefined
console.log(fn.prototype)

// 应用类型的 __proto__ 属性指向它构造函数的 prototype 属性
console.log(fn.__proto__ === fn.constructor.prototype)                
console.log(fn.__proto__ === Function.prototype)                
console.log(arr.__proto__ === Array.prototype)                
console.log(obj.__proto__ === Object.prototype) 

当对象 obj 在访问属性的时候，会在自身属性中寻找，如果自身没有，就会通过 obj.__proto__ （即构造函数的 prototype）中去寻找。如果还没有就会继续通过 obj.__proto__.__proto__ 中去寻找，一直向上寻找，就形成了原型链。如果在最上层也没找到，就会返回 undefined。

最上层是什么 —— Object.prototype.__proto__ === null

作用域和闭包

作用域

作用域的目的是确定变量的访问权限，也就是为了避免变量污染。

首先 JavaScript 采用的是词法作用域，也就是静态作用域，即创建的时候就确定好了。

在ES6以前，JavaScript 只有全局作用域和函数作用域，没有块级作用域，不像 Java 那样，一个花括号就是一个作用域。

在ES6中 引入了 let 关键字，才有了块级作用域。

作用域链

当变量查找时，会从当前上下文中的变量对象中查找，如果没有，会从父级上下文的变量对象中查找，直到找到全局的变量。由多个执行上下文的变量对象构成的链表就叫作用域链

执行上下文

console.log(a) // undefined
var a = 1
console.log(b) // 报错
b = 2

当一段 JavaScript 执行时，要先经历一个解析阶段，就是把要用的变量放入全局的执行上下文，比如解析到 var a 时，会将 a 扔到全局执行上下文中。

开始执行代码，当用到 a 变量时，a 还未被赋值，被得到 undefined。

b 未使用 var 关键字来定义，所以不会放到全局执行上下文中，当用到 b 时，会报错，b 未定义。

函数也有执行上下文，比全局执行上下文多 this arguments

闭包

闭包指的是，有权限访问访问其他作用域中变量的函数。

理解闭包核心：JavaScript的函数作用域是在函数创建的时候定义的，而不是在执行的时候创建的

看下面的例子：

function out() {
	var name = "js"
	return function inner(){
		console.log(name)
	}
}
var fn = out() // fn 引用了 out 的作用域
fn() // 当 fn 执行的时候就可以访问到 out 的作用域中的 name 变量

垃圾回收机制

引用计数

当声明一个变量，将一个引用类型赋值给该变量，则当前引用次数为1，如果同一个值赋给另一个变量，则引用次数加1。相反，如果拥有该值的变量拥有了其他值则减1，当值的引用次数为0时，垃圾回收期下次运行时，就会回收。

下面这个例子：

function func() {
	var a = new Object()
	var b = new Object()
	
	a.someOtherObject = b
	b.otherObject = a
}
// 这两个值引用次数都为2，永远不会回收

标记清除

当函数中声明一个变量，则标记这个变量为“进入环境”，只要进入相应的环境你就可以访问到它。当变量离开环境时，则将其标记会“离开环境”

异步

JavaScript 实现异步的方法？

• 回调函数
• 事件监听
• 发布/订阅
• Promise对象

由于回调函数的写法会导致，函数嵌套，造成代码横向发展，而不是纵向发展，从而难看难维护。

Promise 应运而生。

基本用法：

function func(resolve, reject){
 setTimeout(function(){
  resolve('func')
 },500)
}
new Promise(func)
.then(function(data){
 console.log(data)
 return 'next'
})
.then(function(data){
 console.log(data)
})

Promise 解决了代码横向发展的问题，但一眼望去全是 .then，可读性很差。

所以又出现了 generator 来解决这个问题：

generator 基础应用：

    var fetch = require('node-fetch');

    function* gen(){
      var url = 'https://api.github.com/users/github';
      var result = yield fetch(url);
      console.log(result.bio);
    }

    var g = gen();
    var result = g.next();

    result.value.then(function(data){
      return data.json();
    }).then(function(data){
      g.next(data);
    });

generator 是 ES6 对协程的实现，yield 可以暂停函数。generator 需要手动通过 .next() 来启动函数继续执行，加上 * 和 yield 让人很难理解。

async/await 目前来说终极的解决方案：

基本用法：

    function timeout(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    }

    async function asyncPrint(value, ms) {
      await timeout(ms);
      console.log(value)
    }
    
   // 5秒后打印 hello world
   asyncPrint('hello world', 5000) 

async/await 其实就是 generator 的语法糖，* 号相当于 async，yield 相当于 await。await 有了返回值后会继续执行不需要像 generator 需要通过 .next 来启动函数继续执行

ES6/7常用特性

作用域的目的是确定变量的访问权限，也就是为了避免变量污染。
首先 JavaScript 采用的是词法作用域，也就是静态作用域，即创建的时候就确定好了。
在ES6以前，JavaScript 只有全局作用域和函数作用域，没有块级作用域，不像 Java 那样，一个花括号就是一个作用域。
在ES6中 引入了 let 关键字，才有了块级作用域。

Learn Enough React For The Interview

React is one of the most popular javascript libraries and it's going to be more popular in 2019 and beyond. React is released in 2013 and it gained a lot of popularity over the years. It's a declarative, component-based and efficient javascript library for building user interfaces.

计算机程序通常是由数据结构+算法组成的。

知识点总览：

• 常见数据结构
  • 栈、队列、链表
  • 集合、字典、散列集
• 常见算法
  • 递归
  • 排序
  • 枚举
• 算法复杂度分析
• 算法思维
  • 分治
  • 贪心
  • 动态规划
• 高级算法结构
  • 树、图
  • 深度优先、广度优先

数据结构

数据结构决定了空间和时间的处理效率，根据不同的场景确定不同的数据结构。

读的多的数据，要想竟可能想办法提高读取效率，比如IP 的数据储存，他可能只会写一次，而读取很多次。

常见的数据结构

• 简单数据结构
  • 有序数据结构：栈、队列、链表 （占用空间小）
  • 无序数据结构：集合、字典、散列集 （查询熟读快）
• 复杂数据结构
  • 树、堆
  • 图

有序数据结构比如数组存储，节省空间，但查找慢。用无序数据结构比如对象存储，用 key 就可以快速查找到。

对于简单的数据结构，在 ES 中对应的是 Array 和 Object。可以想象下数组是有序的而对象是无序的，对象可以通过 key快速获取值，而数组则有个查找过程。

算法

算法分为时间复杂度和空间复杂度。

时间复杂度指的是算法运行的时间，空间复杂度指的是算法运行所需的储存空间。

算法的复杂度

一般遵循这几个原则：

1. 一重循环 O(n)，两重循环 O(n^2)，一次类推。
2. 如果是二分法，复杂度为 O(log(n))。
3. 去除常数，保留最大值。

举个例子：

var i = 0;                   // 这条语句执行1次
while(i < n) {             // 这条语句执行n次
    console.log(i);      // 这条语句执行n次
    ++i;                      // 这条语句执行n次
}

算法复杂度计算：1 + n + n + n = 1 + 3n，去除常数项，复杂度为 O(n)

Go Back

问题：

1. 2~23的随机数
2. 数组长度为5，且不重复
3. 只能用递归

选择器权重优先级

• 内联样式：如 style="" 权重为1000
• ID选择器： 如 #box 权重为100
• 类、伪类和属性选择器： 如 .box :hover [attribute] 权重为10
• 元素选择器和伪元素选择器：如 p div 权重为1
• 通用选择器（*）、子选择器（<）、相邻同胞选择器（+）权重为0

权重值越大优先级越高，相同权重遵循后定义的覆盖先定义的

盒模型

三个核心：padding、border、margin

盒子的宽度：内容宽度 + padding宽度 + border宽度 + margin宽度。改变任何一个都会改变整个宽度。

如果设置了box-sizing:border-box，那么设置 width:100px时，这100px 包含了（内容 + padding宽度 + border宽度）

纵向 margin 重叠

当两个 div 的 margin 为 20px，那么两个div的纵向的距离不是 40px，而是20px，因为纵向的 margin 会重叠。如果一个的比另一个的 margin 大，那么遵循大的吃小的原则。

浮动

float 的设计初衷是为了图片的环绕效果，当图片设置了 float:left 文字会环绕图片周围。

float + div

人们发现 float + div 可以解决类似 table 的布局，所以 float 现在常常用来布局。

破坏性

如果子 div 设置了 float，会导致父 div 出现坍塌。因为设置 float 会让子 div 脱离文档流

包裹性

div 属于块级元素，如果不设置宽度，会撑满整个宽度，当设置 float:left 时，会让 div 包裹文字。这就印证了它的设计初衷，让文字环绕图片，如果没有包裹性，它就无法紧贴文字。

清空空格

当几个图片在一排显示时，有留有空格。设置 float 让图片脱离文档流，既然都脱离文档流了，那么什么空格换行都跟他没关系了。

清除浮动

浮动会导致脱离文档流，导致布局错乱，所以需要触发 bfc 来清除浮动，清除浮动常见的方式：

1. 伪类

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

2. 为父级设置高度

什么是BFC？

BFC 全称 Block Format Context，可以想象成一个盒子，营造一个封闭空间，盒子里面和外面相互不影响。在说 BFC 之前先来看看元素定位问题。

常见的定位方式有三种：

1. 普通文档流

元素按照从上到下，从左到右，以此排列。如果是行内元素，从左到右，铺满换行。如果是块级元素，他会默认占满一行，所以会从上到下排列

2. float

float 会脱离普通文档流，元素按照当前的位置，向左或者向右靠。

3. 绝对定位

脱离普通文档流，他的位置不会受到别的元素影响，也不会去影响其他元素。通过绝对坐标来确定位置。

BFC 具有除了普通文档流的其他特性，比如 margin 重叠的问题，如果触发 BFC，margin 就不会重叠。比如 BFC 会 阻止设置 float 导致的文字环绕，所以 BFC 还是清除浮动。

那怎样才能触发 BFC 呢？

比较常用的，overflow:hidden, overflow 除 visible 的属性外都可以触发

定位

可选属性 static/relative/absolute/fixed

absolute

• 脱离文档流
• 包裹性
• 跟随性
• 悬浮页面上方，挡住下面的内容

flex布局

基本使用：

<style type="text/css">
    .container {
      display: flex;
    }
    .item {
        border: 1px solid #000;
        flex: 1;
    }
</style> 
<div class="container"> 
	<div class="item">aaa</div> 
	<div class="item" style="flex: 2">bbb</div> 
	<div class="item">ccc</div> 
	<div class="item">ddd</div> 
</div>

如何实现居中对齐

水平居中

• inline 居中

text-aligin: center 	

• block 居中

.container {
    text-align: center; 
}
.item {
    width: 1000px;
    margin: auto; 
}

• 绝对定位居中

.container {
    width: 500px;
    height: 100px;
    position: relative; 
}
.item {
    width: 100px;
    height: 100px; 
    position: absolute;
    left: 50%;
    margin-left: -50px
}

垂直居中

• inline 居中

.container {
   height: 50px;
   line-height: 50px;
}

• block 居中

可以用绝对定位居中（同上），也可以用 margin:auto，不需要提前知道尺寸，且通用性好。

.container { position: relative; height: 300px; } 
.item { 
	width: 100px; 
	height: 50px; 
	position: absolute; 
	left: 0; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	margin: auto; 
}

语义化

让人和机器更容易读懂代码

比如 h1 p header strong 这些标签，方便搜索引擎爬网页

CSS动画

@keyframes testAnimation { 
    0% {background: red; left:0; top:0;} 
    25% {background: yellow; left:200px; top:0;} 
    50% {background: blue; left:200px; top:200px;} 
    75% {background: green; left:0; top:200px;} 
    100% {background: red; left:0; top:0;} 
}
div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: testAnimation;
    animation-duration: 5s;
}

重绘和回流

重绘：指的是浏览器重新绘制样式，比如颜色，背景等，不会脱离文本流。

回流：当元素的大小，或者属性发生改变，会导致浏览器重新渲染部分或者全部文档

相比之下，回流比重绘更消耗性能。编码时，要尽量避免回流。

思考：如何优化一下代码

for (var i = 0; i < data.length; ++i) {
    dom.innerHTML = '<p>'+data[i]+'</p>'
}

知识点

• 当 URL 输入之后发生了什么？
• 性能优化
• WEB 安全

当 URL 输入之后发生了什么？

当输入 URL 回车之后，会发生加载和渲染两个过程：

加载

• 通过 DNS 服务器，找到 URL 对应的 IP
• 向对应 IP 服务器发送 HTTP 请求
• IP 服务器响应相应的 HTTP 请求
• 浏览器接收到服务器发送的 HTML 文件

渲染

• 将 HTML 转换成 DOM 树
• 将 CSS 转换成 CSSOM
• 将 DOM 和 CSSOM 合成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到 script 标签会阻塞渲染

为什么 CSS 加载要放到 HTML 的头部？

让浏览器先拿到 CSS 文件，生成 CSSOM，当 DOM 生成后可以一次性生成 RenderTree，避免页面卡顿

为什么 JavaScript 文件要放到 HTML 底部？

由于 JavaScript 执行的线程和页面渲染的线程是同一个，所以遇到 script 标签时，会阻塞渲染。当用户打开页面，应该让用户先看到页面，所以将 JavaScript 文件放到 HTML 底部。

还有一个原因是，如果 JavaScript 中涉及到 DOM 操作，放到 HTML 底部可以确保 DOM 已经渲染完成，并能操作到相关节点。

性能优化

性能优化大体思路，主要分为两个部分：

减少页面体积，减少网络请求时间

• 合并静态资源（JavaScript文件合并、CSS文件合并、雪碧图）
• 使用静态缓存（文件名加MD5戳）
• 使用 CDN

优化页面加载

• 减少 DOM 操作，对多个 DOM 操作合并
• 减少 DOM 查询，对 DOM 查询做缓存
• 服务端渲染
• 懒加载（下拉加载更多，图片懒加载）
• CSS 文件放前面加载，JavaScript 放在后面加载

WEB 安全

SQL 注入

比如，当用户输入用户名密码后，数据提交到后端，后端直接拿用户名密码拼接 SQL 语句。如果用户输入恶意的代码，那最后拼接的 SQL 就会有问题，造成 SQL 注入。

解决方式之一，加入用户输入校验。

XSS ( Cross Site Script 跨站脚本攻击）

比如你在某网站上发布一篇文章，在文章中写了一些代码，比如 document.cookie 来获取访问该网页的用户，并将该用户的 cookie 上传到你的服务器。

解决办法：

1. 对敏感的 cookie 这是 http-only 来阻止 JavaScript 脚本的访问。

2. 过滤用户的输入，比如

& 替换为：&
< 替换为：&lt;
> 替换为：&gt;
” 替换为：&quot;
‘ 替换为：&#x27;
/ 替换为：&#x2f;

CSRF （Cross-site requst forgery）跨站伪造请求

假如一个支付网站的转账接口是 http://www.bug.com?id=123&money=1000，请求该接口转账完成。

如果用户登录了 www.bug.com ，此时用户打开了一个邮件，邮件中有这么一行代码 <img src = "http://www.buy.com?id=123%money=1000"></img>。这样就在用户不知情的情况下偷偷的把1000块钱转给了id为123的账号。

解决方法：

对凡是涉及到支付的接口，都要单独输入密码，或者重新登录。

Introduce some code snippets.

• 任务（task）处理： IO，Timer
• 微任务（Microstask）处理：Promise ，MutationObserver
• 微任务优先级高于任务，当 JS stack 清空，优先推入微任务

Tasks, microtasks, queues and schedules
Faster async functions and promises

web-api

BOM

浏览器提供的一些接口，比如 location、screen、navigator、 history。

DOM

起初使用 xml 来描述页面结构，为了标准化，推出了 html，当浏览器通过 url 请求服务器，服务器返回 html 给浏览器，浏览器和 JavaScript 都不认识 html，所以浏览器会把 html 转换成 DOM，DOM 是一个树结构

获取 DOM

// 通过 id 获取
var dom = document.getElementById('box')

// 

property 和 attribute的区别

• property

DOM 节点就是一个 js 对象，比如一个 p 节点，可以拥有 class style 等属性

• attribute

属于 html 的属性，需要通过 getAttribute 和 setAttribute 来操作属性，改操作会造成重绘和重排，所以尽量避免频繁操作。

Composing Software
author: Eric Elliott

问题【LeetCode 198】：
一个小偷准备去偷一排别墅，但是相邻两个别墅被偷了会触发报警，所以在不出发报警的前提下，如何偷到最多的钱。
用数组表示一排别墅，比如 [1,2,5,2,1,3], index 为0的别墅和 index 为1的别墅相邻，index 为0的别墅可偷的钱为1。
如果是 [1,2,5,2,1,3]，小偷偷到最多的钱总和为：1+5+3 = 9

• 用于浏览器编译，不呈现给用户
• 常用的就是设置视图宽度与机器宽度等宽 width = device-width；不允许用户缩放等

reference

• when the order does matter, it is a permutation.
• when the order does not matter, it is a combination.

Permutation

1. Repetition is allowed:

Such as a permutation lock, the number is '333'.

For example, choose 3 of those things(n), the permutations are:

n*n*n

2. No repetition:

For example the three first people in a running race, you can't be first and second, assume there are five people, the permutations are:

5*4*3

!5 / !(5-3)

choose r from n:
!n / !(n-r)

Combination

1. Repetition is allowed

There are five flavors of ice cream: banana, chocolate, lemon, strawberry, vanilla.

We have three scoops, how many variations will there be?

let's use letters for the flavors: {b, c, l, s, v}. Examples selections include:

1. {c,c,c} {three scoops chocolate}
 >ooo>>>
2. {b,l,v} (one each of banana, lemon, vanilla)
 o>>o>>o
3. {b,v,v} (one scoop of banana, two scoop of vanilla)
 o>>>>o

!n / !r * !(n - r)

!(3 + 5 - 1) / !3 * !(5 - 1)

!(r + n - 1) / !r * !((r + n - 1) - r) = !(r + n - 1) / !r * !(n - 1)

2.No repetition

choose 3 from 3

the permutations are:
123
132
213
231
312
321

the combinations are:
123

3! / !(3-3)*!3

choose r from n:

n! / !(n-r)*!r

https://30secondsofinterviews.org/

Go Back