社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
目录
1： 常见的数据类型 以及 基本(原始)数据类型和引用数据类型的区别
15：Cookie、sessionStorage、localStorage的区别
17：get和post 区别和相同点。以及还有哪些别的请求方式？
4：setState在react 中你认为是同步还是异步，setState第二个参数
8：什么时候用类组件Class Component,或函数组件Function
11.shouldComponentUpdate 是做什么的？
13：setState 和 replaceState 的区别
19：为什么setState 的参数是一个 callback 而不是一个值
20：在 React 当中 Element 和 Component 有何区别？
22：createElement 和 cloneElement 有什么区别？
rem 全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em (1)子元素字体大小的em是相对于父元素字体大小; (2)元素的width/height/padding/margin用em的话是相对于该元素的font-size
盒模型的组成，由里向外content,padding,border,margin.
w3c标准合模型 ： width:content
IE盒模型：width: content + padding + border
box-sizing的使用 (box-sizing的默认属性是content-box)
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型::after / <br> / clear: bothBFC(overflow:hidden)BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件:
position: absolute/fixeddisplay: inline-block / tablefloat 元素ovevflow !== visible规则:
BFC 的两个相邻 Box 垂直排列BFC 的两个相邻 Box 的 margin 会发生重叠BFC 的区域不会与 float 的元素区域重叠BFC 的高度时，浮动子元素也参与计算首先解释一下栈（stack） 和 堆（heap）
heap：是由malloc之类函数分配的空间所在地。地址是由低向高增长的。 动态分配的内存，大小也不一定会自动释放
stack：是自动分配变量，以及函数调用的时候所使用的一些空间。地址是由高向低减少的。为自动分配的内存空间，它由系统自动释放
基本(原始)数据类型：String， Null，Undefined，Number，Boole
引用数据类型：Object
区别：基础数据类型是值引用， 地址数据类型是地址引用
原始类型（基本类型）(存放在栈中)：按值访问，可以操作保存在变量中实际的值。原始类型汇总中null和undefined比较特殊
引用类型(存放在堆内存中的对象，每个空间大小不一样，要根据情况进行特定的配置)：按地址访问，在操作对象时，实际上是在操作对象的引用而不是实际的对象。
扩展：引用类型是存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址），这个指针指向堆内存。引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个 引用地址可以快速查找到保存中堆内存中的对象
总结基本数据类型和引用数据类型区别
1、声明变量时内存分配不同
*原始类型：在栈中，因为占据空间是固定的，可以将他们存在较小的内存中-栈中，这样便于迅速查询变量的值
*引用类型：存在堆中，栈中存储的变量，只是用来查找堆中的引用地址。
这是因为：引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响
2、不同的内存分配带来不同的访问机制
在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问。
而原始类型的值则是可以直接访问到的。
3、复制变量时的不同、
1）原始值：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。
2）引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。（这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。多了一个指针
4、参数传递的不同（把实参复制给形参的过程）
首先我们应该明确一点：ECMAScript中所有函数的参数都是按值来传递的。
但是为什么涉及到原始类型与引用类型的值时仍然有区别呢？还不就是因为内存分配时的差别。
1）原始值：只是把变量里的值传递给参数，之后参数和这个变量互不影响。
2）引用值：对象变量它里面的值是这个对象在堆内存中的内存地址，这一点你要时刻铭记在心！因此它传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部的原因了，因为它们都指向同一个对象。
（闭包是将函数内部和函数外部连接起来的桥梁。 说白了就是一个环境，能够读取其他函数内部的变量。）
优点：一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
缺点：
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
原型：其实原型就只是个普通对象，里面存放着所有实例对象需要共享的属性和方法！所以，我们把需要共享的放到原型对象里，把那些不需要共享的属性和方法存在在构造函数里！
function Person(name,age){
this.name = name;
}
Person.prototype.sex = 'female';
var person1 = new Person("Summer");
var person2 = new Person("Lily");
console.log(person1.sex) // female
console.log(person2.sex) // female
Person.prototype.sex = 'male';
console.log(person1.sex) // male
console.log(person2.sex) // male修改prototype属性会影响它的所有实例的sex的值！！
实例对象的属性和方法一般分为两种：一种是自身的，一种是引用自prototype的。
原型链： 是由子对象对父对象进行多次原型继承形成的链式关系。当调用子对象的某个属性或方法时，javascript会向上遍历原型链，直到找到为止，没有返回undefined。但是注意： 属性在查找的时候是先查找自身的属性，如果没有再查找原型，再没有，再往上走，一直插到Object的原型上。
1： prototype是函数的原型对象，即prototype是一个对象，它会被对应的__proto__引用。
2： 要知道自己的__proto__引用了哪个prototype，只需要看看是哪个构造函数构造了你，那你的__proto__就是那个构造函数的prototype。
3： 所有的构造函数的原型链最后都会引用Object构造函数的原型，即可以理解Object构造函数的原型是所有原型链的最底层，即Object.prototype.__proto===null
事实上，js里完全依靠"原型链"(prototype chain)模式来实现继承。
proto：事实上就是原型链指针！！
prototype：上面说到这个是指向原型对象的
constructor：每一个原型对象都包含一个指向构造函数的指针，就是constructor
下面来详解原型与原型链
对象有__proto__属性，函数有prototype属性；
对象由函数生成;
生成对象时，对象的__proto__属性指向函数的prototype属性。
在没有手动修改__proto__属性的指向时，以上三条便是JavaScript默认原型链指向逻辑
var obj = {};
console.log(obj.prototype); //undefined
console.log(obj.__proto__); //Object {}
var obj2 = function(){}
console.log(obj2.prototype); //obj2 {}
console.log(obj2.__proto__); //function() {}
大致总结一下就是：
1、Object是作为众多new出来的实例的基类 function Object(){ [ native code ] }
2、Function是作为众多function出来的函数的基类 function Function(){ [ native code ] }
3、构造函数的proto(包括Function.prototype和Object.prototype)都指向Function.prototype
4、原型对象的proto都指向Object.prototype
5、Object.prototype.proto指向null
1： 压缩图片
压缩图片的方法：
a、雪碧图
即css sprites， 就是把很多小图片制作成一个大图，然后作为背景图片使用，定位即可。
优点： 很明显： 减少了大量的http请求。
缺点： 背景定位较为麻烦，其实不算缺点。
b、图片压缩
图片压缩是很简单的，就是无损压缩了。优先使用png而不是GIF,压缩png，去掉jpg的metadata,压缩gif动画，尝试使用 png8,避免使用AlphaImageLoader，压缩动态生成的图像，使 favicon 更小，可缓存、使用css sprites
c、base64
base64编码的大小比原图大小更大一些，但是可以减少http请求。
d、响应式图片
一般我们对于图片的设定方法都是设置图片为width: 100%， 但是如果加载的图片的实际尺寸很大，而我们所需要的很小，那么不可避免的就会造成浪费， 所以这时就可以使用响应式图片。 主要用到的属性就是 srcset 和 sizes 属性。
e、延迟加载
假设我的网页很长很长，图片很多很多（比如多图慎点那种），但是我可能看了一下就没兴趣了，那是不是完全没有必要加载后面的图片了，这个时候就要有一个延迟加载的思想。
图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片（非可视区域图片使用1*1的图片占位，图片大小css控制），当页面滚动的时候，图片进入了可视区域再进行加载（修改src），这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。具体的实现方法可以看一个插件，就叫lazeload。
f、 图标字体
用过bootstrap的同学肯定对方便的fontawesome图标字体印象深刻，可以无损放大缩小，可以修改颜色，只要加个类名就可以使用图标，感觉是不是很爽
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
