電視機頂盒web開發總結，避免踩坑

1.電視機頂盒web開發總結

針對東方有線機頂盒UUTVOS操做系統中內置的聯彤瀏覽器web開發，總結一些本身在開發中遇到的問題和技巧。瀏覽器是基於Firefox的閹割版，因此開發中有一些莫名其妙的坑。已經嘗試過使用Vue開發機頂盒web項目，體驗較差：首次加載時間長、頁面卡頓。因爲項目進度推動，當時沒有嘗試組件懶加載和路由懶加載處理，這樣作或許能夠減小首次加載時間。推薦使用 JQuery 進行開發。

---

1.1採坑預告

• 開發工具：WebStrom。它的Tools>Deployment能夠配置鏈接遠程服務器。隨時上傳代碼。
• 開發中用到的技術：JQuery + Sass。
• 能用 HTML + CSS 呈現的東西，就不要用 JS 去動態控制。
• 避免使用「焦點」事件去觸發非必要的操做。
• 當某段 JS 代碼不運行的時候，試試給它加一個延時函數，遇到的問題都再也不是問題。
• CSS佈局推薦 position:absolute;進行定位，配合 display:inline-block;使用更佳。
• <iframe></iframe>標籤是不兼容的。加載從服務器請求到的 .html 請使用 JQuery 的 .load() 大法。
• overflow:scroll，遙控器按鍵只能往下滾，不能往上滾。
• 切換播放多個視頻，避免UI響應和視頻播放卡頓，「防抖動」你值得擁有。
• gulp 壓縮代碼和圖片，爲首次加載提速，圖片壓縮率達90%，不失真。

1.2開發總結

1.2.1一個WebStrom就夠了 ☞↑

咱們的後臺是現成的，直接把代碼拷貝到服務器上，在機頂盒上就能夠隨時預覽到項目。

• WebStrom 的工具欄中的 Tools>Deployment 能夠鏈接到配置遠程服務器上，每次 CTRL + S 會自動上傳項目文件,好用的不要不要的。牆裂推薦！
• 經過配置 WebStrom，能夠監聽編譯 Sass 文件，CTRL + S 自動編譯就是這麼方便。
• 喜歡 VSCode 的話，何嘗不可，或許 VSCode 裏也有這些功能插件，我沒去折騰罷了。
• 若是在 WS 中使用了 Sass 或者 Less ，每次保存的時候，被編譯後的 CSS 文件是不會自動上傳到服務器上的，須要在 WS 裏手動上傳。

1.2.2用本身喜歡的技術 ☞↑

• 機頂盒web開發官方文檔推薦用原生 JS 開發，目前來看的話，JQ 用起來方便一些，暫時沒有性能缺陷。
• Less、Sass 兩個都大愛。變量的威力大大的，就算資源圖片是1080p機器的圖，我拿來佈局到720p的機器上，利用 Sass 的變量和計算特性，很是容易控制CSS中的屬性值。
• 作列表渲染的時候用到了 art-template，騰訊出的一個模板引擎，參考它的文檔，仍是很容易上手的。官方文檔。

1.2.3少用JS控制呈現 HTML 元素 ☞↑

機頂盒瀏覽器的性能很是低，若是還要作視頻播放的話，JS 可發揮的空間至關有限。

• 一個 Tab 欄下有6個選項，選項裏面 HTML 結構基本都是相同的，若是你打算用 JS 複用相同結構的 HTML 代碼的話，趕忙停下，老老實實的 copy 和 paste HTML代碼吧。否則切換 Tab 的時候，隨機的卡頓很噁心。
• 相似 $(id).css({"backgroundImage":"url('...')"}) 和 $(id).attr({"src":"./*.jpg"}) 這樣的在 JS 裏面控制 UI 顯示層面的操做要避免，儘可能直接在 HTML 中完成，最多能接受這個操做： $(id).addClass()。機頂盒瀏覽器就是這麼傲嬌。（這是我試出來的，至於JQ操做性能方面的差別本質仍是須要研究的。）
• 機頂盒web中按鈕的尺寸通常都很大，按鈕背景圖這些東西，就不要在 JS 中去操做，若是播放視頻引發了性能高損耗，這個時候web中的UI卡的你一愣一愣的。

