js一些基础细节回顾，特别是css

FC Formatting context

规范子元素

BFC （块级作用域）隔离的独立容器，做浮动清除

触发方式：

1.body根元素划分出来

2. Overflow不为visible，哦VR额佛为= (hidden, auto, scroll)

1. 绝对定位，固定定位（脱离文档刘）
2. 4. displayListinline-block,table-cell,flex

对外部的作用

特性：

一、同一个BFC外边距折叠

//body是一个会计作用域

Body

{

Divmargin：10（）

Divmargin；10)

}

最终margin不是20是10

如果生成两个会计作用域，就会变成20

Div{overflow:hi}

IFC（内链格式上下文）

页面中p中自己的上下文

不允许插入块级，如果除夕拿了，则拆分成两个IFC

GFC（网格布局上下文）display:grid

FFC(自适应格式上下文)display：flex|inline-flex

二、进行浮动计算

如果没有bfc, 父元素内有子元素，会根据子元素计算高度，但是如果子元素float：right,父元素告诉变成0。

如果父元素加入bfc，如overflow:hidden, 则父元素告诉变成子元素的高度，进行浮动计算。

<div style=”float:right;height:100px”>child</div>

</div>

三．内容隔开

如果没有bfc, 文字将环绕元素，如果设置bfc,在此元素的下面，就不会有文字

DIv垂直居中

1, position absolute

Div{

Background:red

Position:absolute

Left:50%

Top:50%

Transform: translate(-50%, -50%)

}

相似的

Div{

Background:red

Height:300px;

Width:300px;

Position:absolute

Left:50%

Top:50%

Margin-top:-150px;

Margin-left:-150px

}

绝对定位法，不需要知道元素宽高

Div.child{

Width:600px

Height:600px;

Position:absolute

Top:0

Bottom:0

Left:0

Right：0

Margin:auto

}

flex布局, 主轴测轴居中

Div.parent{

Display: flex

Justify-contnt:center

Align-items: center

}

弹性部句，也可以marginLauto

Table-cell 使里面的元素水平垂直居中

Parent{

Display:Table-cell

Text-aign:center

Vertail-align:center

}

Child{

Display: inline-bliokc

}

动态计算的方法

Parent{

Display：relative

Width:600px;

Height: 600px;

}

Child{

Position:absolute

Width:200px

Height:200px;

Left: calc(400px-200px)/2;

rightLcalc(400px-200px)/2

Top: calc(400px-200px)/2

Bottom: calc(400px-200px)/2

}

隐藏元素

Display:none

Visibilit: hidden

Opacitcy: 0;

F12

Visiblity/opaity实际上渲染了，并且占据页面的位置

点击事件

Visibility不会触发事件

Opacity会触发事件

其他

Display:hidden 不会被子元素继承，毕竟没有渲染处理，而且也诶有过度效果

visibilityLhidden，会被继承， trasction:visibitli会被继承，隐藏会延迟

Opacity：0 会被子元素继承且不能通过opacity:1取消隐藏， transision:opacity可以延时隐藏和显示

不改变代码的情况下，是这张图片宽度为300

Document.getElementByTagName(‘img’)[0].setAttribute(“style”, “300px !important”)

手机分辨率高，1px在手机上变成2px

Window.deviceRatio = 2

1.如何处理1px,可以用0.5px

2.或者用图片

3.用背景图片

4. 用简便背景实现

5. box-shadom:模拟

