前端开发技术点笔记

目录

Html相关

Css相关

JavaScript相关

ReactJs相关

VueJs相关

webpack相关

Koa相关

Nodejs相关

Web相关

网络协议相关

浏览器相关

 

---

Html相关

• 什么是文档流？

文档流（Normal Flow）：也叫做普通流，就是html元素默认在页面中的排版布局，是相对于盒子模型来说的，比如div从上到下，span和p从左到右排列。

脱离文档流：就是将元素从排版布局中脱离出来，脱离文档流的方式：position中的absolute和fixed，还有float属性。

文本流：是指html中文本的显示，是相对于文字段落来说的，如果设置了绝对定位，元素即会脱离文本流也会脱离文档流。

• 什么是dom什么是bom？

DOM：Document Object Model是文档对象模型，dom是W3c的标准，DOM也定义了访问html和xml的标准，它允许脚本动态对文档进行操作。

BOM：Browser Object Model是浏览器对象模型，暂时还没有相关的标准，但是现当代的浏览器都已经实现了获取和设置浏览器的一系列的操作，比如获取浏览器屏幕分辨率，弹出框，打开关闭浏览器窗口。

• 什么是web worker和websocket

web worker:是html5的一个新特性，让web应用程序可以具备多线程的处理能力，可以运行在后台的javascript，而不会影响页面其他正常处理和显示，可以将复杂需要时间的处理用web worker来处理。web work中不能操作dom元素。它的应用场景是，可以把一些阻塞页面渲染的一些js计算放到web worker中去做。

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。 
4.可以使用 worker.terminate() 来终止一个worker的执行。

web worker能做：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

缺点：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

 websocket：websoket是html5的一种新的网络协议，也是基于tcp的协议，它是持久的，可以持续在客户端和服务器端保持双工链接，服务器的更新可以被及时推送给客户端，不需要客户端再设置定时查询。

 

Css相关

• 什么是css盒子模型？

在网页中，一个元素的空间构成主要包括内容（content），边框（border），内边距（padding），外边距（margin）这些构成，这些就像实际中的盒子一样，所以叫做css的盒子模型。

• bfc是什么？

BFC（Block Formatting Context）是块格式化上下文，简单来说就是一个独立的渲染区域，在bfc内部的元素不会影响到外面的元素，因为他们隔离互不影响的。

示例场景：比如两个div，同时设置margin:100px;这时候上下两个div的距离不是200px，而是100px，两个的外边距会重叠，这时候就需要用bfc来解决，分别用一个有bfc的div包裹着，这个bfc的div可以设置成overflow:hidden;来触发bfc即可。

触发条件：

1.根元素 float属性不为none 

2.position为absolute或fixed。

3.display为inline-block, table-cell, table-caption, flex, inline-flex。

4.overflow为hidden。

• css的选择器有哪些呢？

有id，类选择器，标签选择器，伪类选择器，属性选择器等等，具体参考： https://www.cnblogs.com/AllenChou/p/4684753.html 

• css的优先级？

!import  > 内联样式 > ID选择器 > 伪类选择器 > 属性选择器 > 类选择器 > 元素(类型)选择 > 通用选择器(*)

• 什么叫优雅降级和渐进增强？

其实就是向上兼容和向下兼容浏览器，优雅降级就是向下兼容，渐进增强就是向上兼容

• sass和less的区别？

1.定义变量的符号不同，less是用@，sass使用$
2.变量的作用域不同，less可以作用在全局和所处的代码块中，而sass只作用于全局。
3.编译环境不同，less是基于javascript，在客户端环境处理，sass是基于ruby的，在服务器环境端处理。

• px，em，rem的区别？

px：实际就是像素，px是是相对于显示器分辨率的

em：是相对父元素计算字体大小，如果父元素没有设置大小，会以body的字体大小或者浏览器默认大小来计算。

rem：称为root em，也就是说是以根节点来计算，它是以根的字体大小来计算，不会依赖父元素，整个页面的字体大小设置好后都不会乱了。想多个端兼容，最好是使用rem。

• 移动端怎么实现响应性布局？

1.在head标签中加一根meta标签，

2.使用媒体查询，即 @media 查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，通过控制screen的min-width和max-width。

3.使用rem来代替px，rem会根据html节点的字体大小来计算。而em呢是根据父元素节点大小，所以相对于还是rem更适合方便一些。

• link和@import的区别

