求助，为什么小程序首次加载要很久，一直白屏_百度知道
求助，为什么小程序首次加载要很久，一直白屏
我有更好的答案
因为需要下载和安装。这些和真实安装软件是一回事啊。也不能排除你手机硬件性能不行。网络不稳定等等因素。
采纳率：71%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。> 博客详情
摘要: 介绍小程序开发从注册账号到上线的整个过程
1.1. 申请账号
注册所填写信息：
身份证姓名
身份证号（一个身份证号码只能注册5个小程序）
手机号（一个手机号码只能注册5个小程序）
扫码绑定一个微信账号为管理者
不同主体类型间的区别如下：
如何选择主体类型，参加。
注册成功后进入后台，通过菜单“设置 - 开发设置”得到小程序对应的 AppID（小程序身份标识），同时后台拥有的其它功能如：管理小程序权限、查看数据报表、发布小程序等。
1.2. 安装开发者工具
下载地址：
该工具集成了公众号网页调试和小程序调试两种开发模式：
使用公众号网页调试，开发者可以调试微信网页授权和微信 JS-SDK 等功能。
使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
关于该工具的详细介绍，请。
1.3. Hello World
打开开发者工具，选择小程序；
项目配置：
在左侧的模拟器中，单击“获取头像昵称”，将得到当前开发者工具已登录微信账号对应的头像、昵称。
注意：因为没有填写 AppID，所以开发者工具有一些功能限制，比如上图右上角中“预览”、“远程调试”等按钮是灰色。
2. 基本项目结构
通过上一步创建的快速预览项目，我们可以看到，小程序主要由 *.json、*.js、*.wxss、*.wxml 四类文件组成，详细的说明见下文。
文件扩展名：*.json
主要实现一些静态配置的功能，分为以下 3 类：
根目录下的 app.json
对当前小程序的全局配置，包括：所有页面路径、界面表现、网络超时时间、底部 tab 等，。
根目录下的 project.config.json
对当前开发者工具的配置，界面颜色、编译配置等，。
[page].json
存在于每个页面（模块）对应的目录底下，用于配置每个页面的独立属性，。
文件扩展名：*.wxml
WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。其相当于 HTML，但是在 div、p、span 这些标签的基础上，做了一些封装，添加了一些类似 wx:if 的属性表达式等，以实现更多的功能，。
基本特性简介：
由开始标签和结束标签组成，而且必须严格闭合，比如 &view&&/view&；
标签可以拥有属性，格式 key=&value&，大小写敏感；
所有组件的共同属性如下：
数据绑定功能，通过 {{变量名}} 来绑定 wxml 文件对应 js 文件中的 data 对象属性；
变量名大小写敏感；
没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中；
在 {{ }} 内进行简单的逻辑运算
条件逻辑 wx:if=&{{condition}}&
列表渲染 wx:for=&{{array}}&
模版 &template name=&&&...&/template&
引用其它文件
文件扩展名：*.wxss
WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，相当于 CSS，但是做了一些扩充和修改，：
根目录下 app.wxss 为项目公共样式，各页面共用，其它 *.wxss 适用于具体页面；
新增了尺寸单位 rpx（responsive pixel）;
rpx 的换算是以 375 个物理像素为基准，也就是在一个宽度为 375 物理像素的屏幕下，1rpx = 1px。
推荐以 iPhone6 屏幕（宽度为 375px，共 750 个物理像素）为设计基准，此时 1rpx = 375 / 750px = 0.5px
引用其它样式文件 @import './test.wxss'
仅支持部分 CSS 选择器：
样式的权重遇 CSS 类似，从大到小为 !important & style=&& & #id & .class & element
官方样式库：
文件扩展名：*.js
小程序的主要开发语言是 JavaScript ，开发者使用它响应用户操作、开发业务逻辑，以及调用来完成业务需求。
ECMAScript 是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。
ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：
JavaScript 实现形式对比：
小程序中的 JavaScript 是由 ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的 JavaScript 相比，没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto 这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和 NPM 包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。
小程序的执行的入口文件是 app.js，并且会根据其中 require 的模块顺序决定文件的运行顺序。
当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行。
3. 执行流程
通过 app.json 中配置的第一个页面为小程序的首页。
客户端装载页面代码，并通过底层一些机制，将页面渲染出来。
4.1. 设置用户身份
对于一个由团队开发的小程序项目，给每个参与人员设置不同的身份权限是十分必要的，通过后台菜单 用户身份 - 成员管理 进行设置，不同权限的区别如下：
4.2. 测试预览
使用开发者工具，如下操作：
提示：如果创建项目的时候，没有填写 AppID，该按钮是灰色不可用。
4.3. 上传代码及发布上线
同样通过开发者工具，单击右上角的“上传”按钮，确定上传并填写以下两个字段：
必填，仅限字母、数字，如 v1.0.0
非必填，是对本次上传对特别说明信息。
上传成功后成为【开发版】，小程序管理员可在后台将本次上传设置为【体验版】，或提交审核成为【审核中版本】，审核通通过后，可发布小程序，成为【线上版】，具体流程如下：
【开发版】只保留每人最新上传的一份代码，可随意删除，不影响审核版和线上版。
只能由一份代码处于【审核版】，有审核结果后，可发布上线或重新提交审核。
【线上版】会被每次发布的新版本覆盖。
可扫描下面的二维码，通过小程序开发者助手快捷的体验以上各版本。
5.1. 查看小程序运营数据
方式一：登录，打开菜单“数据分析”；
方式二：微信扫描下面对二维码，使用小程序数据助手工具
5.2. 相关资源
持续更新地址：
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥研究首屏时间？你先要知道这几点细节 - WEB前端 - 伯乐在线
& 研究首屏时间？你先要知道这几点细节
做移动web页面，受移动网络网速和终端性能影响，我们经常要关注首屏内容展示时间（以下简称首屏时间）这个指标，它衡量着我们的页面是否能在用户耐心消磨完之前展示出来，很大程度影响着用户的使用满意度。
怎么获取首屏时间呢？
我们经常要先问自己：页面是怎么加载数据？
A：加载完静态资源后通过ajax请求去后台获取数据，数据回来后渲染内容
在每个点打上一个时间戳，首屏时间 = 点8 – 点1；
B：使用后台直出，返回的html已经带上内容了
此时首屏时间 = 点4 – 点1。
注：1. 打了这么多个点，是因为当我们收集到首屏时间之后，要去分析到底是哪一段是性能瓶颈，哪一段还有优化空间，所以我们需要收集 点2 – 点1、点3 – 点1 ……这些时间以作分析；
2. 打点1我们一般是在html文件head标签的开头打个时间戳；
3. 在css文件加载前一般没有别的加载处理，所以打点1和打点2一般可以合并。
到此我们就收集到首屏相关各种数据，可以做各种针对性优化。Wait！在你大刀阔斧优化前，你要了解一些细节，它们有利于你做更准确的分析和更细致的优化。
细节1：js后面的点 – js前面的点 ≠ js的加载时间
JsEndTime – JsStartTime = js文件的加载时间，对吗？
不对！明显地，这个等式忽略了js的执行时间。js执行代码是需要花费时间的，特别是做一些复杂的计算或频繁的dom操作，这个执行时间有时会达到几百毫秒。
那么，JsEndTime – JsStartTime = js文件的加载执行时间？
依然不对！因为CSS文件的加载执行带来了干扰。觉得很奇怪对吧，别急，我们来做个试验：我们找一个demo页面，在chrome里面打开，然后启动控制台，模拟低网速，让文件加载时间比较久：
先在正常情况下收集 JsEndTime – JsStartTime 的时间，然后使用fiddler阻塞某一条css请求几秒钟：
然后再恢复请求，拿到此时的 JsEndTime – JsStartTime 结果，会发现第一次的时间是几百毫秒将近1s，而第二次的时间低于100ms甚至接近为0（我的示例，时间视读者具体的js文件决定），两者的差距非常明显。
这是什么原理？这就是我们常说的”加载是并行的，执行是串行的“的结果。html开始加载的时候，浏览器会将页面外联的css文件和js文件并行加载，如果一个文件还没回来，它后面的代码是不会执行的。刚刚我们的demo，我们阻塞了css文件几秒，此时js文件因为并行已经加载回来，但由于css文件阻塞住，所以后面 JsStartTime 的赋值语句是不执行的！当我们放开阻塞，此时才会运行到 JsStartTime 的赋值、js文件的解析、JsEndTime的赋值，由于大头时间加载早已完成，所以 JsEndTime 和 JsStartTime 的差值非常小。
知道这个有何用？
别再把 JsEndTime – JsStartTime 的结果成为js文件的加载执行时间（除非你没有外联css文件），不然会被内行人取笑滴；
css文件的阻塞会影响后面js代码的执行，自然也包括html代码的执行，即是说此时你的页面就是空白的。所以css文件尽量内联，你可以让构建工具帮你忙；
如果真想要知道js文件的加载时间，最正确的姿势是使用 Resource Timing API，不过这个API移动端只能在Android4.4及以上的版本拿到数据，也就在业务PV大的场景才够我们做分析用
当然，那两个打点留着还是可以做分析用的。
细节2：html里面外联的js文件，前一个文件的加载会阻塞下一个文件的执行；而如果a.js负责渲染并会动态拉取js、拉取cgi并做渲染，会发现它后面的js文件再怎么阻塞也不会影响到它的处理
前半部分的结论在细节1里面已经证明，因为浏览器的执行是串行的。这说明，我们负责渲染内容的js代码要等到它前面所有的js文件加载执行完才会执行，即使那些代码跟渲染无关的代码如数据上报：
而后半部分的结论很好验证，我们在负责渲染的js文件后面外联一个别的js文件并把它阻塞住，你会发现渲染相关的js不管是动态拉取新的js文件、拉取渲染相关内容都一切正常，页面内容顺利渲染出来，它们的执行并不需要等被阻塞的这个文件。
知道这个有何用？
无关紧要”的js不要放在负责渲染的js前面，这里的“无关紧要”是指和首屏渲染无关，如数据上报组件。我们可以选择将要上报的数据临时存起来，先继续执行渲染的js，等负责渲染的js执行完再加载上报组件再上报。甚至连zepto之类的库我们也可以放后面，把渲染相关的代码抽离出来并用原生js书写，放到最前面；
可以看到，动态加载的js的执行是不会受到html后面外联的js的阻塞的影响，即是说，它的执行和后面js的执行顺序是不确定的。因此我们要小心处理好文件的依赖关系。当然还可以采用最不容易出错的方法：负责动态加载js的文件是html里面外联的最后一个文件
（注：个人觉得这是全文最重要的两点结论，因为我正在做首屏优化^-^）
细节3：如果html的返回头包含chunk，则它是边返回边解析的，不然就是一次性返回再解析。这个是在服务器配置的
打点1一般写在html里head标签的最前面，时常有朋友拿直出时的 点4 – 点1 的时间和非直出时 点8 – 点1 的时候做对比，来说明直出优化了多少多少毫秒，我倒觉得不一定。要知道直出的情况html文件包含渲染后的内容和dom节点，文件大小一般比非直出大，有时甚至大个几十K都有，那我觉得要说明直出优化了多少就要把html的加载时间考虑进去了。那上面的计算方法是否考虑上html的加载时间？
那就要看html文件的返回头是否包含chunk：
如果包含这个返回头，那html文件是边返回边解析的，此时上面的计算方法是合理的。如果不包含这个头，则html文件是整一个返回来后才开始解析，此时上面的计算方法就少算了html的加载时间，也就不够精准。这个返回头是由后台控制的。
知道这个有何用？
如果我们想说明直出的优化程度，最好先瞧瞧你的html返回头。如果不包含chunk返回头，考虑拿HTML5 performance里面的 navigationStart 作为打点1（这个API也是Android4.4及以上才支持），要不就要评估文件大小变化做点修正了；
对于没有启用chunk的html，建议不要inline太多跟渲染首屏内容无关的js在里面，这样会影响渲染时间
细节4：写在html里面的script节点的加载和解析会影响 domContentLoaded 事件的触发时间
我们有时会用 domContentLoaded 事件代替 onload 事件，在页面准备好的时候做一些处理。然而要知道，domContentLoaded里面的dom不止包含我们常说的普通dom节点，还包括script节点。
试验一下，我们将页面里面外联的一个js文件阻塞住一段时间再放开，我们看下chrome控制台：
很明显，js文件的加载时间会影响这个事件的触发事件。那js代码的解析时间会不会影响？我们在最后一个外联js文件后面打了一个点，它的时间是：
所以js文件加载执行会影响domContentLoaded事件的执行时机。
知道这个有何用？
如果我们打算在domContentLoaded、onLoad 事件里面做一些特殊处理且这些处理比较重要（如跟渲染有关），那我们最好就不要在html里面直接外联一些跟渲染无关的js文件，可以考虑改用动态加载
研究首屏时间和资源加载是一件挺有意思的事情，大家利用好chrome控制台（特别是里面的network标签）以及fiddler可以挖掘出很多有趣的小细节小结论。别以为这是在没事找事，理解好这些对大家做首屏性能优化、定位因为js文件执行顺序错乱导致报错等场景是非常有好处的。所以发现什么记得与我共享哈~
可能感兴趣的话题
o 138 回复
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2018 伯乐在线没有更多推荐了，
不良信息举报
举报内容：
微信小程序静态页面的实现
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！}