在線學習平臺的設計和優化

河南省實驗中學 吳 碩

互聯網的發展帶動了傳統教育事業的變革，在網絡上學習成為一種新的時尚，學習者們獲得了全新的學習體驗。在線學習較面授學習而言。這些優勢使得在線學習平臺愈發的炙手可熱，各平臺都在努力優化自己的產品。而前端性能的優化則能夠很好地提高產品的整體性能，與后端優化相比較，前端優化更加便捷，也更加效率。

隨著技術的不斷進步，許多新的思想和設計紛紛涌現，原有的設計思路不免顯得有些老套，過時。而且由于部分開發人員過于重視功能的實現，忽略可代碼結構的設計等問題，由此會產生許多性能上的問題。這些問題某些能夠及時修復，但還有些很難被完全修復。隨著功能的不斷增加，平臺前端越來越臃腫，這就會導致許多性能問題，影響用戶體驗。

1.產品架構

1.1 產品介紹

本學習平臺將為學習者提供各種優質學習資源，這些資源種類豐富，可以是視頻，也可以是文檔，并且這些資源都進行了細致的整合與分類，學習者能夠通過他們便捷有效地提高自己的知識水平，獲取更多知識。除了學習者可以在平臺上獲取合適的課程和服務，講師或者機構用戶也可以在平臺上發布課程皆以提高自己的知名度，并吸引更多的學生學習自己的課程，進而從中獲利。學習者和講師的身份互不沖突，兩者皆以相互轉化。講師可以化身為學習者，在平臺上學習其他人的知識，學習者也可以通過認證成為講師，進而在平臺上發布自己的課程。除了以上兩類人員外，還有一種是運營人員。他們需求的是便捷的運營后臺管理系統，便于自己找的需要的數據，或者設置運營內容。

1.2 產品功能

平臺（見圖1）共有四大子系統，主要有十大主要功能，分別是消息功能，購買/支付功能，學習功能，交流功能，課程內容分配和機構人員分類功能，課程安排、用戶管理、交易管理、推廣/活動管理功能。

平臺基礎支持子系統是平臺運行的基礎，含有登錄、購買／支付、消息／通知管理、個人信息設置等功能。

圖1 平臺功能模塊圖

購買/支付是用來提供平臺的購買和支付功能，因為平臺上的課程并不是全部免費的（課程價格由課程內容提供方決定），因而需要購買和支付功能。

在線學習子系統包含了在線學習所需要的基礎需求，對于在線學習平臺來說，學習的過程是用戶體驗的主要過程，決定了用戶的留存率，也就顯得十分重要。首先，學習者在學習課程之前需要先參加課程，注冊為該課程的學生，才能觀看該課程的學習資料，參加考試等等。因而進入課程學習子系統的第一步就是參加課程，對于收費課程，需要支付后才能加入課程。

討論區和評論則是考慮到在線平臺在線的特點和使用者間相互交流的需求。一方面，教師需要了解學生的學習情況和對課程的學習感受。

機構后臺需求是指通過對平臺用戶的分析我們知道，除了普通學習用戶外，平臺的使用者還包括講師／機構用戶。他們的主要需求是利用平臺發布課程，以達到提升知名度、招收學員等目的。

學習內容管理是機構后臺子系統最重要的需求，對于課程發布方來說，課程的內容和課程的質量是其吸引學院的根本因素。

機構人員管理是對機構的人員進行管理。因為某些機構可能包括多個講師，每個課程也可能會設置助教等角色，此外，機構可能會設置在線客服，用來對學生購買課程前或購買課程后的咨詢提供回答。

測驗／考試設置，對課程的隨堂測驗、考試等進行設置。教師用戶在課程上傳后并不是撒手不管的，還需要對學生的學習情況進行考察，判斷學生的掌握情況，并據此對后續課程的內容進行調整，因此測驗和考試的設置必不可少。

2.前端開發技術

前端開發技術主要為html,css和javascript,html主要負責的是頁面的結構，css主要負責的是頁面的樣式，javascript主要負責的是頁面的交互，網頁的結構由html負責，樣式由css負責，行為由javascript負責。

2.1 HTML

html全稱Hyper Text Markup Language，是一種超文本標記語言，用來描述超文本內容中的顯示方式，如文字的內容等。

完整的html文件主要含有兩個部分，“head”和“body”，其中“head”部分主要是用于提供網頁的信息，即各種設定。元素主要提供了頁面的元信息，元素中有自己填充的關鍵詞，這是針對搜索引擎的關鍵詞，而“body”則主要是用于網頁的具體內容。

2.2 CSS