1.2.4「焦點事件」使用一時爽 ☞↑

• 必定要避免使用"焦點事件"觸發相關操做，焦點事件是高頻率的系統事件，web在機頂盒運行時，焦點事件通常不受開發人員的絕對控制。「失去焦點」事件一樣要避免使用。
• 「焦點事件」與「上下左右按鍵事件」具備必定的耦合性，「焦點事件」使用不當，問題百出。
• 上下左右按鍵事件，通常均可以替換焦點事件。
• a:focus {} 這個CSS選擇器能夠放心的使用。

1.2.5萬能的 setTimeout() ☞↑

機頂盒內置的瀏覽器很噁心啊，閹割版的就算了，一些邏輯上的東西跟PC上也不一樣。

• 一些操做不管怎麼寫都不運行，或者拿不到值（null），特別是在頁面加載、父子頁面跳轉這些場景下。給它加個 setTimeout(function(), ms) 就搞定了，百試百靈，通常人我都不告訴他^_^。

$(document).keydown(function () {
    if (event.which  === 4097) {
        var distance = $("#list").scrollTop();
        sessionStorage.removeItem("listScrollTopVal");
        sessionStorage.setItem("listScrollTopVal", JSON.stringify(distance));
        // 按下肯定鍵後，把得到焦點的元素的 id 保存到 sessionStorage中，
        // 這個時候就要在外邊加一個延時函數，甚至能夠將時間設置成 0ms 也行。
        setTimeout(function () {
            sessionStorage.removeItem("listFocusItemId");
            sessionStorage.setItem("listFocusItemId",JSON.stringify(document.activeElement.id));
        }, 100);
    }
});
複製代碼

1.2.6絕對定位position:absolte;省時省力 ☞↑

• 機頂盒的可視區域是固定的，絕對定位是最省時省力的。
• 擁有絕對定位元素的父元素必須是 position:relative定位，這個是必須的！
• 多個塊級元素排列在同一行，考慮使用display:inline-block;，優於使用flaot:...浮動佈局。

1.2.7overflow:scroll;不能往上滾動 ☞↑

電視機的可視區域固定，整個頁面是不滾動的，業務場景中，頁面中的局部須要滾動：列表頁、詳情頁。

• 在PC上，給須要滾動的元素設置：overflow：scroll; 會出現滾動條，實現滾動。可是在電視機頂盒上，出現了：能往下滾動，不能往上滾動的問題。
• 解決辦法：給須要滾動的元素包裹一個 <a href="#"></a>。而且必須設置display:block。；

<div class="content">
    <a href="#/" style="display:block;outline:none;">
      <div class="content-html">須要滾動的內容</div>
    </a>
  </div>
複製代碼

1.2.8切換視頻播放，加防抖必不可少 ☞↑

機頂盒瀏覽器的性能原本就不好，在同一個頁面的 Tab 上切換多個視頻播放，按鍵過快的狀況下，UI上焦點連續切換過去不少個元素了，視頻的播放地址才挨個往過去切換，這個時候很容易形成卡頓或者瀏覽器崩潰。加上放抖動，有效解決用戶快速切換播放引發的卡頓。

• 防抖其實就是一個延時函數，能夠想象成：刷卡上公交車，只要有人刷卡，司機就不能開車。

$("#nav--second").keydown(function(event){
    if(event.which === 39) {
        // 這裏的EVAN是一個全局的命名空間，EVAN.timer是一個全局變量
        clearTimeout(EVAN.timer);
        EVAN.timer = setTimeout(function () 
        create(EVAN.homePageVideoUrlArr[2]);
        }, EVAN.gap);  // 時間1-2s左右比較合適。
    }
});
複製代碼