整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
新的解析順序：不再基于SGML。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
語意化更好的內容元素:article、footer、header、nav、section;
表單控件:calendar、date、time、email、url、search;
input元素的新類型：date, email, url等。
新的技術: webworker, websocket, Geolocation;
新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。
全域屬性：id, tabindex, repeat。
新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新應用程序接口:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，naframes；
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍
那么，前端的應對方案是：
設計稿切出來的圖片長寬保證為偶數，并使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px
.css{font-size:20px}
ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0.X就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}
android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
另外，有些機型去除不了，如小米2
對于按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽
通用
.css{-webkit-appearance:none;}
偽元素改變number類型input框的默認樣式
input[type=number]::-webkit-textfield-decoration-container {
background-color: transparent;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
.css{-webkit-touch-callout: none}
.css{-webkit-user-select:none}
打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>
發短信，winphone系統無效 <a href="sms:10086">發短信給: 10086</a>
寫郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>
應對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
通過transform的3d屬性改去硬件加速可以解決閃屏問題
開啟硬件加速
1）解決頁面閃白
2）保證動畫流暢
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
<input autocapitalize="off" autocorrect="off" />
input::-webkit-input-speech-button {display: none}
盡可能地使用合成屬性transform和opacity來設計CSS3動畫
不使用position的left和top來定位
利用translate3D開啟GPU加速
ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案
可用isroll.js，暫無完美方案
1）PC優化手段在Mobile側同樣適用
2）在Mobile側我們提出三秒種渲染完成首屏指標
3）基于第二點，首屏加載3秒完成或使用Loading
4）基于聯通3G網絡平均338KB/s(2.71Mb/s)，所以首屏資源不應超過1014KB
5）Mobile側因手機配置原因，除加載外渲染速度也是優化重點
6）基于第五點，要合理處理代碼減少渲染損耗
7）基于第二、第五點，所有影響首屏加載和渲染的代碼應在處理邏輯中后置
8）加載完成后用戶交互使用時也需注意性能
[加載優化]
加載過程是最為耗時的過程，可能會占到總耗時的80%時間，因此是優化的重點
因為手機瀏覽器同時響應請求為4個請求（Android支持4個，iOS 5后可支持6個），所以要盡量減少頁面的請求數，首次加載同時請求數不能超過4個
a) 合并CSS、JavaScript
b) 合并小圖片，使用雪碧圖
使用緩存可以減少向服務器的請求數，節省加載時間，所以所有靜態資源都要在服務器端設置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時間戳）
a) 緩存一切可緩存的資源
b) 使用長Cache（使用時間戳更新Cache）
c) 使用外聯式引用CSS、JavaScript
減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、JavaScript等進行代碼壓縮，并在服務器端設置GZip
a) 壓縮（例如，多余的空格、換行符和縮進）
b) 啟用GZip
寫在HTML頭部的JavaScript（無異步），和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，避免在HTML標簽中寫Style，JavaScript放在頁面尾
部或使用異步方式加載
首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會導致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過Media Query加載
大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面。但Loading時間過長，會造成用戶流失
對用戶行為分析，可以在當前頁加載下一頁資源，提升速度
a) 可感知Loading(如進入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁）
圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時在代碼中用Srcset來按需顯示
PS：過度壓縮圖片大小影響圖片顯示效果
a) 使用智圖（ http://zhitu.isux.us/ ）
b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1. webP優于JPG 2. PNG8優于GIF)
e) 選擇合適的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機屏幕一般寬度））
Cookie會影響加載速度，所以靜態資源域名不使用Cookie
重定向會影響加載速度，所以在服務器正確設置避免重定向
第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源
處理不當會阻塞頁面加載、渲染，因此在使用時需當注意
CSS寫在頭部，JavaScript寫在尾部或異步
避免圖片和iFrame等的空Src
空Src會重新加載當前頁面，影響速度和效率
重設圖片大小是指在頁面、CSS、JavaScript等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能
DataURL圖片沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，加載慢耗時長
* 盡量避免寫在HTML標簽中寫Style屬性
* 避免CSS表達式
CSS表達式的執行需跳出CSS樹的渲染，因此請避免CSS表達式
* 移除空的CSS規則
空的CSS規則增加了CSS文件的大小，且影響CSS樹的執行，所以需移除空的CSS規則
* 正確使用Display的屬性
Display屬性會影響頁面的渲染，因此請合理使用
a) display:inline后不應該再使用width、height、margin、padding以及float
b) display:inline-block后不應該再使用float
c) display:block后不應該再使用vertical-align
d) display:table-*后不應該再使用margin或者float
* 不濫用Float
Float在渲染時計算量比較大，盡量減少使用
* 不濫用Web字體
Web字體需要下載，解析，重繪當前頁面，盡量減少使用
* 不聲明過多的Font-size
過多的Font-size引發CSS樹的效率
* 值為0時不需要任何單位
為了瀏覽器的兼容性和性能，值為0時不要帶單位
* 標準化各種瀏覽器前綴
a) 無前綴應放在最后
b) CSS動畫只用 （-webkit- 無前綴）兩種即可
c) 其它前綴為 -webkit- -moz- -ms- 無前綴 四種，（-o-Opera瀏覽器改用blink內核，所以淘汰）
* 避免讓選擇符看起來像正則表達式 高級選擇器執行耗時長且不易讀懂，避免使用
* 減少重繪和回流
a) 避免不必要的Dom操作
b) 盡量改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減少drawImage
* 緩存Dom選擇與計算
每次Dom選擇都要計算，緩存他
* 緩存列表.length
每次.length都要計算，用一個變量保存這個值
* 盡量使用事件代理，避免批量綁定事件
* 盡量使用ID選擇器
ID選擇器是最快的
* TOUCH事件優化
使用touchstart、touchend代替click，因快影響速度快。但應注意Touch響應過快，易引發誤操作
* HTML使用Viewport
Viewport可以加速頁面的渲染，請使用以下代碼
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
* 減少Dom節點
Dom節點太多影響頁面的渲染，應盡量減少Dom節點
* 動畫優化
a) 盡量使用CSS3動畫
b) 合理使用requestAnimationFrame動畫代替setTimeout
c) 適當使用Canvas動畫 5個元素以內使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）
* 高頻事件優化
Touchmove、Scroll 事件可導致多次渲染
a) 使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染
b) 增加響應變化的時間間隔，減少重繪次數
* GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用（PS：過渡使用會引發手機過耗電增加）
a、CSS動畫更為流暢、但內存占用過高，動畫元素在5個以內更為推薦；
b、Canvas動畫存在丟幀現象，這一現象在android中低端手機中表現更為明顯；
c、5個以內動畫元素，選用CSS動畫，80%的設備幀頻可達80以上。
移動自適應的話一般我用的話就是rem，通過rem單位配合媒體查詢來完成幾個屏幕的適配，以iphone6位標準，向上適配plus，向下適配5，不做過多的適配，有時候有要求的話也用js來控制rem的大小達到適配效果，rem是相對單位，相對html元素的font-size值的屬性，比如font-size:100px; 的話1rem就得100px，這樣我子需要通過改變html的font-size就可以達到適配效果
為動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個屬性都會開啟GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU
通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速之后，有些時候可能會導致瀏覽器頻繁閃爍或抖動，可以嘗試以下辦法解決之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
通過-webkit-transform:transition3d/translateZ開啟GPU硬件加速的適用范圍：
使用很多大尺寸圖片(尤其是PNG24圖)進行動畫的頁面。
頁面有很多大尺寸圖片并且進行了css縮放處理，頁面可以滾動時。
使用background-size:cover設置大尺寸背景圖，并且頁面可以滾動時
編寫大量DOM元素進行CSS3動畫時(transition/transform/keyframes/absTop&Left)
使用很多PNG圖片拼接成CSS Sprite時
可以使用after插入的形式將寬度設置為200%，然后通過css transfrom 的scale 縮放0.5倍；
使用 viewport meta 標簽在手機瀏覽器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通過快捷方式打開時全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉
<meta name="format-detection" content="telephone=no" />
使用Media Queries適配對應樣式
all所有設備；
screen 電腦顯示器；
print打印用紙或打印預覽視圖；
handheld便攜設備；
tv電視機類型的設備；
speech語意和音頻盒成器；
braille盲人用點字法觸覺回饋設備；
embossed盲文打印機；
projection各種投影設備；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。
width瀏覽器寬度；
height瀏覽器高度；
device-width設備屏幕分辨率的寬度值；
device-height設備屏幕分辨率的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。
@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}
寬度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}
#wrap img{
max-width:100%;
height:auto;
}
一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。css3引入了新的單位叫做rem,和em類似但對于Html元素，rem更方便使用。em是相對于根元素的，需重置根元素字體大小：
html{font-size:100%;}
完成后，可以定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}
ip6 2、ip6+ 3、nexus5 3
1) 自適應方式
2) viewport方式
3) rem方式
4) scale()方式縮放
避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
為不支持viewport的IE Mobile設定寬度 <meta name="MobileOptimized" content="320" />
是否對手持設備友好 <meta name="HandheldFriendly" content="true" />
強制豎屏 <meta name="screen-orientation" content="portrait" />
強制全屏 <meta name="full-screen" content="yes" />
應用模式 <meta name="browsermode" content="application" />
強制豎屏 <meta name="x5-orientation" content="portrait" />
強制全屏 <meta name="x5-fullscreen" content="yes" />
應用模式 <meta name="x5-page-mode" content="app" />
開啟極速模式 <meta name="renderer" content="webkit" />
啟動webapp功能 刪除工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">
控制狀態欄顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
開啟號碼或郵箱檢測 <meta name="format-detection" content="telephone=no" />
添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png”>
重力感應 DeviceOrientation
手機加速傳感器 DeviceMotion
以Pjax方式實現SPA history.pushState history.replaceState 解決ajax不能后退前進問題
儲存
客戶端儲存：localStorage sessionStorage>只存在一個會話周期內
跨域
postMessage
一般都是我前端這邊開發好h5頁面給安卓和ios一個地址，然后告訴他們我有哪些方法，然后在做一些安卓ios的接口調用，安卓和ios會吧他們的方法提供一個接口給我，我直接調用就好，一般都是調用一些分享，跳轉之類的方法
webapp部分基本都是我自己負責開發，頁面交互都做，因為當時剛去公司的時候公司也剛往這個方向發展，讓我也一直就負責移動業務這塊的內容
用，bootstrap組要就是用一些他的樣式組件，還有最強大的就是他的刪格化系統了，做響應式的網站，我們公司的官網就是用的bootstrap做的，后臺管理系統也是，當時也是我負責給我們公司的后臺分享如何使用bootstrap的
章先介紹一些HTML最基礎的考點，很多大長面試官喜歡由淺入深地考察知識。而對于一些基礎問題的回答，很多同學反而因組織不好語言而給面試官留下不好的印象。本章節我們就帶大家一一整理和回顧。
面試官：我們現在寫HTML代碼第一行通常是
!<DOCTYPE HTML>，請介紹一下DOCTYPE的作用（基礎題）
DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標準來解析這個網頁，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標準。
面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）
文檔的解析模式目前主要有 *兩種（注意：還有一種“準標準模式”只在IE8瀏覽器里，目前主流瀏覽器已無需考慮）：
面試官：如何快速檢查頁面的解析模式？（發散題）
HTML文檔對象有個 compatMode 屬性，用于記錄頁面的解析模式：
BackCompatCSS1Compatconst mode = document.compatMode; // 頁面的解析模式
if (mode === "BackCompat") {
// 渲染模式為混雜模式
}面試官：什么是HTML語義化，語義化的作用是什么？（基礎題）
語義化是指使用恰當語義的html標簽，讓頁面具有良好的結構與含義；比如<p>標簽就代表段落，<article>代表正文內容等等。語義化的作用有兩點：
面試官：你平時有哪些語義化的建議或最佳實踐？（發散題）
根據語義化的優點，對于富文本內容類的網站（如門戶、新聞網站），語義化利于SEO，對網站內容的傳播有很大幫助，此類網站應該重視和實踐語義化標準。而對于一些系統類網站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會影響開發者的效率，此類網站可以對頁面骨架做語義化，至于模塊的交互組件和表單等則無需刻意做語義化。
面試官：你知道HTML5有哪些新增的東西嗎？（基礎題）
HTML5新增的內容確實不少，面試官不會要求你全部記下來，我們可以挑重要的東西來回答：
<header>、<mainer>、<footer>、<section>、<nav>等<font>、<big>、<center> 等<input>的新類型（date、email、url等）、新屬性（autocomplete、autofocus等）<video>（視頻）、<audio>（音頻）等面試官：介紹一下
<meta>標簽的用途 （基礎題）
meta標簽由name和content兩個屬性來定義，來描述一個HTML網頁文檔的元信息，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name
面試官：移動端適配的viewpoint，能否手寫一下？（拓展題）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">面試官：介紹一下
src和href的區別（基礎題）
src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如JS腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，所以一般JS腳本會放在底部而不是頭部。
href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理
面試官：介紹一下
<img>標簽的srcset和sizes屬性的作用（基礎題）
可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源
srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小
sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇
所以，有了這些屬性，瀏覽器會：
sizes 列表中哪個媒體條件是第一個為真srcset 列表中引用的最接近所選的槽大小的圖像<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw"
/>面試官：介紹一下
<script>標簽的defer和async的作用（基礎題）
defer：瀏覽器指示腳本在文檔被解析后執行，<script>被異步加載后并不會立刻執行，而是等待文檔被解析完畢后執行
async：同樣是異步加載腳本，區別是腳本加載完畢后立即執行，這導致async屬性下的腳本是亂序的，對于<script>有先后依賴關系的情況，并不適用
如下圖：藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析
面試官：前端有哪幾種數據存儲方式？（基礎題）
主要的存儲方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優缺點如下：
transaction操作sql，火狐瀏覽器不支持// WebSql操作實例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
// 建表 => 插入 => 刪除
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>數據表已創建，且插入了兩條數據，然后又刪除了第一條。</p>';
document.querySelector('#status').innerHTML = msg;
});面試官：介紹一下webSocket的特點和作用（基礎題）
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。它允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送
本文由博客一文多發平臺 OpenWrite 發布！
EventBridge 是阿里云所推出了一款無服務器事件總線，其目標是拓展事件生態，打破系統間的數據孤島，建立事件集成生態。提供統一的事件標準化接入及管理能力，完善集成與被集成通路，幫助客戶快速實現事件驅動的核心原子功能，可將 EventBridge 快速集成至 BPM、RPA、CRM 等系統。
EventBridge 通過事件標準化，接入標準化，組件標準化三個方向作為支點拓展 EventBridge 事件生態：
在集成領域 EventBridge 重點打造事件集成和數據集成兩類核心場景，下面將圍繞這兩類場景具體展開描述。
目前 EventBridge 已經擁有 80+ 云產品的事件源，800+ 種事件類型。整個事件生態還正在逐步豐富中。
那么，EventBridge 如何實現云產品的事件集成呢？
下面以兩個例子為例，來看下 EventBridge 事件集成的方式。
以 OSS 事件源為例，來講解一下如何集成 OSS 事件。
OSS 事件現在主要分為 4 類，操作審計相關、云監控相關、配置審計相關、以及云產品相關的事件例如 PutObject 上傳文件等等。其他的云產品的事件源也類似，基本都可以分為這幾個類型的事件。
下面演示一下事件驅動的在線文件解壓服務：
一起來看下是如何實現的：
前往下方鏈接查看視頻：https://www.bilibili.com/video/BV1s44y1g7dk/
1）首先創建一個 bucket，下面有一個 zip 目錄用于存放上傳的壓縮文件，一個 unzip 目錄用于存放解壓后的文件。
2) 部署解壓服務，并且暴露公網訪問的地址。
解壓服務的源碼地址為：
https://github.com/AliyunContainerService/serverless-k8s-examples/tree/master/oss-unzip?spm=a2c6h.12873639.article-detail.15.5a585d52apSWbk
也可以使用 ASK 直接部署，yaml 文件地址為：
https://github.com/AliyunContainerService/serverless-k8s-examples/blob/master/oss-unzip/hack/oss-unzip.yaml
3）創建一個事件規則監聽 zip 目錄下的上傳文件的事件，并投遞到解壓服務的 HTTP Endpoint。
這里使用 subject，匹配 zip 目錄。
4）再創建一個事件規則監聽 unzip 目錄的事件，投遞解壓事件到釘釘群。
這里同樣使用 subject，匹配 unzip 目錄。
對于變量和模板的配置可以參考官方文檔 ：
https://help.aliyun.com/document_detail/181429.html。
EventBridge 會通過 JSONPath 的方式從事件中提取參數，然后把這些值放到變量中，最后通過模板的定義渲染出最終的輸出投遞到事件目標。OSS 事件源的事件格式也可以參考官方文檔 ：
https://help.aliyun.com/document_detail/205739.html#section-g8i-7p9-xpk ，并根據實際的業務需要使用 JSONPath 定義變量。5）最后，通過 oss 控制臺上傳一個文件進行驗證。
可以看到剛剛上傳的 eventbridge.zip 已經解壓到并上傳上來了，也可以在釘釘群里面，收到解壓完成的通知。此外，還可以在事件追蹤這邊查看事件的內容已經投遞的軌跡。
可以看到有兩個上傳事件：一個是通過控制臺上傳的事件，一個是解壓文件后上傳的事件。
可以查看軌跡，都成功投遞到了解壓服務的 HTTP Endpoint 以及釘釘機器人。
剛才演示的 demo 是集成云服務的事件源，下面再通過一個 demo 看一下如何通過以自定義事件源以及云產品事件目標的方式集成云產品。
前往下方鏈接查看視頻：https://www.bilibili.com/video/BV1QF411M7xv/
這個 demo 的最終效果是通過 EventBridge 自動進行數據的清洗，并投遞到 RDS 中去。事件內容是一個 JSON，擁有兩個字段一個名字一個年齡，現在希望將把大于 10 歲的用戶過濾出來并存儲到 RDS 中。
整體的架構如圖所示，使用一個 MNS Queue 作為自定義事件源，并通過 EventBridge 過濾并轉換事件最終直接輸出到 RDS 中去。
1）首先已經創建好了一個 MNS Queue，創建好一個 RDS 實例以及數據庫表，表結構如下所示：
2）創建一個自定事件總線，選擇事件提供方為 MNS，隊列為提前創建好的隊列；
創建好了之后，我們就可以在事件源這里看見一個已經正在運行中的事件源；
3）接下來創建規則投遞到 RDS
配置的事件模式內容如下：
{
"source": [
"my.user"
],
"data": {
"messageBody": {
"age": [
{
"numeric": [
">",
10
]
}
]
}
}
}數值匹配可以參考官方文檔：https://help.aliyun.com/document_detail/181432.html#section-dgh-5cq-w6c
4) 點擊下一步，選擇事件目標為數據庫，填寫數據庫信息，配置轉化規則，完成創建。
5）最后，先用 MNS Queue 發送一個消息，這個的 age 是大于 10 的。
可以看見這條事件就輸出到了 RDS 里面了。
下面再發一個小于 10 的消息到 MNS Queue。
這條事件就被過濾掉了，沒有輸出到 RDS。
也可通過事件追蹤查看事件：
可以看到一條事件成功投遞到了 RDS，一條事件被過濾掉了，沒有進行投遞。
事件流是 EventBridge 為數據集成提供的一個更為輕量化、實時的端到端的事件流試的通道，主要目標是將事件在兩個端點之間進行數據同步，同時提供過濾和轉換的功能。目前已經支持阿里云各消息產品之間的事件流轉。
不同于事件總線模型，在事件流中，并不需要事件總線，其 1：1 的模型更加的輕量，直接到目標的方式也讓事件更加的實時；通過事件流，我們可以實現不同系統之間的協議轉換，數據同步，跨地域備份的能力。
下面將通過一個例子講解如何使用事件流，將 RocketMQ 的消息路由到 MNS Queue，將兩個產品集成起來。
整體的結構如圖所示，通過EventBridge 將 RocketMQ 中 TAG 為 MNS 的消息路由到 MNQ Queue。
一起看下怎么實現：
前往下方鏈接查看視頻：https://www.bilibili.com/video/BV1D44y1G7GK/
事件流啟動完成之后，我們就可以通過控制臺或者 SDK 發送消息到源 RocketMQ Topic 里面。當有 Tag 為 mns 的時候，我們可以看見消息路由到了 mns；當有 Tag 不為 mns 的時候，消息就不會路由到 mns。
本篇文章主要向大家分享了通過 EventBridge 如何集成云產品事件源，如何集成云產品事件目標以及通過事件流如何集成消息產品～
作者：李凱（凱易）
原文鏈接：http://click.aliyun.com/m/1000337391/
本文為阿里云原創內容，未經允許不得轉載。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
