文首发于『阿里云 IoT 开发者社区』，更多精彩物联网内容欢迎前往浏览。

智能家居可谓是今年物联网的热门领域，通过智能单品和智能音箱，人们已然把『智能』两个字变成了生活的理所应当。搭建云上之家除了买买买，还能 DIY。依托阿里云物联网平台，我们用 30 行代码来搞定一套智能家居解决方案。

常见的智能家居解决方案包括了设备端、上云、应用端三大部分，更广的还涉及大数据及人工智能。传统的物联网开发非常强调流程性，即设备端、云、应用端三个步骤需要依次进行。而今天，依托于阿里云物联网平台的『物模型』基础，物联网开发的两端可以齐头并进，节省大量的人力物力成本。

齐头并进显然很诱人，但是能否再更进一步，一人 Handle 全部开发呢？答案是 YES！

目前，有大量互联网开发者由于缺乏嵌入式开发能力，如C/C++语言基础，止步于物联网蓝海的大门。通过阿里云 IoT 提供的 TinyEngine 引擎，可以快速使用 Javascript 进行设备端开发，完美解决这部分开发者的心头大患。而针对不熟悉前后端开发的嵌入式开发者，阿里云物联网平台一样提供了『可视化搭建应用』等快速上手的功能，零代码实现应用开发，大大减轻学习负担。

下面我们就使用阿里云物联网开发平台的 TinyEngine 引擎和可视化搭建功能，30 行代码快速开发一个由灯和温湿度计组成的智能家居系统。

一、开通服务

首先，申请阿里云账号，并开通登陆 Link Develop 一站式开发平台：https://linkdevelop.aliyun.com。

之后，新建项目（项目名任意）—— 设备开发 —— 新增产品 —— 所属分类按需选择『灯』或『温湿度计』，通讯方式选择 WiFi ，数据格式选择Alink —— 完成。

完成后选择『设备开发』标签页 —— 新增调试设备，记录下设备三元组。

二、设备开发

打开嵌入式 Javascript 在线工作台（没错，开发环境都不用搭建），创建新项目。替换 index.js代码：

1. 灯

var deviceShadow = require('deviceShadow');
var ledHandle = GPIO.open("led1");
deviceShadow.bindDevID({
 productKey: "",
 deviceName: "",
 deviceSecret: ""
});
function main(err){
 if(err){
 console.log("连接平台失败");
 }else{
 console.log("主程序开始");
 deviceShadow.addDevSetPropertyNotify("LightSwitch", function (lightStatus) {
 GPIO.write(ledHandle, 1-lightStatus);
 });
 var mainLoop = setInterval(function () {
 var ledStatus = GPIO.read(ledHandle);
 deviceShadow.postProperty("LightSwitch", 1-ledStatus);
 }, 2000);
 }
}
deviceShadow.start(main);

2. 温湿度计

var deviceShadow = require('deviceShadow');
var shtc1 = require('shtc1');
var handle = new shtc1('shtc1');
var ledHandle = GPIO.open("led");
deviceShadow.bindDevID({
 productKey: "a17vi82MmxP",
 deviceName: "0001",
 deviceSecret: "tYUngSMqYeDxODgtX3DNKkQ7920I3t4T"
});
function main(err) {
 if (err) {
 console.log("连接平台失败");
 } else {
 console.log("主程序开始");
 var mainLoop = setInterval(function () {
 var val = handle.getTempHumi();
 console.log('shtc1:temp=' + val[0] + ' humi:' + val[1]);
 deviceShadow.postProperty("CurrentTemperature", val[0]);
 deviceShadow.postProperty("RelativeHumidity", val[1]);
 }, 2000);
 }
}
deviceShadow.start(main);

将设备连接至电脑，点击『连接』并『运行』，设备启动后会自动加载并运行index.js这个文件，同时上报数据至阿里云物联网平台。

三、应用开发

既然是系统，没有应用可不行，我们利用可视化搭建功能 0 代码快速完成一个应用，只需依次拖入仪表盘和开关组件，替换图片，绑定设备即可完成全部操作。

齐活，短短 30 行代码搭建出的端到端智能家居系统就完成了，保存发布后就可以分享给他人访问了。

配合的 TinyEngine 引擎和可视化搭建，开发者无需学习新的编程语言，即可无缝快速切入物联网开发，也彰显了阿里云物联网平台的包容性和独创性。各位开发者，赶紧丢掉犹豫，上手试试吧！https://linkdevelop.aliyun.com

作者：cxlwill

户投诉不断，本地却无法重现？

页面加载较慢是用户经常会反馈的问题，也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间，主要原因如下：

1. 页面是在用户端的浏览器上加载执行，复现困难

