文首發于『阿里云 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課程：阿里云大學——開發者課堂（點擊下面“了解更多”）