坑一：canvas适配 刚开始做这方面的时候，我一直以为获取不到机型以及手机的宽高，所以硬生生的把canvas的宽高都设成了固定的320px，想想偌大的平板上就320那么大有多丑，产品估计也想把我活活掐死...坑三：canvas画笔粗细 当时做了画画的功能，在微信开发者工具上都是好好的，但一到真机上，每次一选择画笔粗细的时候，就画不出来东西了，当时也是郁闷好久，后来也不知道怎么找到原因的，但最后解决了。...坑七：刷新页面 刷新页面的坑其实挺多的，我罗列一下： 1、以前总有双击tabBar就能刷新页面，现在没法控制tabBar，这个也就没办法实现了； 2、只有下拉刷新的样式（三个点转呀转那个），但没有上拉加载的样式...想让页面返回的时候就刷新，那就要用到onShow这个生命周期函数了，onShow是每次打开页面都会调用一次，然后再和setData()结合就完美了。...今天就写这么多吧，一直在踩坑中，上面也还有很多没解决的问题以及可能不对的地方，希望大家多多给我提意见哈。
在人家APP.JS里面有介绍，由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回，所以页面加载成功的时候有可能这个值还没返回过来，然后就有了 elseif...当APP.JS加载完成之后，再点击其它页面的时候，这个APP.JS里面的东西不会重新加载，因为它的代码是写在 onLaunch: function () 时面的。这个代表页面加载时运行。...经过测试发现 APP.JS只在加载的时候运行一次，而且当运行完成之后再点击其它页面之时 app.globalData.userInfo 已经有值了，其它页面调用的时候就可以走这一层，直接去拿用户信息。...但这样的话每次想要使用用户信息数据之时都需要写JS去获取，感觉很麻烦。 所以我选择了在 APP.JS中获取完用户信息后把用户信息用全局存储的方式存起来。 ?...总结： APP.JS里面获取用户数据，只在加载之时运行一次，加载完成之后再点任何页面都不会重新加载。
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。...代码，应该要在css加载完成后才会运行 实际结果: 由上图我们可以看出，位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行，直到css加载完成后，它才执行。...这也就说明了，css加载会阻塞后面的js语句的执行。...而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。 而DOMContentLoaded，顾名思义，就是当页面的内容解析完成后，则触发该事件。...当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。 我们先对第一种情况做测试： <!
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。...由上图我们可以看出，位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行，直到css加载完成后，它才执行。这也就说明了，css加载会阻塞后面的js语句的执行。...其中一个解决防范是在文件名字后面加一个版本号) 减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存) 原理解析 那么为什么会出现上面的现象呢？...而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。 而DOMContentLoaded，顾名思义，就是当页面的内容解析完成后，则触发该事件。...当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。 我们先对第一种情况做测试： <!
埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗...同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记...中，我们执行完同步任务后，就会执行app.js，当1s后，我才真正执行了这个插入的脚本，而且我统计脚本你会发现此时是先执行了app.js再加载tj.js的 当执行setTimeout时，我们会发现先执行了内部脚本...我们再继续上一个问题，为什么不同步加载？ 我把代码改造一下,去除了一些无关紧要的代码 <!...很大，那么是会阻塞影响页面首屏打开速度的，所以在之前采用异步，定时器方式，首屏加载会有显著提升。
中通过标签的href链接定位路由可实现预加载路由页面，可使点击跳转无需发送请求。...同构代码：一份代码两端运行，在一处使用console.log调试，可在服务端和客户端页面都显示出log，这样更方便调试。...适合前后端交互不多的页面，如CMS（文章管理系统）生成静态页面、SSR（服务端渲染）是每次请求都生产新HTML（传统BS框架PHP、Python、Ruby、Java后台的基本功能）Sever Site...SEO不友好：因为搜索引擎访问页面， 默认不会执行 JS，只能看到 HTML，而不会等待 AJAX 异步请求数据，所以搜索不到页面内容在文章列表页面里，其实每个用户查到的内容都是一样的那为什么还需要在每个人的浏览器上渲染一遍呢...为什么不在后端渲染好，然后发给每个人这样就可以N 次渲染变成了 1 次渲染N 次客户端渲染变成了 1 次静态页面生成这个过程成为 动态内容静态化静态页面生成（SSG）前提:如果每个人都请求一个相同的资源
三次握手四次挥手，https 为什么安全为什么慢，跟 http 的区别，http2.0 都有哪些优化，浏览器输入url到看到页面的整个流程… 安全类的常见的攻击手段，记好 CSRF 和 XSS 攻击的原理和防范措施就好了...解决了前两种的缺陷。 但是，在实例化 Child3 的时候，父类 Parent3 的构造函数被执行了两遍，这是没必要的。 为什么执行了两遍父类构造函数？...理解哪些语句会放入异步任务队列 理解语句放入异步任务队列的时机 11.1 为什么 JavaScript 是单线程 JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。...from disk cache：同上类似，此资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from...十三、错误监控 13.1 前端错误分类 前端错误分为两大类： 即时运行错误（代码错误） 资源加载错误 13.2 错误的捕获方式 即时运行错误的捕获方式 try...catch window.onerror
前端Q 我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～ 大家好，我是winty！新的一周，基于 Web Components 的组件库来了。...比如首次加载时，你的页面中有一个复杂的交互组件，交互组件中又包含 N 多逻辑和按钮等小组件，此时页面的首次加载不应该优先去执行这些细节逻辑，而首要任务应当是优先渲染出整体框架或核心要素，而后再次去完善那些不必要第一时间完成的细节功能...当我们使用 Web Components 来优化 React 的时候，这个执行过程将会变得简洁的多，比如我们注册了一个复杂的逻辑组件，在 React 执行时只是执行了一个 createElement 语句...我们也可以简单的理解为，部分逻辑在之后进行执行然后被 render 到指定 id 的 Div 中的，那么为什么传统的组件为什么不能这么做呢？而非得 Web Components 呢？...我们都知道页面中的 DOM 节点数越多，运行时性能将会越差，这是因为 DOM 节点的相互作用会时常在触发重绘（Repaint）和重排（reflow）时会关联计算大量 Frame 关系。
文章说明 本文为我之前总结的笔记，因为内容在面试中问得比较多，因而搬运过来，作为面试系列的文章之一。...模块化解决的问题： 命名冲突 文件依赖 commonJS 1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。.../a.js'); console.log(moduleA.a); // 打印出：hello world }); AMD与CMD区别 最明显的区别就是在模块定义时对依赖的处理不同 AMD推崇依赖前置...同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来...（编译时加载） 2、import和export命令只能在模块的顶层，不能在代码块之中（如：if语句中）,import()语句可以在代码块中实现异步动态按需动态加载 适用场景：浏览器或服务器环境（以后可能支持
大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。...比如首次加载时，你的页面中有一个复杂的交互组件，交互组件中又包含 N多逻辑和按钮等小组件，此时页面的首次加载不应该优先去执行这些细节逻辑，而首要任务应当是优先渲染出整体框架或核心要素，而后再次去完善那些不必要第一时间完成的细节功能...当我们使用 Web Components 来优化 React的时候，这个执行过程将会变得简洁的多，比如我们注册了一个复杂的逻辑组件，在 React 执行时只是执行了一个 createElement 语句...我们也可以简单的理解为，部分逻辑在之后进行执行然后被 render 到指定 id 的 Div 中的，那么为什么传统的组件为什么不能这么做呢？而非得 Web Components 呢？...我们都知道页面中的 DOM 节点数越多，运行时性能将会越差，这是因为 DOM 节点的相互作用会时常在触发重绘（Repaint）和重排（reflow）时会关联计算大量 Frame 关系。
对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有 异步的能力，所以，我试图从 进程、 线程的角度来解释这个问题。 CPU ? 算机的核心是 CPU，它承担了所有的计算任务。...对于这种 子进程的扩展方式，我们可以称这个应用程序是 多进程的。 而对于浏览器来说，浏览器就是多进程的，我在Chrome浏览器中打开了多个tab，然后打开windows控制管理器： ?...为什么 GUI 渲染线程为什么与 JS 引擎线程互斥 这是由于 JS 是可以操作 DOM 的，如果同时修改元素属性并同时渲染界面(即 JS线程和 UI线程同时运行)， 那么渲染线程前后获得的元素就可能不一致了...但在进行渲染前执行了微任务， 在微任务中将背景变成了黑色，然后才执行的渲染 第二个例子： setTimeout(() => { console.log(1) Promise.resolve...(3).then(data => console.log(data)) }, 0) setTimeout(() => { console.log(2) }, 0) // print : 1
，内容也会牢记于心) 顺道给大家看看(我太难了，深夜码字，反复修改，说这么多就是想请你点个赞在看) 参考了很多资料(帖子)，取其精华，去其糟糠，都在文末，可自行了解 是时候搞一波我大js了 从零到一百再到一...，CPU在运行一个进程时，其他的进程处于非运行状态，CPU使用 时间片轮转调度算法 来实现同时运行多个进程 什么是线程 线程是CPU调度的最小单位 线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流...JS执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞(就是加载慢) 例如浏览器渲染的时候遇到标签，就会停止GUI的渲染，然后js引擎线程开始工作，执行里面的js代码，等js执行完毕...，再变成黑色背景，页面上写的是200毫秒，大家可以把它当成0毫秒，因为0毫秒的话由于浏览器渲染太快，录屏不好捕捉，我又没啥录屏慢放的工具，大家可以自行测试的，结果也是一样，最安全的方法是写一个index.html...，没有经过蓝色的阶段，是因为，我们在宏任务中将背景设置为蓝色，但在进行渲染前执行了微任务， 在微任务中将背景变成了粉色，然后才执行的渲染 微任务宏任务注意点 浏览器会先执行一个宏任务，紧接着执行当前执行栈产生的微任务
浏览器内核中线程之间的关系 GUI渲染线程和JS引擎线程互斥 js是可以操作DOM的，如果在修改这些元素的同时渲染页面（js线程和ui线程同时运行），那么渲染线程前后获得的元素数据可能就不一致了。...JS阻塞页面加载 js如果执行时间过长就会阻塞页面 浏览器是多进程的优点 默认新开 一个 tab 页面 新建 一个进程,所以单个 tab 页面崩溃不会影响到整个浏览器。...现在我们回到最开始的一个例子 setTimeout(() => { console.log(1); }, 0) console.log(2); 输出 2， 1； setTimeout的第二个参数表示在执行代码前等待的毫秒数...setInterval：以指定周期调用函数，而setInterval则是每次都精确的隔一段时间推入一个事件（但是，事件的执行时间不一定就不准确，还有可能是这个事件还没执行完毕，下一个事件就来了）....('我被调用了'); setTimeout(fn, 100); },100); 这个模式链式调用了setTimeout()，每次函数执行的时候都会创建一个新的定时器。
（理解这句就行了，管他交不交叉呢），我好像在开车，但是你们没有证据 ... ?...为什么要举例以上两种情况呢，因为entries是返回当前已监听并且发生了交叉的目标集合，第一种情况，大家都一起发生交叉，固每次返回的集合长度都为三；第二种情况则是每个目标轮流发生交叉，且当前只触发了一个...，所以每次返回的集合长度只有一✅ 3....设置rootMargin偏移值为"0px 0px -100px 0px"（底部向内收缩）： ? 该方法还有一个好处，那就是当页面上某个节点存在横向滚动条的时候，一样应对自如： ?...; let top = item.boundingClientRect.top; // 当参照元素的的top值小于0，也就是在视窗的顶部的时候，开始吸顶，否则移除吸顶 if (top <
我们来看这段代码，我自以为是的又加了一层，于是，我希望不用我说，你也已经懂了。 最后，再说一下，为什么赋值给一个其它名字的变量以及用对象的方法来使用的时候，重定义永远没有发生。...个人理解，因为你每次在执行的时候，赋值的动作是有的，但是并没有把我覆盖，所以，每次都是重定义，每次都无法执行新的内部逻辑。...所以，在最开始的那个例子里，当你第一次调用scareMe()的时候，就走了Double Boo!语句。因为前面prank()或者spooky.boo()的每一次执行，都重新定义了scareMe()。...比如：当页面加载时，代码必须初始化执行一些设置任务，比如附加事件处理程序、创建对象等诸如此类的任务。所有这些工作仅需要执行一次，因此没有理由去创建一个可复用的命名函数。...(o.getMsg()) console.log(o.message) 这个例子中，message是一个字符串属性，而不是一个函数，但是它需要一个在脚本加载时执行的函数来帮助定义该o.message
前几天在前端技术群里聊起Code Review的事，大伙儿似乎都憋了一肚子气： 我觉得这份难言之隐应该要让更多人看到，就跟Henry约了个稿： 于是Henry赶在周末，一边带娃，一边给我抹眼泪整理...useEffect(() => { console.log('no deps=====') // code... }); 这样的话，每次页面有重渲染，该useEffect都会执行，带来严重的性能问题...例如我们项目中，这个useEffect内部执行的是第一点中的内容，即每次都会绑定一个scroll事件的回调，而且页面中有实时轮询接口每隔5s刷新一次列表，用户在该页面稍加停留，就会有卡顿问题出现。...乍一看代码逻辑很清晰，但再想深一层，兜底值具体的含义是什么？为什么要用这两个值来兜底？写这行代码的同学可能很快可以解答，但是一段时间之后，写代码的人和提需求的人都找不到了呢？..."当前没有可用房间" : "数据加载中"} 真的很难理解，明明只是一个简单的提示语句的判断，却需要拿出分析性能的精力去理解，多少有点得不偿失了。
叨叨一会CommonJS Common这个英文单词的意思，相信大家都认识，我记得有一个词组common knowledge是常识的意思，那么CommonJS是不是也是类似于常识性的，大家都理解的意思呢？...首先肯定是解析路径，系统给我们解析出一个绝对路径，我们写的相对对路径是给我们看的，绝对路径是给系统看的，毕竟绝对路径辣么长，看着很费力，尤其是当我们的的项目在N个文件夹之下的时候。...我们都知道在JS中，函数的调用时栈stack的方式，也就是先近后出，也就是说require这个函数触发之后，图中的运行时从下到上运行的。也就是蓝色框最先运行。我把他的部分代码扒出来，研究研究。...的模块，而且这个标签默认是异步加载，也就是页面全部加载完成之后再执行，没有这个标签的话代码不然无法运行哦。...大家可以看这个例子，我写了一个改变object值的小测试，大家会发现utils.js中的count初始值应该是0，但是运行了addCount所以count的值动态变化了，因此count的值变成了2。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