• 页面上线前，开发同学都会进行测试，在测试环境下页面加载一般都是正常的才会正式上线。用户在访问页面时，页面的加载是在用户端的浏览器上进行的，由于页面的加载耗时与地域、网络情况、浏览器或者运营商等有关系，想知道用户在访问页面时的具体情况，复现是非常困难的。

1. 监控信息缺少，导致无法深入排查

• 大部分前端监控会通过PerformanceTiming对象，获取完整的页面加载耗时信息，但这类监控就缺失了页面静态资源的加载情况，无法直接复现现场，从而无法深入定位性能瓶颈。

为了方便用户更快地定位性能瓶颈，阿里云ARMS前端监控推出一新功能: 会话追踪，提供页面静态资源加载的性能瀑布图，根据页面性能数据可深入定位页面资源加载情况。

如何通过会话追踪帮助你快速定位问题

在阿里云ARMS前端监控SDK上将sendResource配置为true，重新部署应用后，在页面onload时会上报当前页面加载的静态资源信息。从而在阿里云前端监控平台即可以对慢页面加载问题快速进行定位。

SDK配置

在阿里云ARMS前端监控SDK部分，默认是不上报页面加载的静态资源信息的，如果想获取页面加载的静态资源信息，只需在SDK的config部分将sendResource配置为true，重新部署后，就可以上报相关信息。具体配置如下：

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f63543da641",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

注意：静态资源加载信息的上报是在页面onload时会触发，上报信息量较大，如果对于页面性能要求很高的应用，可以不开启该配置。

问题排查过程

1. 发现问题

进入访问速度菜单后，发现页面的性能较差，11点钟的页面完全加载时间达到35s，如下：

2. 慢页面会话追踪

在慢页面会话追踪模块，提供该页面在指定时间段内加载较慢的TOP20，这样可以快速发现哪些会话加载较慢，如下图所示。

在该模块，你可以快速发现在11点钟有一次会话的页面加载时间在36.72s，这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。

其中在在模块有7次会话访问的页面加载时间在7s以上，点击对应的页面，可以直接进入到会话详情页面，从而直观查看页面静态资源加载的瀑布图。

通过页面资源加载的瀑布图，可以快速定位到资源加载的性能瓶颈，同时可以查看本次访问的客户端IP地址、浏览器、操作系统等UA信息，从而进一步确认是由于网络原因还是其他原因导致的，针对性进行相应的优化。

3. 其他发现问题入口

会话追踪

也可以进入“会话追踪”菜单，可以看到该应用下的会话列表。会话列表中会根据页面完全加载时间排序，展示TOP100，帮助用户可以快速发现耗时较长的会话信息。同时支持按照页面、会话Id、浏览器、浏览器版本号进行过滤，展示相关的会话信息。点击操作后，是该会话的页面资源加载详情。

访问明细

如果当前会话列表中无法找到你要排查的会话信息，可以通过访问明细查找到相应的日志详细信息，在param中找到对应的sid即会话Id，然后在会话列表中查找相应的会话Id，即可以定位到想排查的会话信息。

例如：在已知用户的客户端IP的情况下，想定位相应的会话信息，即可以在访问明细中，通过t=res and 117.136.32.110 进行搜索，找到对应的会话Id。

根据查找到的会话Id, 就可以在会话列表中进行过滤，定位到具体的会话内容。

使用入口指南

1. 进入访问速度菜单，如果发现页面性能较差，可以在"慢页面会话追踪Top20"中查看访问较慢的会话情况

• 点击详情后，可以查看具体的页面资源加载瀑布图
• 如果Top20不满足，可以点击"更多"，从而进入"会话列表"

1. 进入会话追踪菜单，展示的是TOP100的会话列表信息，根据页面完全加载时间从高到底排序，排查页面资源加载情况

至此，慢页面会话追踪功能及使用方法介绍完成。该功能可以帮助你复现用户在访问页面时的页面资源加载情况，快速定位性能瓶颈问题。

附录

• 官网文档介绍

https://help.aliyun.com/document_detail/58655.html

• 阿里云ARMS前端监控官网

https://arms.console.aliyun.com

作者：中间件小哥

么是HTML？

HTML： 超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

§ HTML 是用来描述网页的一种语言。

§ HTML 不是一种编程语言，而是一种标记语言

§ 标记语言是一套标记标签 (markup tag)

§ HTML 使用标记标签来描述网页

§ HTML 文档包含了HTML 标签及文本内容

§ HTML 文档也叫做 web 页面

§ HTML 文件后缀可以是 .html 或者 .htm，二者没有区别，都可以使用

超级文本标记语言的定义又是什么？

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML特点：超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

§ 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

§ 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

§ 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

§ 通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

更多html课程：阿里云大学——开发者课堂（点击下面“了解更多”）