两者都是外部引用css样式的方式。

1.link是HTML提供的标签，不仅可以加载CSS文件，还可以定义rel连接属性等；@import是CSS提供的语法规则，只有导入样式表的作用；
2.link引用CSS时，在页面载入时可以同时加载；@import需要页面网页完全载入以后加载。
3.link支持使用js动态的去添加删除标签；而@import不支持。

• css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height 
水平方向：letter-spacing

• css中怎么解决inline-block的空白间隙？

1.设置父元素的font-size为0，然后设置子元素的font-size。

2.父元素设置letter-spacing为负值，子元素设置letter-spacing:0px;即可。

3.子元素用margin-left来调整。

4.子元素用float:left;来布局。

• css中垂直居中的方法

1.设置固定的高度，设置line-height。

2.设置父元素position:relative;子元素设置为position:absolute;top:50%;transform:translateY(-50%);意思通过设置translateY为-50%，就是自身的偏移量往上一半。

3.父元素设置postion:relative;子元素设置positon:absolute;top:0;bottom:0;margin:auto;

4.使用flex布局。display:flex;align-items:center;如果想水平居中，用justify-content: center;

5.父元素使用display:table;子元素使用display:table-cell;vertical-align:middle;

• 用css隐藏元素的几种方法

1.display:none;

2.visibilit:hidden;

3.opacity:0;

4.position:absolute;top:-999px;left:-999px;

5.transform: translateX(-500%);

• css英文首字母大写

比如：hello it's ok，使用text-transform:capitalize; 输出：Hello It's Ok

 

JavaScript相关

• js数据类型都有哪些？

       原始数据类型：Number，String，Boolean，Undefined，Null，Symbol

       引用数据类型：Object，Array，Function，RegExp

• typeof的返回值都有哪些呢？

        有：undefined，object，boolen，string，number，function，ES6新增了symbol

• js变量命名规则？

1.常用骆驼命名法，首字母小写。

2.以字母，下划线，$符号开头，不能以中文，空格，特殊标点符号，数字开头。

3.变量命名尽量简洁和意思明了，不能过长。

4.不能使用js里面的关键字命名。

• typeof 和 instanceof 的区别？

1.typeof可以判断一个变量是否为空，可以判断变量是属于哪个数据类型，比如返回undefined，string这些。注意的是对于 Array,Null 等特殊对象使用 typeof 一律返回 object。

2.instanceof是判断一个变量是否属于某个对象的实例

• 什么是闭包？

闭包是一个能够读取其他函数内部变量的函数。

优点：1.变量在内存中，可以提高性能。2.避免全局变量的污染。3.可以保护私有成员变量。

缺点：1.因为变量可以一直在内存中，所以内存消耗大。2.可能会导致不会被垃圾回收。

• js中作用域有哪些？

1.全局作用域：声明在函数外部的变量，在代码中任何地方都能访问的到（没有用var声明的变量属于全局变量哦）

2.函数作用域：函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用。

3.块级作用域：是es6有的一个概念，通过一对{}花括号定义的代码块，在这里定义的所有变量在代码块外面都是不可见的，这个就叫块级作用域。使用let和const定义的变量，只会在这一范围内起作用，也不会存在变量提升。

• 什么是暂时性死区？

let和const是块级作用域，声明的变量不会存在变量提升，在未声明之前就使用变量就会报错，所以在代码块内，使用let和const声明变量，先使用后使用是不行的，这在语法上称为‘暂时性死区‘，简称TDZ。

• Array对象的属性有哪些？

constructor：返回对创建此对象的数组函数的引用。

length：设置或返回数组中元素的数目。

prototype ：使您有能力向对象添加属性和方法。

• Array对象方法有哪些？

concat() 连接两个或更多的数组，并返回结果。

pop() 删除并返回数组的最后一个元素。  

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

shift() 删除并返回数组的第一个元素

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

slice() 通过下标截取数组

splice() 删除数组元素，并向数组添加新元素。

fill()将一个搞定的值填充一个数组中从开始位置到起始位置的所有元素

keys() 返回一个可以迭代的对象

sort() 对数组的元素进行排序

from()将一个类似数组或可迭代对象转换成一个数组

some()遍历时候，只要有一项满足，就返回true

every()遍历时候，全部都满足，才返回true

forEach()遍历数组

map()对数组中的每个元素进行处理，得到一个新的数组

filter()返回满足条件的数组元素

