a7650 / my-blog Goto Github PK
View Code? Open in Web Editor NEW记录总结问题
记录总结问题
浏览器渲染的前提是生成渲染树,而且html和css解析完之后生成dom和cssom(两者同时解析),然后这两者合在一起生成render tree,生成render tree的时机是在DOMContentLoaded触发之后。
js会阻止dom的解析,dom和css都解析完才会渲染,所以js阻止渲染,所以js应该放在页面底部,加快生成render tree。
css也会阻止js的解析,因为js会等待其前面的css下载执行后才会执行,所以css放在js前会阻止js的解析,js的解析又阻止dom解析,进而又阻止页面渲染。所以如果js和css都放在头部的话,js应放在css前面。
浏览器在遇到script标签时,会触发页面渲染。
vue中的以下划线_和美元符号$开头的属性不会进行响应式绑定。
路由守卫的解析流程如下
1.导航被触发
2.在失活组件里调用beforeRouteLeave(在组件里声明)
3.调用全局的beforeEach(在main里声明:router.beforeEach)
4.如果组件是重用的,调用brforeRouteUpdate。(此时只会触发全局的三个守卫)
5.在路由配置里调用beforeEnter
6.异步解析路由(前面几个均是按顺序执行,之后的是异步执行)
7.在被激活的组件里调用beforeRouteEnter(在组件里定义,此时不能访问this,因为还没实例创建,可以在该函数的next里传入一个回调,该回调参数就是this实例,会在实例创建完成后触发,也是唯一一个可以在next中传入以组件实例为参数的守卫)
8.调用全局的beforeResolve
9.导航被确认
10.调用全局afterEach(路由守卫里只有该函数不用next)
11.触发dom更新
12.执行beforeRouteEnter中的next中传入的回调函数。
JS总共有7种类型,分别是string,number,null,undefined,boolean,symbol以及object,除了最后一个object是复杂类型其余全是基本类型。
判断类型的函数主要有:typeof ,instanceof,constructor,Object.prototype.toString.call(),Array.isarray()
typeof返回的值可能是 string,number,undefined,boolean,symbol,以及object和function,且均是字符串
null,array,date等均返回object
,所以用typeof来检测一个数据是否为对象类型不是很精确。
另 typeof Number(1) === 'number'; typeof new Number(1) === 'object';因为使用new的时候会返回一个对象
instanceof用来判断某一个对象是否是一个构造函数的实例,或者在该对象的原型链上是否存在一个构造函数,用法 object instanceof constructor
,该方法一般用来判断对象,如果直接传入数字,字符串等会返回false,但是用基本包装类型可以判断,如 var a = new Number(1)
这里的a就是构造函数Number的实例,可以用instanceof判断。
另外,虽然用typeof null 返回的是对象,但是如果null instanceof Object
的话,返回的是false,
这是因为虽然null是对象(这是js的一个bug,null是一个类型,所以它应该是null类型),但是null却不是Object的实例,原型链最上面是Object.prototype,所有的object类型都继承这里的原型方法,但是Object.prototype的上面是null,null才是原型链的最顶层,即Object.prototype.__proto__===null
。
undefined instanceof Undefined 和 null instanceof Null
也都会返回false,因为Undefined 和Null都不是构造函数。
constructor存在于一个对象的原型中,
该方法用来检测object比较准确,用Object原型的toString方法而不用具体实例的方法(如“str”.toString())是因为object所有类型(以上七种),(Array,Function,Date等均为Object的下层类型)以及基本包装类型(Number,String,Boolean),均重写了适应本数据类型的toString方法。
该方法判断任何内置类型均会返回正常的值,但是自定义类型不能判断出来,还是[object Object]
该方法判断原生JSON对象也会返回正确的。
*判断一个数据是否为null可以①直接x===null,② Object.prototype.toString.call
各种继承,优缺点
父子组件之间如何协作
父组件如何监听子组件的事件
父组件的监听的方法保存在父组件还是子组件
子组件为什么可以触发事件
Promise的状态只能改变一次,即resolve之后就不能再执行reject,reject起不到任何作用。
then里面的函数是顺序执行的,then中的函数需要return val
来给下一个then传入值。then中return的还是一个promise,即一个新的promise,当return的是值的时候,会使用Promise.resolve(val)封装后传入下一个then。也可以在return Promise.resolve(val)
/return Promise.reject(val)
,这样下一个then会根据状态来执行相应的函数。
如果想要在then里面执行另外的异步函数,即多个异步函数按照顺序执行,需要 return new Promise( fn(...) )
router.push(location, onComplete?, onAbort?)
可提供可选的第2、3个回调函数,分别在导航完成后或者终止后调用。
如果使用动态路由,只有参数发生了变化,则该路由的模块会被复用,意味着声明周期的钩子函数不会被触发,可以通过watch $route
或者使用beforeRouteUpdate
。
[路由里可以使用正则匹配,链接,如果一个路由可以被多个route匹配到,则遵循先定义的优先级最高,因此可以在路由的最后加上一个通配符*匹配的404页面。
router.go(n)
是将路由前进或后退n步。类似于window.history.go(n)
Vue命名视图
对跳转路由使用导航守卫不会有任何效果,导航守卫仅仅是应用在其目标上。router还可以添加别名{ path: '/a', component: A, alias: '/b' }
意思是用户访问b时,url保持为b,但是路由匹配为a。
路由组件传参。
导航守卫,router.beforeEach((to, from, next) => {// ...})
, 链接
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
路由元信息
链接
router导入模块的时候使用 ()=>import(' ... ')
需要先安装插件compression-webpack-plugin,之后在plugins里面加入 如下配置
new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240 // deleteOriginAssets:false })
同时还要服务器进行配置,nginx里面开启 gzip on
同时可以在请求头/响应头查看Accept-Encoding/content-encoding.
对于某些体积比较大的包,通过cdn引入可以有效减少文件体积,
https://cdn.bootcss.com 上找到对应的cdn地址,然后在index.html里引入,在配置里面configureWebpack加入新的选项,
externals: { "echarts": "echarts", "crypto": "CryptoJS" }
在使用的时候无需import,直接使用即可。
参考 https://www.jianshu.com/p/bce0e4376dd9
安装插件 cnpm install webpack-bundle-analyzer -D,然后package.json里面添加命令
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
然后配置里面加入新插件
new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: 8888, reportFilename: "report.html", defaultSizes: "parsed", openAnalyzer: false, generateStatsFile: false, statsFilename: "stats.json", statsOptions: null, logLevel: "info" })
运行npm run analyz,或者直接build 访问8888即可查看分析图。
http://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/
https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c0678636fb9a049b347c0aa
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.