最近一直在折腾mpvue写的微信小程序的性能优化，分享下实战的过程。 先上个优化前后的图：可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A，效果还是比较明显的。其实这个指标说明不了什么，而且轻易就可以做到，更重要的是优化小程序运行过程中的卡顿感，请耐心往下看。 常规优化 常规的Web端优化方法在小程序中也是适用的，而且不可忽视。 一、压缩图片 这一步最简单，但是容易被忽视。在tiny上在线压缩，然后下...
在平时工作做项目的过程中我们有时候会遇到页面加载很久才加载出来的情况，这样严重影响了用户的体验效果。虽然说有时候可能是因为网络问题，但有些时候确实是前端代码没有足够优化导致的。所以通过查阅相关资料并实践后，总结出如下知识点来提升性能。有什么写得不对的地方还希望各路大神指出并加以指点。 1、数据访问 1、将所有script标签放在尽可能接近body标签底部的位置，尽可能减少对整个页面下载的影响。2、尽量少用全局变量...
如何输出Webpack构建分析 输出Webpack构建信息的.json文件：webpack --profile --json > stats.json --profile:记录构建中的耗时信息--json:以json格式输出构建结果，最后只输出一个json文件（包含所有的构建信息）web可视化查看构建分析：得到了webpack构建信息文件stats.json，如何进行很好的可视化查看？ 方案一：通过可视化分析工具Webpack Analyse，是个在线Web应用，上传stats.json文件就可以；不过好像需要翻墙；方案二：安...
Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码 Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件 提纲 本次优化构建代码质量基本技术： reactRouter按需加载；公共代码提取，以及代码压缩；CDN接入；开启gzip压缩；接入treeShaking，剔除无用代码开启Scope Hoisting（生产环境代码构建）为实时查看每...
React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种: 组件懒加载(React.lazy(...)和<Suspense />)Pure ComponentshouldComponentUpdate(...){...}生命周期函数本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法: React.memo。 无用的渲染 组件是构成React视图的一个基本单元。有些组件会有自己本地的状态(state), 当它们的值由于用户的操...
一直发现小程序好慢，尤其是第一次打开的时候。因为第一次会涉及到登录的授权，官方文档是这么说的： 通过 wx.login() 获取到用户登录态之后，需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识，而应该自己派发一个 session 登录态（请参考登录时序图）。 所以后台存储了一个session标识，和微信的session_key 是独立的。而且业务自身的session也有设置有效期，和微信的ses...
React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子组件都会进行一些优化，比如：SCU 使用PureComponent组件。对于SCU基本上进行的也都是浅比较，深比较的代价太高。 对于这些被优化的子组件，我们要减少一些不必要的props改变：比如事件绑定。对于那些依赖于配置项的组...
最近对项目的本地开发环境进行了打包速度优化，原有项目，网上能搜到的优化方案基本都加了，在16年低配mac pro 上打包时间为25秒多，但我发现细节做一些调整可能大大降低打包时间，最终优化到7秒多dll原有项目是线上和本地公用一套dll配置，因为antd这类ui库需要按需加载所以不能放到dll中，这时可以单独写一个dll配置，将所有第三方库添加到dll中。这时因为.babelrc中添加了babel-plugin-import插件会导致优化不生效，所以需要对开...
内存分配对性能的影响是很大的，分配内存本身需要时间，垃圾回收器回收内存也需要时间，所以应该尽量避免在堆里分配内存。不过直到最近优化HoLa cantk时，我才深刻的体会到内存分配对性能的影响，其中有一个关于arguments的问题挺有意思，写在这里和大家分享一下。 我要做的事情是用webgl实现canvas的2d API(这个话题本身也是挺有意思的，有空我们再讨论)，drawImage是一个重要的函数，游戏会频繁的调用它，所以它的性能至关重要。...
背景 最近在用 Vue 重构一个历史项目，一个考试系统，题目量很大，所以核心组件的性能成为了关注点。先来两张图看下最核心的组件 Paper 的样式。 从图中来看，分为答题区与选择面板区。 稍微对交互逻辑进行下拆解： 答题模式与学习模式可以相互切换，控制正确答案显隐。单选与判断题直接点击就记录答案正确性，多选是选择答案之后点击确定才能记录正确性。选择面板则是记录做过的题目的情况，分为六种状态（未做过的，未做过且当前...
Vue 2.0 在发布之初，就以其优秀的运行时性能著称，你可以通过这个第三方 benchmark 来对比其他框架的性能。Vue 使用了 Virtual DOM 来进行视图渲染，当数据变化时，Vue 会对比前后两棵组件树，只将必要的更新同步到视图上。 Vue 帮我们做了很多，但对于一些复杂场景，特别是大量的数据渲染，我们应当时刻关注应用的运行时性能。 本文仿照Vue Cookbook 组织形式，对优化 Vue 组件的运行时性能进行阐述。 基本的示例 在下面的示例中...
中午和同事吃饭，席间讨论到数组去重这一问题 我立刻就分享了我常用的一个去重方法，随即被老大指出这个方法效率不高 回家后我自己测试了一下，发现那个方法确实很慢 于是就有了这一次的高性能数组去重研究 一、测试模版 数组去重是一个老生常谈的问题，网上流传着有各种各样的解法 为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时 // distinct.js let arr1 = Array.from(new Array(100000), (x, index)=>{re...
React性能优化思路软件的性能优化思路就像生活中去看病，大致是这样的： 使用工具来分析性能瓶颈（找病根） 尝试使用优化技巧解决这些问题（服药） 使用工具测试性能是否确实有提升（疗效确认） 初识react只是为了尽快完成项目，后期进行代码审查时候发现有很多地方需要优化，因此做了个小结。 Code SplittingshouldComponentUpdate避免重复渲染使用不可突变数据结构组件尽可能的进行拆分、解耦列表类组件优化bind函数优化不要滥用...
在小程序中，我们经常有调起键盘的操作场景，但是在不同的场景下解决方案不尽相同，还是需要具体问题具体分析。 需求分析 最近在项目中有一个需求，是从列表页点击评论按钮进入详情页时，在加载完页面后自动调起键盘进入评论状态。从需求来看，我们应该在onReady函数中调起键盘，因为onReady函数是在页面初次渲染完成时被调用。但是在实践中我们发现，对于一些配置不好的手机，其加载页面速度较慢，在onReady函数调用时页面并没有渲...
意义 懒加载或者可以说是延迟加载，针对非首屏或者用户"看不到"的地方延迟加载，有利于页面首屏加载速度快、节约了流量,用户体验好 实现方式 传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的高度来判断。小程序也类似，通过监听页面onPageScroll事件获取当前滚动的数据，结合getSystemInfo获取设备信息来判断。由于scroll事件密集发生，计算量很大，经常会造成FPS降低、页面卡顿等问题。这里说的是通过另...