includes()判断数组中是否包含某一个值，会返回true和false

indexOf()判断数组中包含某一个值 ，存在则返回下标，不存在就返回-1

join()将数组中内容按照某个字符串分割，并返回分割后的字符串。

isArray()判断传递的对象是否是一个数组类型

toString()把数组转化为字符串

• 对象和类的区别？

类是对象的抽象，对象是类的实例，对象是实际存在的，有对应的行为和属性。

• 记忆一些es6的特性

1.块级作用域的let，const。

2.变量解构赋值。如let [a,b]=[1,2]，输出是a=1, b=2

3.字符串的扩展，比如新增includes(),startsWith(),endsWith(),padStart(),padEnd(),matchAll(),字符串模版等。

4.函数的扩展，箭头语法，双冒号运算符，可以像bind一样将冒号前面的对象绑定到冒号右边，比如 foo:bar 相当于 bar.bind(foo)

数组和对象的扩展，新增了扩展运算符(...)，用来合并数组和对象，不过这种是浅拷贝，数字也新增了from(),fill(),includes()等方5.法，对象也新增了Object.is(),Object.assign()浅拷贝的哦，Object.keys(),Object.values()等。

6.新增了Symbol原始数据类型。

7.新增了Set和Map，WeakSet，WeakMap，set里面的值是不会重复的，WeakMap和map区别是，WeakMap只能接受对象和null作为key。

8.新增了Promise对象，用来处理异步操作，可以通过then链式调用，来控制异步代码执行顺序。

9.新增了Generator和Async和await来处理异步，和Promise一样的作用，async返回的其实就是一个Promise对象。

10.新增了Class的语法，可以用extends来实现继承。

11.es6的import，export语法来实现模块化，其实和commonJS的module是一样作用的。

• es6中set和map区别？

set是没有元素可以重复的，map是键值对可以允许重复

• this指向问题？

普通函数：只要是普通函数，即使是在箭头函数里面的普通函数，也是指向的window，严格模式下是undefined。

实例化对象或者字面量对象：这种是该对象调用了，this就指向这个对象，如果对象里面的一个普通函数调用了，还是指向的window，如果是箭头函数调用了，就指向当前的这个对象。

箭头函数：根据所在的环境，在哪个环境就指向谁。

• 什么是函数柯里化？

柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数的函数，并返回一个函数接受剩下的参数。这中间可嵌套多层这样的接受部分参数的函数，直至返回最后结果。

例如：

function add(a){
    return function(b){
        return function(c){
            return a+b+c;
        }
    }
}
console.log(add(1)(2)(3));
输出结果：6

• call和apply的区别？

1.apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, argsArray); 即A对象调用B对象的方法。
2.call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2); 即A对象调用B对象的方法。
3.参数不同，call可以接受多个参数，apply职能接受的一个数组参数。
4.call和apply可以重新修改this的指向。

• 怎么让一个构造函数的实例 instanceof 它为false？

主要是直接修改对象的prototype就可以了，就不是同一个实例了，比如下面：

 function Cat(){
            this.name='cat'
        }
        var cat = new Cat();
        Cat.prototype ={
            say:function(){
               console.log('a cat')
           }
       }
       console.log(cat instanceof Cat) // 这里输出false

• 什么是构造函数？

构造函数也是普通的函数，只不过会通过new来调用并创建一个新的示例，这个函数就叫做构造函数。

• 什么是原型和原型链？

原型：就是函数创建的时候都有一个prototype属性，这个就叫原型，也称为显示原型。我们用构造函数创建的对象会有prototype上面所有绑定的方法。

原型链：当我们用obj.xxx访问一个对象的属性时，会先在对象自身属性中查找，找到就返回。如果没有找到，再沿着__proto__这条链向上找，找到返回。如果找到原型链的顶层Object.prototype还没有，就返回null，也就是 Object.prototype.__proto__ === null。

• prototype 和  __proto__  的区别？

①prototype（原型）是构造函数才有的属性，可以叫做显示原型，它实例化的对象包含prototype上所有共享的方法。（当构造函数new实例化一个对象时候，它实例化对象的__proto__指向了它构造函数的prototype）；

②__proto__ 是对象（不论是普通对象还是构造函数实例化的对象）才有的属性，可以叫做隐式原型，用于指向创建它的构造函数的原型对象。（对象的__proto__会指向它构造函数的prototype）；

