微信小程序代码优化总汇

时间: 2018-11-23阅读: 4350标签: 优化

之前有一篇文章是:微信小程序性能优化入门指南. 主要讲述的是:小程序的加载流程、启动性能优化、首屏加载性能优化、汇渲染性能优化等方面讲解的。这写篇文章的目的,是以开发小程序代码的层面的优化。


1、条件判断将wx:if换成了hidden  

在小程序中使用wx-if,是基于局部渲染的形式。比如wx:if初始渲染条件为false时,框架什么都不会做;只有为真的时候才开始渲染该组件。而使用hidden在初始的时候就会渲染,它的值只是负责该组件的显示与隐藏。因此在切换的时候,wx:if有更高的性能消耗,当我们项目需要频繁切换时,建议把wx:if换成了hidden。


2、页面跳转,请销毁之前使用的资源

小程序一般有多个页面,所有的页面即使拥有直接的webview(渲染层),但是在小程序环境中,它们都是共享同一个js运行环境。这一点区别于常规的H5浏览器环境,浏览器跳转之前页面的js环境是会被自动销毁的,当然单页应用除外哈。

因此我们需要在小程序生命周期onUnload中进行资源的销毁操作,比如当前跳转页面之前,这个页面的定时器。

onUnload: function () {/**监听页面卸载 */ 
      context && context.stop();
},


3、列表的局部更新

在一个列表中,有n条数据,采用上拉加载更多的方式,假如这个时候想对其中某一个数据进行点赞操作,还能及时看到点赞的效果

此时,可以采用setData全局刷新,点赞完成之后,重新获取数据,再次进行全局重新渲染,这样做的优点是:方便,快捷!缺点是:用户体验极其不好,当用户刷量100多条数据后,重新渲染量大会出现空白期(没有渲染过来)

如果采用布局刷新,将点赞的id传过去,知道点的是那一条数据, 将点赞的id传过去,知道点的是那一条数据。 重新获取数据,查找相对应id的那条数据的下标(index是不会改变的),用setData进行局部刷新。

this.setData({
    list[index] = newList[index]
})


4、小程序中多张图片懒加载方案

由于小程序对用户内存使用进行了限制,如果一个页面的图片过多,会导致内存不足的内部错误。我在项目中用到的优化方案是:使用scroll-view实现分屏加载,然后给未加载的图片设置默认图片。 

小程序文档中有新增image的lazy-load属性,当值为true时生效,注意:只针对page与scroll-view下的image有效。


5、其他

1、Input状态下隐藏input,应预留出键盘收起的时间,具体情况类似下图当点击页面中的取消按钮,页面输入框和mask会消失,因为输入框会消失,引起键盘收起。此时页面会有明显的抖动重绘。我的解决办法是点击取消后,先让键盘消失(大约500ms),再去隐藏input,体验会好很多  

2、压缩代码,合并雪碧图也都是可以使用的。但在有些情况下,比如特别常用的小图标(自定义tabbar上的图标),建议用base64写在css中,虽然base64解析慢,但比网络加载图片要快的多。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1397

关闭

从4个方面优化你的Vue项目

运行时优化:1、使用v-if代替v-show,2、v-for必须加上key,并避免同时使用v-if,3、事件及时销毁。首屏优化:1、图片裁剪、使用webp,2、资源提前请求,3、异步路由,4、异步组件,5、使用轻量级插件、异步插件

css代码优化

css代码优化作用与意义:减少占用网页字节;便于维护;让自己写的css代码更加专业。css优化方法:缩写css代码;排列css代码;同属性提取共用css选择器

js中for循环优化总结_如何提高程序的执行效率

在程序开发中,经常会使用到for循环的,但是很多人写的for循环效率都是比较低的,下面就举例说明,并总结优化for循环的方法,来提高我们程序的执行效率。

网页首屏性能优化总结

本文总结了系统地进行前端性能优化的整体思路。具体到实施的过程,每一种优化方法都能搜到详细的文章,这里就不展开了。同时,还应该结合具体的业务场景对症下药,最终真正的提高用户体验。符合预期。

WEB前端_搜索引擎工作原理与SEO优化

搜索引擎的工作分为三个阶段,即爬行,索引和检索;搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。

网络串流播放_HTML5如何优化视频文件以便在网络上更快地串流播放

无论你正在将 GIF 动图转换为 MP4 视频,还是手头已经有一大堆 MP4 视频,你都可以优化文件结构,以使得这些视频更快地加载和播放。通过重组 atoms 将 moov 放到文件开头,浏览器可以避免发送额外的 HTTP range request 请求来搜寻和定位 moovatom

js前端性能优化之函数节流和函数防抖

针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。节流:使得一定时间内只触发一次函数。 防抖动:将几次操作合并为一此操作进行。

CSS 性能优化还有哪些方法?

CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于DOM。由于优化程度极高,这个过程通常非常快——对于不基于框架的小型 web 项目,CSS通常只占总资源消耗的一小部分

我是如何将页面加载时间从6S降到2S的?

生活在信息爆炸的今天,我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的,这就意味着用户对你站点投入的时间可能是及其吝啬的(当然有一些刚需站点除外)。如何给用户提供迅速的响应就显得十分重要了

运用meta标签进行网站优化

Set-Cookie(cookie设定)说明:如果网页过期,存盘的cookie将会被删除(必须是GMT的时间格式); Window-target(显示窗口的设定)说明:强制页面在当前窗口以独立页面显示----用来防止别人在框架里面调用你的页面

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!