
自我学习的知识点
哈哈吾拉
这个作者很懒,什么都没留下…
展开
-
图片预加载
使用css中的background的属性通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在WEB页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。缺点:由于CSS是同页面的其他内容一起加载,这也就意味着增加了页面的整体加载时间。使用js中的 new Image()方法(推荐)步骤1、使用new Image()动态的创建imgvar newImg = new Image();步骤2、设置其src为要加载的原创 2021-12-31 17:21:08 · 516 阅读 · 0 评论 -
使用preload或者prefetch预加载页面资源
preload与prefetch的区别preload浏览器页面必定需要的资源,浏览器一定会加载这些资源适应场景:首页一些肯定会加载的资源prefetch浏览器页面可能需要的资源,浏览器不一定会加载这些资源。适应场景:例如滚动之后会加载的资源,滚动是可能触发,并不是一定触发如何使用:用法几乎一致,以preload为例使用link标签创建<link rel="preload" href="./common.css" as="style">动态创建一个link标签后插入到head原创 2021-12-31 17:00:17 · 580 阅读 · 0 评论 -
web判断浏览器类型
通过window.navigator.userAgent var explorer = window.navigator.userAgent ; //判断是否为IE浏览器 if (explorer.indexOf("MSIE") > -1) { return 'ie'; } //判断是否为Firefox浏览器 else if (explorer.indexOf("Firefox")原创 2021-12-03 14:59:24 · 343 阅读 · 0 评论 -
web横屏竖屏判断
css判断@media screen and (orientation:portrait){ /*竖屏对应的css*/}@media screen and (orientation:landscape){ /*横屏对应的css*/}js判断window.addEventListener('onorientationchange',function(event){ if(window.oprientation ===180 || window.oprientation ===0){ /原创 2021-12-03 14:20:29 · 484 阅读 · 0 评论 -
资源管理注意事项 --- meta 文件
Cocos Creator引擎会自动生成.meta文件在每一个meta文件里都有一个uuid,所以在Creator引擎中是通过uuid来引入文件,因此可以在编辑资源管理中,随意删除,移动文件。meta文件出错的几种情况以及解决方法1、uuid冲突原因:出现文件复制粘贴导致有2个一个的uuid文件;或者多人开发时,生成了相同的uuid文件。避免:最好在引擎管理工具Cocos Creator里进行添加、移动文件。解决:关闭Creator编辑器,删除其中一个meta文件,再打开Creator。2、u原创 2021-10-15 14:26:48 · 771 阅读 · 0 评论 -
git合并的merge与rebase的区别以及各自的操作命令
merge假设现在有2个分支,一个master主分支,一个是branchA你的个人分支#mermaid-svg-KU35RhALF4hvNTdG .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-KU35RhALF4hvNTdG .label text{fill:#333}#mermaid-svg-KU35原创 2021-10-12 18:04:58 · 172 阅读 · 0 评论 -
监听用户是否点击屏幕(是否有操作),未操作时执行对应的事件
思路1、全局定义一个变量储存是否操作的状态,全局注册一个定时器,封装一个方法,传入一个callback函数,当用户一段时间未操作页面时执行,传入一个time时间,限定多长时间用户未操作就执行这个callback函数。2、通过onmousedown与onmouseup,两个事件判断用户有没有操作var timer;var timeStatus = true;function hasOperate(callback, time) { document.body.onmousedown = fu原创 2021-09-23 20:38:22 · 2391 阅读 · 1 评论 -
Vue实例挂载的过程中发生了什么?
总结new Vue的时候调用会调用_init方法定义 set、set、set、get 、delete、delete、delete、watch 等方法定义 on、on、on、off、emit、emit、emit、off等事件定义 _update、forceUpdate、forceUpdate、forceUpdate、destroy生命周期调用$mount进行页面的挂载挂载的时候主要是通过mountComponent方法定义updateComponent更新函数执行rende转载 2021-08-28 15:27:35 · 818 阅读 · 0 评论 -
vue的data为什么是一个函数不是一个对象
组件实例对象的data必须是个函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染,采用函数的形式,initdata是会将其作为工厂函数都会返回一个新的data对象原创 2021-08-28 15:03:30 · 139 阅读 · 0 评论 -
Vue中的组件和插件
组件在vue中每一个.vue文件都可以视为一个组件插件插件通常为Vue添加全局功能,一般有以下几种 - 添加全局方法或属性 - 添加全局资源:指令/过滤器/过渡等。 - 通过全局添加一些组件选项 。如vue-router - 添加vue实例方法,通过把他们添加到Vue.prototype上实现.详细地址:https://mp.weixin.qq.com/s/Wi0r38LBopsyQ9HesMID0g...转载 2021-08-28 14:55:28 · 253 阅读 · 0 评论 -
SPA(单页应用)首屏加载速度慢怎么解决?
计算首屏加载时间指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间通过DOMContentLoad或者performance来计算首屏时间// 方案一:document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting');});// 方案二:performance.getEntriesByName("first-contentfu原创 2021-08-28 11:39:11 · 250 阅读 · 0 评论 -
对SPA(单页应用)的理解?
理解:SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式。实现一个SPA写在前面:通常 SPA 中前端路由有2种实现方式:- window.history- location.hash转载 2021-08-27 21:24:43 · 401 阅读 · 0 评论 -
provide 与 inject 的使用
简单理解1.简单理解 provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等原创 2021-08-27 20:05:37 · 2309 阅读 · 0 评论 -
当我们在打开网页时,浏览器做了什么?
打开网页会触发多个进程(主要这里说的是进程不是线程,一个进程可以包含多个线程,一个线程又可以包含多个模块),单线程最常用的javascript就是单线程语言,最粗狂的解释就是-----“代码一行一行的往下执行,如果报错了就卡在哪里不走了”假设我们在打开一张页面,浏览器的网络线程、插件线程、渲染线程等等挨着挨着往下走。多线程浏览器多线程浏览器的工作原理如下,我们再次想象我们打开一张页面的过程:当我们再次打开一张页面时,此时多个线程会被分割,这种低耦合的方式,其好处就在于即使任意一个线程的任转载 2021-08-27 20:04:44 · 343 阅读 · 0 评论 -
Vue组件间通信方式都有哪些
父子通信兄弟组件通信祖孙与后代之间的通信非关系组件之间的通信组件间通信的方案整理vue中8种常规的通信方案1、通过props传递2、通过$emit触发自定义事件3、使用ref4、EventBus5、provide与inject6、Vuexprops 传递数据适用场景:父组件传递数据给子组件子组件设置props属性,定义接收父组件传递过来的参数父组件在使用子组件标签中通过字面量来传递值Children.vueprops:{ name:{ type:String,.原创 2021-08-27 16:40:43 · 328 阅读 · 0 评论 -
对Vue生命周期的理解
废话不多说直接上表格分析8个生命周期的描述以及适用场景生命周期描述场景beforeCreate组件实例被创建之前组件实例未被创建,通常用于插件开发中进行舒适化任务created组件实例已经被创建组件初始化完毕,各种数据可以用,常用于异步数据请求beforeMount组件挂载之前dom未创建mounted组件挂载完成初始化结束,dom已创建,可用于获取访问数据和dom元素deforeUpdate组件数据更新前用于获取更新前的状态upd原创 2021-08-26 17:22:01 · 133 阅读 · 0 评论 -
webgl是什么意思
WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。...原创 2021-08-21 11:20:05 · 652 阅读 · 0 评论 -
export { default as XXX } from ‘./xxxx‘ 写法说明
例如 : export { default as MiSwitch } from './Switch.vue' 从’./Switch.vue’ 中导入它的默认导出,重命名为 MiSwitch 再重新导出等同于 :import MiSwitch from './Switch.vue'export MiSwitch原创 2021-08-20 09:03:17 · 1429 阅读 · 0 评论 -
浅谈Vue中的Setup()函数的使用
参数接收 2 个参数 props ,context1、props 参数说明import { toRefs } from 'vue'export default { props: { title: String }, setup(props) { //props 是响应式的,不能使用 ES6 解构, //如果需要解构 prop,可以通过使用 setup 函数中的 toRefs 来安全地完成此操作 const { title } = toRefs(props) console原创 2021-07-23 11:05:08 · 4238 阅读 · 0 评论