function foo(){}
var f = new foo();
// 该实例化的对象的__proto__指向了其的构造函数prototype
console.log(f.__proto__ === foo.prototype) // 输出：true

var obj = {}
// __proto__指向构造函数的prototype
console.log(obj.__proto__ === obj.constructor.prototype) // 输出：true

• 怎么用js给元素添加class？

// 为 
 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
// 为 
 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
// 为 
 元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");
// 为 
 元素移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

// 为 
 设置属性
document.getElementById("myDIV").setAttribute("title","this is a title");

• js哪些情况会造成内存泄漏？

1.大量声明使用全局变量。2.闭包引起的内存泄漏。3.dom清空或者删除时候，绑定的事件未清除。4.定时器未被清除。5.子元素存在引用。

• js中垃圾回收的策略？

标记清除：

　　当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。然后圾回收器会过滤掉环境中的变量以及被环境中的变量引用的变量，剩下的就是被视为准备回收的变量。

引用计数：

机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，
当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

• js中undefined和null区别？

这两个的值是不相等的，即undefined === null 是 false。undefined表示变量定义了未赋值，null表示变量的引用是空的。

注意(null == undefined)为true，是成立的，因为在ecmascript规范中，null和undefined的行为很相似，都表示一个无效的值，所以它们是相等的。

• commonjs，amd，cmd的区别？

CommonJS, AMD, CMD都是JS模块化的规范。

1.CommonJs 是服务器端模块的规范，Node.js采用了这个规范。 根据CommonJS规范，一个单独的文件就是一个模块，加载模块使用require方法，CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。

2.AMD（Asynchronous Module Definition） 是 RequireJS （这里可以简记amd和requirejs是AR眼镜）在推广过程中模块定义的规范 ，AMD异步加载模块，AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 。

3.CMD（Common Module Definition）是SeaJS （这里可以简记cmd和seajs是打游戏的CS）在推广过程中模块定义的规范。CMD推崇就近依赖，只有在用到某个模块的时候再去require模块 。

• js中事件相关的知识点

1.什么是事件流？

也就是事件处理的流程，是有先后执行顺序的，标准的事件流它分为3个阶段：①事件捕获 ②事件目标 ③事件冒泡

2.什么是事件模型？

就是事件的一个标准模型，分为3个模型。分别是：

①原始事件模型（DOM0）

在原始事件模型中，事件发生后没有传播的概念，也没有事件流的产生，事件发生后就马上处理然后结束，比如：

document.getElementById("btn").onClick=function(){alert('hello')}

②IE事件模型

这个是在ie系列浏览器里支持的，ie中的事件流不是标准的，它只有事件目标和事件冒泡，没有事件捕获，ie中创建事件是用attachEvent('onclick',function(){});移除用detachEvent('onclick',function(){}):   注意的是ie中组织事件冒泡的方法是获得event对象，这个event对象是用的全局变量window.event获得的，而且函数执行完毕，这个event就是null了。

③DOM2事件模型

这个模型是W3C指定的标准模型，我们现在用的浏览器都是按照这个标准，在W3C指定的事件模型中，一次事件的发生包含3个过程：

* 事件捕获（事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节 
          点是否注册了该事件的监听函数，若有则执行。）

* 事件处理阶段（事件到达目标元素，执行目标元素的事件处理函数）

* 事件冒泡阶段（事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册 
了该事件的监听函数，有则执行。）

添加事件：document.getElementById('div').addEventListener('click',function(){},false)
addEventListener第三个参数是false就是事件冒泡，是true就是事件捕获。

删除：removeEveentListener('click')

• 什么是事件委托？

说到事件委托，其实和事件代理是一个意思，都是表示有一个第三方去做某件事情。

委托就是把事件监听函数绑定到父元素上，让它的父辈来完成事件的监听，这样就把事情“委托 
”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后 
再对其进行相关处理。

举个例子，比如我们去饭店吃饭，小明说想吃蛋炒饭，小花说想吃牛肉面，小明和小花不可能直接告诉厨师吃什么，人多的话厨师记不清，这时候服务员出来了，服务员记录下来小明和小花想吃的饭，然后报给厨师，做好后，服务员根据做好的饭和订单上对应（event.target判断），依次给小明和小花， 这个服务员就是个委托，也是代理。

• 同源策略是什么，还有跨域是什么？

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com是读取不了b.com下面的资源。

不受同源策略限制的有：
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的，如嵌入到页面中的，，，