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

AragornK發表於2018-06-04
Web

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

針對東方有線機頂盒UUTVOS作業系統中內建的聯彤瀏覽器web開發，總結一些自己在開發中遇到的問題和技巧。瀏覽器是基於Firefox的閹割版，所以開發中有一些莫名其妙的坑。已經嘗試過使用Vue開發機頂盒web專案，體驗較差：首次載入時間長、頁面卡頓。由於專案進度推進，當時沒有嘗試元件懶載入和路由懶載入處理，這樣做或許可以減少首次載入時間。推薦使用 JQuery 進行開發。

1.1採坑預告

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左右比較合適。    
  }
  });
複製程式碼

來源：https://juejin.im/post/5b1505e06fb9a01e6259819b

相關文章