摘要:截图 黄色指的是js执行 紫色指的浏览器渲染 一般只需要看 js 和 render 这2个就行,其他不用看,并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程,主要负责浏览器的渲染和js代码执行,由此可见,浏览器用于渲染和js执行是一个线程,也就是主线程
阅读全文
随笔分类 - 前端
1
js
摘要:概述 重绘指的是元素重新绘制,一般性能消耗很小,不用在意,一般修改颜色或者虚拟隐藏都是重绘 回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流,性能消耗较大。 重绘(repaint):元素样式改变不影响布局 回流(reflow):也叫重排,当元素的尺寸、结构变化或触发某些属性时,浏览器会重
阅读全文
摘要:总论 1、js一个tab就是一个进程,这个tab下会有多个线程,主要是主线程、渲染线程、js线程、网络线程资源池; 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示; 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的,通过dom api之类的沟通,都是在主
阅读全文
摘要:观察者模式代码 观察者模式就是一对多事件,当事件发生的时候通知到多个观察者,所有观察者进行对应的更新操作update执行事件操作。 // 观察者列表 function ObserverList() { this.observerList = []; } ObserverList.prototype.
阅读全文
摘要:function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); retu...
阅读全文
摘要:这个方法可以方便的实现对象转formdata格式,有利于文件上传类型的数据格式的转换
阅读全文
摘要:以上是本人在项目中使用的ajax部分的代码,在vue项目中能有比较好的性能和使用,可以实现缓存和对重复加载的阻止。 具体使用方法,大概是就是调用apiLink这个主要方法实现ajax请求,配置参数可以实现想实现和不想实现的功能,比如开启缓存就多加saved参数。 POST使用事例: 以上代码就是一个
阅读全文
摘要:vs code格式化jsx比较适合的插件是react-beautify: 格式化中遇到的问题是indent几格,这个问题的解决是你在space里设置几格这个插件就会自动格式化出几格。
阅读全文
摘要:react的数据管理库有不少,最常听到的可能是mobx redux altjs之类的,当然还有很多其他,可以自己搜索。 为什么需要数据管理库呢,因为react本身只是为了实现view的表现,而不是数据的管理。 而数据类库就是为了实现react的不能之数据管理。也就是model层的分区管理。这个mod
阅读全文
摘要:1、html代码和jquery代码: 2、scss代码: 评论弹幕的主要思想是重看不到的屏幕位置移动到屏幕看到的位置,最后消失,所以需要移动,这里采用的是css3 的translate 方法,可以实现目标的移动而在移动端不卡顿。 至于每条屏幕的飘移过程中之间的位置关系需要良好的设置,比如间隔时间插入
阅读全文
摘要:babel-polyfill Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.ass
阅读全文
摘要:browserify 不打包某些文件或者把公共文件提取出来 这里重点的方法就是external,至于写法就按上面那样。 另外,你要让没打包那些模块的程序能够正常运行,就需要额外打包一个公共模块的js文件。或者你在程序中不要import模块,直接接口用着,这样你额外再链接进来那个插件也可以使用。 比如
阅读全文
摘要:1.gulp配置: 这里编译es6的要点工具是babel和browserify,browserify是一个打包module模块的工具,能够将import之类的module打包进来到文件中。另外browserify还配置了babel模块来编译es6,这样就可以高度实现对es6的编译和打包。
阅读全文
摘要:思路是先实现所有有写import export语法的js文件都编译成require语法的js文件,然后再如下编译
阅读全文
摘要:export {testdata as ms}; 这样的导出方式,意思是导出文件接口的子对象到外面 直接//export testdata;//err 这种方式是会报错的,因为不能直接导出变量,需要用一个接口来继承变量然后导出,比如 export var firstName = 'Michael';
阅读全文
摘要:1.遇到坑的gulp配置: 今天我遇到了这个问题,babel运行了先把es6文件编译,然后交给browserify 处理import的文件,可是报错了,因为先用babel编译es6文件后,import export 编译成了require module exports 这类,这样browserify
阅读全文
摘要:1、gulp 配置: 2、package.json:
阅读全文
摘要:1、webpack.start.js: 2、webpack.build.js: 3、server.js: 4、system.js:
阅读全文
摘要:1、package.json: 2、webpack: 3、server.js: 3、store: 4、index.js: 4、view:
阅读全文
摘要:1.store: 2.all store: 3.provider: 4.view :
阅读全文
1