Boder{

Biox-shadow:inset 0px -1ox 1px -1px #red}

6. viewport+rem实现

Rem等同于所有的狂傲都要修改

伪类+transform实现，把原先的给隐藏掉，然后用伪类重做，用transform的scale缩小一半

.scale-1px{

Position:relative;

Border:none

}

.scale-1px:after{

Content:’ ’,

Position:absolute;

Bottom:0;

Background:#000;

Width:100%;

Height:1px;

Transform: scaleY(0.5)

Transform-origin: 0.0

}

parseInt(str, radix)

parseInt第二个参数是2-35，如果不是，会执行下面计算

如果str是按照0开头，则认为8进制，

如果str是0x开头，认为是16进制

否则10进制

[“1”,”2”,”3”].map(parseInt)

[1, N/A, N/A]

[“10”,”10”,”10”].map(parseInt)

[10, N/a, 3]

节流和防抖debounce and tothle

1如果不行要调用多次，如scrollEvent,可以用节流

Document.body.addEventListener(‘scroll’, debounce(()=.{

Console.log(‘scrolled’);

}, 3000));

Function debounce(callback, time){

Let canrun = true;

Return ()=>{

If(!canrun){

Return;

}

Canrun = false;

setTimoeut(()=>{

Callback.call(this, arguments);

Canrun = true;

}, time)

}

放抖。 input需要等用户停止，去触发

Document.body.addEventListener(‘change’, tothle(()=>{

Console.log(‘send xhr request’);

}， 3000));

Function Tothe(callback, time){

Let timer;

Return function(){

Timer && clearTimeout(timer);

Timer = setTimeout(()=>{

Cakkback.apply(this, arguments);

}, time);

}

Es6set map weakmap, weakset,主要是用了weakset/weakmap不容易造成内存泄漏

set唯一，不重复

键名和键值是一致的

可以遍历，add delete has

Weakset

成员都是对象

成员都是弱引用，可以被垃圾回收回收，可以用来保存dom节点。不造成内存泄漏

(如果，节点从body删掉，那么集合也就删掉了，垃圾回收了，主要用在节点保存)

不能遍历，有add, delete, has

Map

键值对

方法很多，可以转化成各种数据结构?

Weakmap

建名是弱引用，建是任意值，可以被垃圾回收

不能遍历，方法有

判断是不是数组

用constructor的name属性，可以得到原型链上的对象属性名字

Let a=[12]

Constructr.name //=>Arrau
__proto__.constructor().name //=>Array
用 Object.property.toString会返回原型脸上的对象属性名字，既包含基础类型，又包含原生引用类型,会返回【Object type】

https://zhuanlan.zhihu.com/p/118793721

其实在一些对象里面有[Symbol.toStringTag],所以返回的是[Object Symbol.toStringTag] "[object " + tag + "]"

经常toString会被重写，所以需要调用没被重写以前的方法。

Object.prototype.toString.call(a,[])

或者 Reflect.apply(Object.proptotpye, a, []) => [Object Array]

Object.property.toString.call(a) //=>[Object Array]

其他的例如：

Object.property.toString.call(“aa”) //=>[Object String]

Object.property.toString.call(1)//=>[Object Number]

Object.property.toString.call(Symbol(1))//=>[Object Symbol]

Object.propert.toString.call({name: ‘A’})//=>[Object Object]

Object.property.toString.call(new Date) => //[Object Date]

var reg = /[hbc]at/gi;

Object.prototype.toString.call(reg);//"[object RegExp]"

自定义类型都是Object

Function Phone(){

}

Var oppo = new Phone();

Object.proprotype.toString.call(oppo) //=>[Object Object]”

Instanceof可以判断出Person

判断原生JSON对象

Object.prototype.toString.call(window.JSON )

"[object JSON]"

Math.toString(); // => "[object Math]"

Atomics[Symbol.toStringTag]; // => "Atomic"

ArrayBuffer.prototype[Symbol.toStringTag]; // => "ArrayBuffer"SharedArrayBuffer.prototype[Symbol.toStringTag]; // => "SharedArrayBuffer"DataView.prototype[Symbol.toStringTag]; // => "DataView"

import * as module from "./export.js";

module[Symbol.toStringTag]; // => "Moduel"

Object.prototype.toString.call((function() {

return arguments;})()); // => "[object Arguments]"

new Set().keys()[Symbol.toStringTag]; //"Set Iterator"

Instanceof

Instanceof的内部机制是通过判断对象的原型联众不是不是能找到类型的prototpye。

但不可以判断基本类型 //1 instanceof Number //fase,所有类型的instanceof Object都是true

[] instanceof Object //true

[] instanceof Array //true

Array.isArray是es5出现的，如不存在

if(Array.isArray)

Array.isArray = funciton(arg){

Return Object.property.toString.call(arg)==’Object Array’

}

ES6 class的新增特性

Class不可以变量提升
2. function是可以枚举iterator的，可是class不可以
3. function是可以重命名的， class会报错
Function里面的属性function自带constructor，可以new，但是class不行

圣杯布局

有上下，然后

<html>

<style>

.part{

display: flex;

flex-direction: column;

}

.content{

display: flex;

flex-direction: row

}

.first {

background: red;

height: 100;

Flex:0 0 200px;

Order:-1

}

.second {

background: green;

height: 300;

flex:1

}

.last {

background: grey;

height: 500;

flex:0 0 200px;

}

</style>

<body>

<div class="first">first</div>

<div class="second">secnd</div>

</div>

<div class="head">footer</div>

</div>

</body>

</html>

<html>

<style>

.part{

float:left

width：100%；

}

.footer{

clear:both

}

.content{

padding-left:200px;

padding-right:150px;

}

.first {

background: red;

height: 100;

200px;

display: inline-block;

margin-left:-100%;

}

.second {

background: green;

height: 300;

100%;

display: inline-block;

}

.last {

background: grey;

height: 500;

150px;

display: inline-block;

margin-right: -100%;

}

</style>

<body>

<div class="first">first</div>

<div class="second">secnd</div>

</div>

<div class="head">footer</div>

</div>

</body>

</html>

解决跨域问题

原因：浏览器同源策略

解决：

jsonp允许Sscript标签，

反向代理：nginx Access-Control-Aloow-Open:*

Cors：配置允许跨域响应头

Iframe嵌套通讯，postmessage

事件模型：

事件绑定：ul-li绑定父元素，利用冒泡

事件委托:addEventListener判断是冒泡还是响应的元素

继承

function SuperType(name){

this.name = name;

this.color = ["red"];

}

SuperType.prototype.getName = function(){

return this.name;

}

SuperType.prototype.pushColor = function(){

this.color.push(this.name);

return this.color;

}

function SubType(name){

SuperType.apply(this, [name]);

this.subname = name;

}

function inhert(subclass, superclass){

subclass.prototype = Object.create(superclass.prototype);

subclass.prototype.constructor = subclass;

}

inhert(SubType, SuperType)

var a = new SubType("12");

a.pushColor();

var a1 = new SubType("122");

Ajax fetch

Xml.readState==4 && xml.status==2000

Xml.send(‘get’, url, true)

Xml.send()

Ajax优缺点

Js页面数据渲染：交互性好，不会弄出白屏什么的

单页面应用

缺点:

不好爬虫

Ajax vs fetch

Fetch是es6里面的内容， ajxshi xmlhttprequest, fetch是相对简单，不能取消请求， fetch不能检测进度，需要特别封装400, 500, 不支持cookie

Cookie：服务端或者客户端init《服务端通过set-cookie请求头，可以设置失效时间，默认是关闭浏览器失效 4kb

过多在header上，会影响性能

访问权限窗口

Session:session是服务端发过来的密文， sessionid

由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域继承父域的localstorage的数据，这点哈cookie区别还很大。

Sessionstorage当页面关闭，变不再存在

如果跨域共享localstorage data

1. window.attachEvent('storage', function() {11 // TODO: ie8 support12 });13 } else {14 window.addEventListener('storage', function(e) {15 if (e.newValue !== null && /^channel.(.+)/.test(e.key)) {16 broadcast(RegExp.$1, e.newValue);17 }18 });

2. ifrmae postMessage

创建对象的几种方法：

字面量
工厂模式

Function factory(){

// Reutrn (){}

Return{name:1};

}

3. 构造函数
4. class

Javascript this

由new 调用，绑定到新创建的对象
B.由call/apply或者bind调用，绑定到指定的对象
c由上下文对象调用，绑定到上下文对象
D.默认的，在严格声明undefined, 否则绑定到全局对象
当函数作为对象的方法调用时，函数内this指向调用该函数的对象， obj.method指向obj对象
如果es2015的箭头函数，经忽略上面的规则， this指向创建的上下文

var obj ={'name':123, getName:function(){console.log(this)}}

undefined

obj.getName()

//VM600:1 {name: 123, getName: ƒ}

undefined

var obj1 ={'name':123, getName:()=>{console.log(this)}}

undefined

obj1.getName()

//Window

浏览器优化

渲染队列，每个16.6ms清空。1000/60..但是以下属性也刷新渲染队列，因为计算复杂，导致回流。

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop, scrollLeft, scrollWidth, scrollHeight

sclientTop, clientLeft, clientWidth, clientHeight

Width, height

getCOmputeStyle

getBoundingClientRect()

减少重绘和回流

1. 用transform而不是top
2, 用visiblity，而不是dipslay:none
避免table
4,css不要过长,不要内链
5.尽可能在dom树的末端使用class
6. 动画效果放在position absolute, position fixed，控制动画速度requestanimationCallback
减少使用css表达式
Js docuemntFragment,一次渲染
尽量把变化大的防砸图层，如vidio, iframe, cavas
尽可能一次渲染

浏览器与Node的事件循环有何区别

多线程，单进程，互斥的

GUI渲染县城
2. js引芹县城
定时器触发线程
事件触发线程
异步http请求线程

Node引擎

运行机制

V8引擎解析javacript脚本
解析后的代码，调用node api
lib负责node的执行，非配给不同线程，形成eventloop,以异步的方式将任务的执行返回给v8
V8引擎把结果返回给用户

六个阶段

Timer setTimeout/setInterval

I/O

Idle,

Poll, 接收timeout,poll不为空，遍历回调队列;poll为空，如果时间比较长，放入后面setIMmediate

Check

callback