flex-direction//决定主轴的方向(即项目的排列方向)。flex-wrap//如果一条轴线排不下,如何换行。flex-flow//是flex-direction属性和flex-wrap属性的简写形式,默认值为rownowrap。justify-content//定义了项目在主轴上的对齐方式。align-items//属性定义项目在交叉轴上如何对齐。align-content//属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。元素属性
order//属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。flex-grow//属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink//属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小flex-basis//属性定义了在分配多余空间之前,项目占据的主轴空间(mainsize)flex//flex-grow,flex-shrink和flex-basis的简写,默认值为01autoalign-self//align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。6.nodeType二、JavaScript1.原型与继承原型:prototype函数的对象属性,包含一个constructor属性,指向函数自身:Fun.prototype.constructor===Fun。
原型链由原型对象构成,是js对象继承的机制。每个对像都有[[prototype]]属性,主流浏览器以__proto__暴露给用户。__proto__指向对象的构造函数的原型属性(prototype)。prototype的__proto__又指向它prototype对象(注意,这个prototype是一个对象结构)的构造函数的原型;通过__proto__属性,形成一个引用链。在访问对象的属性时,如果对象本身不存在,就会沿着这条[[prototype]]链式结构一层层的访问。
可以通过new来新建一个对象的函数。
函数拥有原型(prototype);而对象可以通过原型链关系([[prototype]])实现继承。函数是一种特殊对象,也拥有__proto__,即函数也会继承。函数的原型链是:函数静态方法—>原生函数类型的原型(拥有函数原生方法)—>原生对象原型(拥有对象原生方法)—>nullclassA{};classBextendsA{};
B.__proto__=A.prototype;B.prototype.__proto__=A.prototype;
类型:标记引用(无法解决循环引用问题);标记清除(现在主流回收算法)。标记清除算法的核型概念是:从根部(在JS中就是全局对象)出发定时扫描内存中的对象。凡是能从根部到达的对象,都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收。
对于不再用到的内存,没有及时释放,就叫做内存泄漏(memoryleak)。常见内存泄漏:
事件循环是指:执行一个宏任务,然后执行清空微任务列表,循环再执行宏任务,再清微任务列表。
异步任务分为宏任务(macrotask)与微任务(microtask),不同的API注册的任务会依次进入自身对应的队列中,然后等待EventLoop将它们依次压入执行栈中执行。
-微任务microtask(jobs):promise/ajax/Object.observe(该方法已废弃)-宏任务macrotask(task):setTimout/script/IO/UIRendering
每次事件循环:
requestAnimationFrame(cb)与setTimeout(cb,0)同时注册时,可能在setTimeout之前执行,也可能在它之后执行。因为只有在一轮浏览器渲染结束时才回去调用raf。
执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境斗鱼一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。全局执行环境是最外围的执行环境,在web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法被创建的。某个执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁。(全局执行环境直到应用程序推出时才会被销毁)。
当代码在一个环境中执行时,会创建变量对象的一个作用域链,保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象,其在最开始的时候只包含一个变量:arguments。作用域链的下一个变量来自包含环境,而再下一个变量对象则来自下一个包含环境一直延续到全局执行环境。作用域链在创建的时候就会被生成,保存在内部的[[scope]]属性当中。其本质是一个指向变量对象的指针列表,它指引用但不实际包含变量对象。
函数创建过程中,会创建一个预先包含外部活动对象的作用域链,并始终包含全局环境的变量对象。这个作用域链被保存在内部的[[scope]]属性中,当函数执行时,会通过复制该属性中的对象构建起执行环境的作用域链。
执行上下文是指当前Javascript代码被解析和执行时所在环境的抽象概念,JavaScript任何代码的运行都是在执行上下文中。
执行上下文分为两个过程:
主要做了三件事
变量赋值,语句执行等。
闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。可以通过[[scope]]属性查看。因此,即使外部函数被销毁,但是由于外部环境中定义的变量在闭包的scope中还保持着引用,所以这些变量暂时不会被垃圾回收机制回收,因此依然可以在闭包函数中正常访问。注意:同一个函数内部的闭包函数共享同一个外部闭包环境。从下图可以看出,即使返回的闭包里面没有引用c,d变量,但是由于内部函数closure1中引用链,所以即使closure1未调用,闭包作用域中依然保存这些变量的引用。
拷贝一层,内部如果是对象,则只是单纯的复制指针地址。
比如let[a,b,c]=[1,2,3];let{foo}={foo:'bar'};
lets=Symbol();typeofs//"symbol"Symbol.for(),Symbol.keyFor()Set,MapSet结构类似数组,成员唯一。
consts=newSet();[2,3,5,4,5,2,2].forEach(x=>s.add(x));for(letiofs){console.log(i);}//2354操作方法:
WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。首先,WeakSet的成员只能是对象,而不能是其他类型的值。
constws=newWeakSet();ws.add(1)//TypeError:Invalidvalueusedinweaksetws.add(Symbol())//TypeError:invalidvalueusedinweakset其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。
类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。
constm=newMap();consto={p:'HelloWorld'};m.set(o,'content')m.get(o)//"content"m.has(o)//truem.delete(o)//truem.has(o)//falseWeakMapWeakMap与Map的区别有两点。
首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。
其次,WeakMap的键名所指向的对象,不计入垃圾回收机制。
Proxy可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写ES6原生提供Proxy构造函数,用来生成Proxy实例。
varproxy=newProxy(target,handler);Promise实现一个简单的Promise
抓住两点即可:假设A为父类,B为子类那么
B.__proto__=A;//子类的__proto__属性,表示构造函数的继承,总是指向父类。B.prototype.__proto__=A.prototype;//子类prototype属性的__proto__属性,表示方法(实例)的继承,总是指向父类的prototype属性。Modulees6模块与CommonJS模块的差异8.函数柯里化在一个函数中,首先填充几个参数,然后再返回一个新的函数的技术,称为函数的柯里化。通常可用于在不侵入函数的前提下,为函数预置通用参数,供多次重复调用。
constadd=functionadd(x){returnfunction(y){returnx+y}}constadd1=add(1)add1(2)===3add1(20)===219.正则表达式匹配模式匹配位置锚字符:^//匹配开头$//匹配结尾\b//匹配单词边界\B//匹配非单词边界(=p)//正向先行断言其中p是一个子模式,即p前面的位置。(!p)//负向先行断言其中p是一个子模式,即不是p的前面的位置实例分析:数字的千位分隔符表示法:比如把"12345678",变成"12,345,678"。constreg=/\B(=(\d{3})+\b)/g这个正则的意思是匹配1到多组3个相连的数字前面的位置|123//123前面的|代表这个位置且这些数字的右侧是单词的边界,比如123|`123|.456,左侧是非单词边界,即数字前还是单词比如9|123`。
浏览器下载html文件并进行编译,转化成类似下面的结构
如果script标签设置了async或者defer标签,下载过程不会阻塞文档解析。defer执行将会放到html解析完成之后,dcl事件之前。async则是下载完就执行,并且阻塞解析。
DOM构建的意思是,将文档中的所有DOM元素构建成一个树型结构。
将文档中的所有css资源合并。生成cssruletree
将DOM树和CSS合并成一棵渲染树,render树在合适的时机会被渲染到页面中。(比如遇到script时,该script还没有下载到本地时)。
如下图:
由于html页面通过相应的标签从不同的域名下加载静态资源文件是被浏览器允许的,所以可以通过动态创建script标签的方式,来实现跨域通信,缺点是只支持get请求
正向代理(forward)是一个位于客户端【用户A】和原始服务器(originserver)【服务器B】之间的服务器【代理服务器Z】,为了从原始服务器取得内容,用户A向代理服务器Z发送一个请求并指定目标(服务器B),然后代理服务器Z向服务器B转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。
对于客户端而言代理服务器就像是原始服务器,并且客户端不需要进行任何特别的设置。客户端向反向代理的命名空间(name-space)中的内容发送普通请求,接着反向代理将判断向何处(原始服务器)转交请求,并将获得的内容返回给客户端。
Nginx是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP代理服务器。
当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。
当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此损耗较少。
从以上图中对比可以看出,重绘的过程比回流要少做一步操作,即layout
vm.$nextTick([callback])
附上源代码,不感兴趣可以直接跳过代码,没关系。
由于数据修改是同步的操作,而视图更新是异步的,所以我们两次打印data.nextTickText都是修改后的值,而视图更新是异步的,由于第一个nexttick回调在视图更新回调函数fulshSchedulerQueue之前添加,所以此时读取到的是视图更新之前的值。我们通过断电跟踪也可以看出此轮事件回调里面保存的三个函数最终会分别执行printNextTick、flushSchedulerQueue、printNextTick
以前面试的时候,别人问我nextTick的原理,我答完之后,别人接着问我那v-on呢?我当时一脸懵逼,v-on不就是事件绑定吗?你想表达什么?(黑人问号脸.png)