微信小程序代码优化总汇

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

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


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解析慢,但比网络加载图片要快的多。



Javascript代码优化的8个知识点

本篇文章给大家分享了关Javascript代码优化的8点总结,希望我整理的内容能够帮助到大家。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

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

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

通过HTML5 Video来优化动态GIF

网页中的动态GIF图片是非常受欢迎的,因为它们相比静态图片更生动,相比网页视频更简单。但是GIF图片通常具有较大的体积,就导致网页加载速度变慢,内存使用增加

优化网页加载速度的方法总汇

优化方案的核心就3点:减少请求数、减少资源大小、找最快的服务器。如果你是一个网站的产品经理,快去找你们的开发确认是否有做过类似的优化吧。网页的加载流程。优化图片资源的格式和大小、开启网络压缩、使用浏览器缓存、减少重定向请求

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

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

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

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

前端性能优化之重排和重绘

浏览器下载完页面所有的资源后,就要开始构建DOM树,于此同时还会构建渲染树(Render Tree)。(其实在构建渲染树之前,和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树)

​web项目优化_Web 服务器性能与站点访问性能优化

要优化 Web 服务器的性能,我们先来看看 Web 服务器在 web 页面处理上的步骤:Web 浏览器向一个特定的服务器发出 Web 页面请求; Web 服务器接收到 web 页面请求后,寻找所请求的 web 页面,并将所请求的 Web 页面传送给 Web 浏览器; 显示出来

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

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

微信小程序性能优化入门指南

小程序从发布到现在也已经有将近两年的时间,越来越来多的公司开始重视小程序生态带来的流量,今年也由于小程序平台对外能力的越来越多的开放以及小程序平台的自身优化,越来越多的开发者也自主的投入到小程序的开发当中

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