首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏只喝牛奶的杀手

    程序架构

    程序上线以来,一向被称为“便携版”的APP,关于两者之间的区别,无外乎程序相对轻便、开发成本低,下面让我们来看一下程序的“庐山真面目”! 二、什么是程序 程序是介于web网页应用和原生应用的一种产物; ? 程序的特点: ? 三、程序架构 ? 由上图可知,程序由两大线程组成:负责界面的视图线程(view thread)和负责数据、服务处理的服务线程(appservice thread),两者协同工作,完成程序页面生命周期的调用。 首次渲染状态:当收到服务线程提供的初始化数据后(json和js中的data数据),渲染程序界面,渲染完毕后,发送“首次渲染完成信号”给服务线程,并将页面展示给用户。 假如用户已经打开过某程序,然后在一定时间内再次打开该程序,此时无需重新启动,只需将后台态的程序切换到前台,这个过程就是热启动;冷启动指的是用户首次打开或程序被微信主动销毁后再次打开的情况,此时程序需要重新加载启动

    2.2K30发布于 2019-08-26
  • 程序的UI线程与JS线程优化

    程序采用了基于 多线程架构,其中 UI 渲染和 JavaScript 执行分别在不同的线程中运行,UI 线程负责渲染界面,而 JS 线程处理业务逻辑和事件。 UI线程UI线程负责程序的界面渲染,包括页面的结构、样式、动画等。程序的界面展示由微信的引擎渲染,UI线程需要频繁地进行计算和绘制,响应用户的操作。 地址:微信程序性能优化指南 《深入浅出:程序线程机制与性能优化》 本文详细分析了程序线程机制,包括UI线程和JS线程的协作机制,并给出了优化策略。 地址:深入浅出:程序线程机制与性能优化 《程序性能优化:从UI线程到JS线程的优化》 本文专注于UI线程和JS线程的优化,适合开发者深入理解多线程架构下的性能瓶颈与优化方法。 地址:程序性能优化:从UI线程到JS线程的优化六、结语程序的UI线程和JS线程是其高效运行的核心组成部分。

    58710编辑于 2025-01-28
  • 来自专栏JAVAandPython君

    【每日知识】简述线程程序、进程

    线程与进程相似,但线程是一个比进程更小的执行单位。一个进程在其执行的过程中可以产生多个线程。 与进程不同的是同类的多个线程共享同一块内存空间和一组系统资源,所以系统在产生一个线程,或是在各个线程之间作切换工作时,负担要比进程小得多,也正因为如此,线程也被称为轻量级进程。 程序是含有指令和数据的文件,被存储在磁盘或其他的数据存储设备中,也就是说程序是静态的代码。 进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的。 换句话说,当程序在执行时,将会被操作系统载入内存中。线程是进程划分成的更小的运行单位。线程和进程最大的不同在于基本上各进程是独立的,而各线程则不一定,因为同一进程中的线程极有可能会相互影响。 从另一角度来说,进程属于操作系统的范畴,主要是同一段时间内,可以同时执行一个以上的程序,而线程则是在同一程序内几乎同时执行一个以上的程序段。

    36820发布于 2020-02-24
  • 来自专栏薛定喵君

    关于浏览器环境JS单线程程序线程架构的一点思考

    想通了一件事情 # 前情提要 1.通过了解浏览器线程的一些知识我们知道浏览器进程中GUI线程是与JS引擎线程互斥的。 2.程序架构是JsCore执行js逻辑代码+webview页面渲染双线程,两个线程并不互斥。 # 那么问题来了 为什么浏览器中js代码会阻塞页面渲染而程序环境里面JS却可以和页面渲染同时进行。 *GUI线程被设计成是和JS引擎线程互斥的(谷歌浏览器为例) *程序逻辑层线程和webview渲染线程是可以同时执行的 # 原因 浏览器环境 由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面 (即JS线程和GUI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了 程序环境 程序底层屏蔽了窗口对象(JsCore环境是没有窗口对象的),程序里的JS代码是无法操作document对象的

    1.5K20发布于 2019-11-26
  • 来自专栏极乐技术社区

    浅谈微信程序底层架构

    所以程序中没有DOM和BOM的相关API,jQuery和一些NPM包都不能在程序中使用; 系统权限:程序能获得更多的系统权限,如网络通信状态、数据缓存能力等; 渲染机制:程序的逻辑层和渲染层是分开的 程序架构 2.1 双线程模型 程序的渲染层和逻辑层分别由2个线程管理: 渲染层:界面渲染相关的任务全都在WebView线程里执行。一个程序存在多个界面,所以渲染层存在多个WebView线程。 双线程模型是程序框架与业界大多数前端Web框架不同之处。基于这个模型,可以更好地管控以及提供更安全的环境。 缺点是带来了无处不在的异步问题(任何数据传递都是线程间的通信,也就是都会有一定的延时),不过小程序在框架层面已经封装好了异步带来的时序问题。 this.setData({ hasNewVersion: true }); }); } }); } 微信程序的基础底层架构大概就这么多

    3.6K20发布于 2019-07-30
  • 来自专栏全栈前端精选

    程序用户登录架构设计

    背景 上一篇文章《程序静默登录方案设计》提到过,程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立程序内的用户体系。 「用户登录」流程 上一篇文章《程序静默登录方案设计》中提过,当新用户第一次进入程序时,便会触发「静默登录」,这个过程对用户是无感知的。 「用户登录」方案设计 3.1 架构 ? 用户登录架构 「用户登录」方案架构如上图所示,将所有登录相关功能抽象到 「service 层」(本项目将其命名为session),供 「业务层」 调用。 本文主要讲述的是service层的架构,对于业务层的逻辑实现并没有多加累赘。下列表格以程序端为例,简述了「静默登录」和「用户登录」整套方案的前后端逻辑实现。 业务场景 用户感知 前端处理逻辑 后端处理逻辑 补充说明 扫码搜索等各种方式进入程序 无 1、判断:当前程序是否缓存了登录态auth-token 且使用wx.checkSeesion检查当前用户在程序中登录态是否过期

    2.9K40发布于 2021-06-08
  • 来自专栏web秀

    mpvue程序架构搭建详细介绍

    前言 mpvue程序框架搭建很容易,官网提供vue init mpvue/mpvue-quickstart my-project, 很迅速的创建项目,但是想要结合业务等,还是要废一番功夫,今天来学学wx.request 的封装,mpvue的重构,如何搭建好用的mpvue程序架构吧 image.png 创建项目 由于国内npm镜像慢的原因,考虑先把npm切到淘宝镜像。 mpvue/mpvue-quickstart mpvue-project 安装依赖 cd mpvue-project npm install npm run dev 到这里,你的项目已经能跑起来了,可以打开小程序调试工具预览效果 /baseApi' 图片这样的好处是,图片都不用打包到项目里面了,减少了程序的体积,本身程序体积有限。

    1K30发布于 2019-09-04
  • 来自专栏『学习与分享之旅』

    微信程序-双线程渲染模型

    微信程序线程渲染模型 程序的运行环境分成渲染层和逻辑层: WXML 模板和 WXSS 样式工作在渲染层,通过 WebView 进行渲染 程序会为每一个界面都创建一个 WebView 来渲染这个页面 JS 脚本工作在逻辑层,通过 JsCore 线程运行 JS 脚本 这两个线程的通信会经由微信客户端做中转 官方文档:https://developers.weixin.qq.com/miniprogram /dev/framework/quickstart/framework.html#渲染层和逻辑层 微信程序线程模型是如何执行的 总结

    62110编辑于 2023-05-18
  • 来自专栏腾讯技术工程官方号的专栏

    微信程序基础架构浅析

    那么程序是通过怎样的设计来改进 JS-SDK 的体验和管控上的不足? 程序线程架构 具体实现上程序采用了类 web + 离线包的形式。开发上与 web 类似,门槛较低,开发效率较高。 程序web+离线包模式 程序架构方面最大的特点是采用了双线程的开发模式,隔离了 JS 逻辑和 UI 渲染。 程序的渲染层和逻辑层分别由 2 个线程管理:渲染层的界面使用了 WebView 进行渲染,逻辑层采用 JsCore 线程运行 JS 脚本。 程序线程架构 JS 逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的 DOM API 和 BOM API,无法操作页面元素,能达到管控的目的,但也限制了开发者的权限: 不允许开发者把页面跳转到其他在线网页 参考文档 程序官方文档 程序原理及 RN 与 Flutter 的对比 React-Native 与程序的底层框架比较 多端程序原理分析 程序架构设计(一) 程序架构设计(二) 腾讯程序员视频号

    3.4K20发布于 2021-06-10
  • 来自专栏腾讯开源的专栏

    Westore -更好的程序项目架构

    随着程序承载的项目越来越复杂,合理的架构可以提升程序的扩展性和维护性。 把逻辑写到 Page/Component 是一种罪恶,当业务逻辑变得复杂的时候 Page/Component 会变得越来越臃肿难以维护,每次需求变更如履薄冰, westore 定义了一套合理的程序架构适用于任何复杂度的程序 贪吃蛇案例 游戏截图: 设计类图: 图中浅蓝色的部分可以在程序贪吃蛇、小游戏贪吃蛇和Web贪吃蛇项目复用,不需要更改一行代码。 在程序中,通过 setData 改变视图。 所以没使用 westore 的时候经常可以看到这样的代码: 使用完 westore 之后: this.data.a.b[1].c = 'f'this.update() 小结 从目前来看,绝大部分的程序项目都把业务逻辑堆积在程序

    1.7K20发布于 2021-09-29
  • 来自专栏CnPengDev

    程序 | 3-架构和配置

    p=7 整理 1 配置 程序的很多开发需求都是通过配置文件来实现。这样可以提高开发效率且能保证程序的基础风格一致。 配置文件的类型如下: 配置文件名称 说明 project.config.json 项目配置文件,如项目名称、appid 等 sitemap.json 程序内搜索相关的配置 app.json 全局配置 1.4.1 页面配置 1.4.2 自定义编译模式 我们在 app.json 中指定了程序首页为 about 页面: { "pages":[ "pages/about/about", "pages/index 主要步骤如下: 2 程序的双线程模型 微信客户端是程序的宿主。宿主提供了执行程序的各种文件:wxml 文件、js 文件、wxss 文件。并为程序提供了双线程模型。 WXML 模板和 WXSS 样式运行与渲染层,渲染层使用 WebView 线程渲染(一个程序有多个页面,会使用多个 WebView 的线程)。

    75130发布于 2021-04-26
  • 来自专栏小程序

    程序的底层架构设计

    程序的底层架构设计一、引言程序(Mini Program)是一种无需安装即可使用的轻量级应用,广泛应用于微信、支付宝、百度等生态系统中。 二、程序的底层架构概览程序的底层架构通常由**客户端(前端)、宿主环境(如微信、支付宝)、服务端(后端)**三部分组成。 三、程序的核心架构设计1. 双线程架构程序采用 WebView 渲染层 + JavaScript 逻辑层 的双线程架构,确保界面渲染与业务逻辑解耦,提高性能。 五、总结程序的底层架构主要由 双线程架构、WebView 渲染、JSBridge 通信、数据管理、API封装 等模块组成。这些设计确保了程序高效、轻量、跨平台运行,并通过优化策略提升了用户体验。 六、推荐参考资料微信程序官方文档 - 深入了解程序架构和 API。程序性能优化指南 - 介绍程序在高并发和大流量情况下的优化策略。

    1.1K00编辑于 2025-02-21
  • 来自专栏腾讯Bugly的专栏

    一起脱去程序的外套 - 微信程序架构解析

    导语 微信程序的公测掀起了学习程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,程序给开发者带来了很多惊喜。通过这篇文章和大家一起分析程序架构,分享开发经验。 预先额外加载一个WebView 当打开指定页面时,用默认数据直接渲染,请求数据回来时局部更新 返回显示历史View 退出程序,View状态不销毁 4、程序入口 扫码进入程序 搜索程序 程序发送到桌面 (Android) 发送给朋友 二、程序架构 微信程序的框架包含两部分View视图层、App Service逻辑层,View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用 ,它们在两个线程里运行。 IOS - JSCore Android - X5 JS解析器 DevTool - nwjs Chrome 内核 1、App Service - Binding 数据绑定使用 Mustache 语法(大括号

    3.5K30编辑于 2023-04-02
  • 来自专栏小孟开发笔记

    微信程序单指拖拽和指缩放旋转

    程序单指拖拽和指操作是一个比较常用的功能,效果如下图 实现这三个功能,主要用三个触摸事件touchstart、touchmove、touchend <view style="height: 100vh this.setData({ translateX: onePageX - startMove.x, translateY: onePageY - startMove.y }) } <em>双</em>指缩放 <em>双</em>指缩放的原理是根据两点坐标求出距离(勾股定理),然后在用移动坐标的距离比就可以求出缩放倍数 touchmove touchMove(e) { const touches = e.touches == 2这个判断的原因是防止图片跳动,因为如果你两个手指触摸,然后离开一个手指,我是禁止拖拽的,只有<em>双</em>指都离开后再次触摸才能单指拖拽 <em>双</em>指旋转 <em>双</em>指旋转的原理是根据三角函数求出起始点的角度,然后再求出移动坐标的角度 developers.weixin.qq.com/s/0nS1tImU7Rs5 H5原理一致,只需改一下语法即可 我这个只是基础版本,如果需要一些边界控制和还一些需求的限制,计算据边框距离即可,也可以用<em>小</em><em>程序</em>的

    3.8K31编辑于 2023-03-07
  • 来自专栏前端架构与工程

    理解微信程序的双线程模型

    这是为什么程序不直接用浏览器的线程模型,非要自己弄一套双线程模型最主要的两个原因。 那什么是程序的双线程模型呢? (任何新技术或架构都是为了解决特定的问题,所以有必要了解程序的主要技术需求。) 所以最终程序采用了一种混合的架构模式:使用 Webview 渲染 UI、使用类似Web Worker 的独立线程运行逻辑,这就是双线程模型。 可以概括地说,双线程模式是受限于浏览器现有的进程和线程管理模式之下,在程序这一具体场景之内的一种改进的架构方案。 通过了解程序线程模型的背景、设计、通信,希望能够让大家更深入地理解程序的底层架构,如果在后续工作中有类似场景的需求也可以作为借鉴。

    3.4K50发布于 2021-05-19
  • 来自专栏用户6117737的专栏

    微信程序的技术架构特点

    程序用JavaSciipt语言、xML、CSS语言编写程序代码,写程序代码几乎与’Web前端开发完全一样,一个有经验的Web前端程序员只需要花费半小时就能快速上手程序开发,但程序并不是标准化的H5 +CSS3+JavaScript架构,它和Web架构基于的W3C规范没有任何关系,程序使用腾讯全新定义的技术规范和架构,是微信自有的。 类框架等都不能在程序里使用。 程序要获得更好的位置资源确实不易。微信对比浏览器,缺少了域名指向,这让程序的分发模式又丧失了一种可能性。     现在来看,程序的人口平台可能会出现在微信首页的导航按钮栏、发现页面或聊天页面。 除此之外,大量程序的分发将会集中在微信的搜索结果里,如何设置程序的搜索标签属性,让程序得到更多的展示机会,这会涉及很多的规范性要求,这将会是微信程序运营者重点思考的问题。    

    6K40发布于 2019-09-04
  • 压测实战 | 程序商城“ 11”的压测实践

    在 2024 11 年度大促前夕,为了保障重要营销活动洪峰流量下的系统稳定性,该企业技术团队携手优测云服务平台需要对官方程序商城展开全链路压测。 今天,我们就以本项目的实践为例,分享下程序电商大促场景的压测方法与实践。 压测方法与实践 1. 首先,基于程序商城历史真实的流量(PV)和访客数据(UV),我们梳理出模型预测(预估方法可参考下图)。 结语 作为珠宝行业数字化转型的先锋,该企业程序 11 这一关键节点,为消费者打造流畅愉悦的购物体验。 这场 “流量洪峰” 前的实战演练,不仅保障了核心系统的稳定性,更沉淀出可复用的程序零售场景性能优化实践,以持续护航零售体验的数字化跃迁。

    1.3K10编辑于 2025-03-19
  • 来自专栏Technology Share

    一起脱去程序的外套和内衣:微信程序架构解析

    对Web前端架构、.NET架构有丰富的经验。 微信程序的公测掀起了学习程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,程序给开发者带来了很多惊喜。 通过这篇文章和大家一起分析程序架构,分享开发经验。 预先额外加载一个WebView 当打开指定页面时,用默认数据直接渲染,请求数据回来时局部更新 返回显示历史View 退出程序,View状态不销毁 4、程序入口 扫码进入程序 搜索程序 程序发送到桌面 (Android) 发送给朋友 二、程序架构 微信程序的框架包含两部分View视图层、App Service逻辑层,View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用 ,它们在两个线程里运行。

    11.1K64发布于 2017-01-10
  • 来自专栏腾讯IMWeb前端团队

    腾讯专家讲座|微信程序架构解析!

    来源:微信公众号:Coding学院(ID:ke-coding) 目录 ---- 一、程序介绍和演示 二、程序架构 三、程序视图层 四、程序逻辑层 五、程序开发经验 正文 ---- 一、程序特点 二、程序架构 三、程序视图层 1.View - WXML WXML(WeiXin Markup Language) 支持数据绑定 支持逻辑算术、运算 支持模板、引用 支持添加事件(bindtap 五、程序开发经验 程序可以借鉴的优点 1、提前新建WebView,准备新页面渲染。 2、View层和逻辑层分离,通过数据驱动,不直接操作DOM。 3、使用Virtual DOM,进行局部更新。 程序存在的问题 1、程序仍然使用WebView渲染,并非原生渲染 2、需要独立开发,不能在非微信环境运行。 3、开发者不可以扩展新组件。 9、程序无法打开页面,无法拉起APP。 本期Coding讲堂特邀嘉宾:腾讯前端高级开发工程师 渠宏伟 为你揭开微信程序的神秘面纱 报名方式:点击文章最下方阅读原文或。

    2.1K20编辑于 2022-06-29
  • 来自专栏极乐技术社区

    程序10月研究报告:京东、滴滴巨头微信入口程序化,生态竞争升级

    面对几大互联网巨头不断完善程序生态的情况,姗姗来迟的美团程序也于10月份上线,推动程序生态竞争再升级。 滴滴在微信入口正式程序化,微信支付“十二宫格”全部升级为程序 本月,滴滴出行将微信支付十二宫格位置升级为程序,微信支付十二功能全部升级为程序,目前十二宫格所涉及的程序均在阿拉丁TOP100榜单 程序成为服务承载的主要形式,程序势能持续释放。 ? 能力的程序扶持计划》,进一步推动QQ程序生态发展。 阿拉丁程序10月成长榜TOP50程序 网络购物类程序一枝独秀,双十一大促前夕程序电商蓄势待发 10月阿拉丁指数成长榜TOP50的替换率为90%,成长榜头部的程序依旧替换率很高,同时我们看到有10%

    1.8K41发布于 2019-11-12
领券