CSS是Cascading Style Sheet的縮寫，意義為層疊樣式表，層疊主要是對同一個元素當多次設置不同的樣式的時候，如果優先級別一樣的情況下，就會使用最后一次定義的樣式，如果優先級別不同的話，在頁面顯示的就是最高優先級別定義的樣式，它是一種制作網頁的技術，CSS的出現實現了內容與表現形式的分開。

CSS的出現使網頁的格式代碼得到了簡化，減少了需要上傳的代碼數量，大大減少了重復工作的勞動量，從而達到了加快網頁加載速度的目的。同時，它也能提供了便利的更新功能，通過它能夠很容易為Web站點內的所有網頁提供一致的外觀和風格。

CSS添加的方法主要有3種：可以在外部引入樣式表，也可以在內部head標簽內用style標簽加入樣式表，也可以在html標簽中內嵌元素的樣式。

使用css進行布局有以下優點：

（1）css語法簡單，便攜比較的容易，css可以精準的定位文檔中的元素，通過布局使得代碼很簡練。

（2）css語法和html文件一般都是分開編寫，然后將css文件引入到html文檔中，實現了網頁的樣式和網頁結構的分離。

2.3 javascript

javascript是腳本語言，代碼在運行之前不需要進行預編譯，主要實現網頁中與用戶的交互，javascript可以直接嵌入在html文件中，也可以在html文件外寫成單獨的js文件，有利于結構和行為的分離，后期更容易維護和管理。javascript的主要用途是嵌入動態文本到網頁中；瀏覽器發出請求后，對瀏覽器的事件作出響應的回應；通過id,class或者標簽名讀取html中的元素；在表單提交到服務器之前先驗證表單；檢測訪客瀏覽器信息以及控制cookies。

2.4 瀏覽器引擎相關原理

用戶輸入相應的網址之后，請求服務器端響應之后，再到瀏覽器以頁面的方式呈現出來，這期間瀏覽器做了哪些工作，以及通過怎么樣的方式處理html,css,js最終呈現到頁面上，了解了這些對進行前端的優化有很大的幫助。網頁試運行在瀏覽器引擎上面的，瀏覽器引擎開發者是不能改的，所以要優化性能就要考慮在瀏覽器引擎的基礎上，對頁面的結構，資源，請求方式進行優化，以減少瀏覽器處理的時間，更快的曾現頁面。

3.系統性能優化

3.1 減少http請求數

一個服務器的請求的過程首先是用戶在瀏覽器輸入網址，首先通過DNS解析將域名解析相應的ip地址，在通過路由選擇和轉發到達對應的服務器，與服務器建立連接之后發送數據，服務器接受到數據之后作出相應的處理之吼在想處理的結果返回給瀏覽器，每一次請求都是需要時間和網絡帶寬的，如果瀏覽器請求過多之后，瀏覽器會分批的進行請求，從而會增加響應的時間，降低用戶體驗。

3.2 優化請求帶寬

優化請求帶寬就是醬文件現在服務器端采用壓縮技術將js,css，圖片等都進行壓縮之后再傳輸，傳輸到瀏覽器端之后再對壓縮的內容進行解壓縮，壓縮css和js的功能一般都是由打包工具提供，目前市場比較主流的打包工具是webpack，壓縮的文件一般去除了原本js文件中的空行，多余的注釋。

4.總結與展望

本文通過目前流行的前端框架對前端優化方案進行了研究與闡述，并介紹了平臺所采用的各種技術以及原理。并從需求入手，設計了優化的前端框架。詳細的介紹了平臺所具有的各種功能：消息功能，購買/支付功能，學習功能，交流功能，課程內容管理和機構人員管理功能，課程管理、用戶管理、交易管理、推廣/活動管理功能，并介紹了其所使用的技術原理，分析了平臺前端的優化方案，對其他應用的優化也有著參考意義。

本文對前端優化的設計取得了一定的成果，但仍有很大部分的不足，由于技術知識水平的限制以及技術的不斷更新換代，本文所論述的技術手段仍有提升的余地，如由于前端組件增多，如何有效且方便快捷的管理組件、引用組件就成了一個問題。同時，平臺競爭的市場十分激烈，其余平臺的技術也仍在不斷的進步，不斷地更新換代，所以本平臺仍需不斷優化不斷發展，確保提供更多更好的資源來給廣大的使用群眾提供一個更加舒適的環境。

[1]廖偉華.CSS預處理器:Sass,Less和Stylus實踐[J].程序員,2013(3):74-77.

[2]馬琳,羅鐵堅,宋進亮,等.Web系統性能測試及優化[J].2005,31(12):229-231.

[3]王運.Web前端技術在開放大學在線學習平臺中的應用與研究[J].2015,(5):150-152.