在線(xiàn)學(xué)習(xí)平臺(tái)的設(shè)計(jì)和優(yōu)化

河南省實(shí)驗(yàn)中學(xué) 吳 碩

互聯(lián)網(wǎng)的發(fā)展帶動(dòng)了傳統(tǒng)教育事業(yè)的變革，在網(wǎng)絡(luò)上學(xué)習(xí)成為一種新的時(shí)尚，學(xué)習(xí)者們獲得了全新的學(xué)習(xí)體驗(yàn)。在線(xiàn)學(xué)習(xí)較面授學(xué)習(xí)而言。這些優(yōu)勢(shì)使得在線(xiàn)學(xué)習(xí)平臺(tái)愈發(fā)的炙手可熱，各平臺(tái)都在努力優(yōu)化自己的產(chǎn)品。而前端性能的優(yōu)化則能夠很好地提高產(chǎn)品的整體性能，與后端優(yōu)化相比較，前端優(yōu)化更加便捷，也更加效率。

隨著技術(shù)的不斷進(jìn)步，許多新的思想和設(shè)計(jì)紛紛涌現(xiàn)，原有的設(shè)計(jì)思路不免顯得有些老套，過(guò)時(shí)。而且由于部分開(kāi)發(fā)人員過(guò)于重視功能的實(shí)現(xiàn)，忽略可代碼結(jié)構(gòu)的設(shè)計(jì)等問(wèn)題，由此會(huì)產(chǎn)生許多性能上的問(wèn)題。這些問(wèn)題某些能夠及時(shí)修復(fù)，但還有些很難被完全修復(fù)。隨著功能的不斷增加，平臺(tái)前端越來(lái)越臃腫，這就會(huì)導(dǎo)致許多性能問(wèn)題，影響用戶(hù)體驗(yàn)。

1.產(chǎn)品架構(gòu)

1.1 產(chǎn)品介紹

本學(xué)習(xí)平臺(tái)將為學(xué)習(xí)者提供各種優(yōu)質(zhì)學(xué)習(xí)資源，這些資源種類(lèi)豐富，可以是視頻，也可以是文檔，并且這些資源都進(jìn)行了細(xì)致的整合與分類(lèi)，學(xué)習(xí)者能夠通過(guò)他們便捷有效地提高自己的知識(shí)水平，獲取更多知識(shí)。除了學(xué)習(xí)者可以在平臺(tái)上獲取合適的課程和服務(wù)，講師或者機(jī)構(gòu)用戶(hù)也可以在平臺(tái)上發(fā)布課程皆以提高自己的知名度，并吸引更多的學(xué)生學(xué)習(xí)自己的課程，進(jìn)而從中獲利。學(xué)習(xí)者和講師的身份互不沖突，兩者皆以相互轉(zhuǎn)化。講師可以化身為學(xué)習(xí)者，在平臺(tái)上學(xué)習(xí)其他人的知識(shí)，學(xué)習(xí)者也可以通過(guò)認(rèn)證成為講師，進(jìn)而在平臺(tái)上發(fā)布自己的課程。除了以上兩類(lèi)人員外，還有一種是運(yùn)營(yíng)人員。他們需求的是便捷的運(yùn)營(yíng)后臺(tái)管理系統(tǒng)，便于自己找的需要的數(shù)據(jù)，或者設(shè)置運(yùn)營(yíng)內(nèi)容。

1.2 產(chǎn)品功能

平臺(tái)（見(jiàn)圖1）共有四大子系統(tǒng)，主要有十大主要功能，分別是消息功能，購(gòu)買(mǎi)/支付功能，學(xué)習(xí)功能，交流功能，課程內(nèi)容分配和機(jī)構(gòu)人員分類(lèi)功能，課程安排、用戶(hù)管理、交易管理、推廣/活動(dòng)管理功能。

平臺(tái)基礎(chǔ)支持子系統(tǒng)是平臺(tái)運(yùn)行的基礎(chǔ)，含有登錄、購(gòu)買(mǎi)／支付、消息／通知管理、個(gè)人信息設(shè)置等功能。

圖1 平臺(tái)功能模塊圖

購(gòu)買(mǎi)/支付是用來(lái)提供平臺(tái)的購(gòu)買(mǎi)和支付功能，因?yàn)槠脚_(tái)上的課程并不是全部免費(fèi)的（課程價(jià)格由課程內(nèi)容提供方?jīng)Q定），因而需要購(gòu)買(mǎi)和支付功能。

在線(xiàn)學(xué)習(xí)子系統(tǒng)包含了在線(xiàn)學(xué)習(xí)所需要的基礎(chǔ)需求，對(duì)于在線(xiàn)學(xué)習(xí)平臺(tái)來(lái)說(shuō)，學(xué)習(xí)的過(guò)程是用戶(hù)體驗(yàn)的主要過(guò)程，決定了用戶(hù)的留存率，也就顯得十分重要。首先，學(xué)習(xí)者在學(xué)習(xí)課程之前需要先參加課程，注冊(cè)為該課程的學(xué)生，才能觀(guān)看該課程的學(xué)習(xí)資料，參加考試等等。因而進(jìn)入課程學(xué)習(xí)子系統(tǒng)的第一步就是參加課程，對(duì)于收費(fèi)課程，需要支付后才能加入課程。

討論區(qū)和評(píng)論則是考慮到在線(xiàn)平臺(tái)在線(xiàn)的特點(diǎn)和使用者間相互交流的需求。一方面，教師需要了解學(xué)生的學(xué)習(xí)情況和對(duì)課程的學(xué)習(xí)感受。

機(jī)構(gòu)后臺(tái)需求是指通過(guò)對(duì)平臺(tái)用戶(hù)的分析我們知道，除了普通學(xué)習(xí)用戶(hù)外，平臺(tái)的使用者還包括講師／機(jī)構(gòu)用戶(hù)。他們的主要需求是利用平臺(tái)發(fā)布課程，以達(dá)到提升知名度、招收學(xué)員等目的。

學(xué)習(xí)內(nèi)容管理是機(jī)構(gòu)后臺(tái)子系統(tǒng)最重要的需求，對(duì)于課程發(fā)布方來(lái)說(shuō)，課程的內(nèi)容和課程的質(zhì)量是其吸引學(xué)院的根本因素。

機(jī)構(gòu)人員管理是對(duì)機(jī)構(gòu)的人員進(jìn)行管理。因?yàn)槟承C(jī)構(gòu)可能包括多個(gè)講師，每個(gè)課程也可能會(huì)設(shè)置助教等角色，此外，機(jī)構(gòu)可能會(huì)設(shè)置在線(xiàn)客服，用來(lái)對(duì)學(xué)生購(gòu)買(mǎi)課程前或購(gòu)買(mǎi)課程后的咨詢(xún)提供回答。

測(cè)驗(yàn)／考試設(shè)置，對(duì)課程的隨堂測(cè)驗(yàn)、考試等進(jìn)行設(shè)置。教師用戶(hù)在課程上傳后并不是撒手不管的，還需要對(duì)學(xué)生的學(xué)習(xí)情況進(jìn)行考察，判斷學(xué)生的掌握情況，并據(jù)此對(duì)后續(xù)課程的內(nèi)容進(jìn)行調(diào)整，因此測(cè)驗(yàn)和考試的設(shè)置必不可少。

2.前端開(kāi)發(fā)技術(shù)

前端開(kāi)發(fā)技術(shù)主要為html,css和javascript,html主要負(fù)責(zé)的是頁(yè)面的結(jié)構(gòu)，css主要負(fù)責(zé)的是頁(yè)面的樣式，javascript主要負(fù)責(zé)的是頁(yè)面的交互，網(wǎng)頁(yè)的結(jié)構(gòu)由html負(fù)責(zé)，樣式由css負(fù)責(zé)，行為由javascript負(fù)責(zé)。

2.1 HTML

html全稱(chēng)Hyper Text Markup Language，是一種超文本標(biāo)記語(yǔ)言，用來(lái)描述超文本內(nèi)容中的顯示方式，如文字的內(nèi)容等。

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

2.2 CSS

CSS是Cascading Style Sheet的縮寫(xiě)，意義為層疊樣式表，層疊主要是對(duì)同一個(gè)元素當(dāng)多次設(shè)置不同的樣式的時(shí)候，如果優(yōu)先級(jí)別一樣的情況下，就會(huì)使用最后一次定義的樣式，如果優(yōu)先級(jí)別不同的話(huà)，在頁(yè)面顯示的就是最高優(yōu)先級(jí)別定義的樣式，它是一種制作網(wǎng)頁(yè)的技術(shù)，CSS的出現(xiàn)實(shí)現(xiàn)了內(nèi)容與表現(xiàn)形式的分開(kāi)。

CSS的出現(xiàn)使網(wǎng)頁(yè)的格式代碼得到了簡(jiǎn)化，減少了需要上傳的代碼數(shù)量，大大減少了重復(fù)工作的勞動(dòng)量，從而達(dá)到了加快網(wǎng)頁(yè)加載速度的目的。同時(shí)，它也能提供了便利的更新功能，通過(guò)它能夠很容易為Web站點(diǎn)內(nèi)的所有網(wǎng)頁(yè)提供一致的外觀(guān)和風(fēng)格。

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

使用css進(jìn)行布局有以下優(yōu)點(diǎn)：

（1）css語(yǔ)法簡(jiǎn)單，便攜比較的容易，css可以精準(zhǔn)的定位文檔中的元素，通過(guò)布局使得代碼很簡(jiǎn)練。

（2）css語(yǔ)法和html文件一般都是分開(kāi)編寫(xiě)，然后將css文件引入到html文檔中，實(shí)現(xiàn)了網(wǎng)頁(yè)的樣式和網(wǎng)頁(yè)結(jié)構(gòu)的分離。

2.3 javascript

javascript是腳本語(yǔ)言，代碼在運(yùn)行之前不需要進(jìn)行預(yù)編譯，主要實(shí)現(xiàn)網(wǎng)頁(yè)中與用戶(hù)的交互，javascript可以直接嵌入在html文件中，也可以在html文件外寫(xiě)成單獨(dú)的js文件，有利于結(jié)構(gòu)和行為的分離，后期更容易維護(hù)和管理。javascript的主要用途是嵌入動(dòng)態(tài)文本到網(wǎng)頁(yè)中；瀏覽器發(fā)出請(qǐng)求后，對(duì)瀏覽器的事件作出響應(yīng)的回應(yīng)；通過(guò)id,class或者標(biāo)簽名讀取html中的元素；在表單提交到服務(wù)器之前先驗(yàn)證表單；檢測(cè)訪(fǎng)客瀏覽器信息以及控制cookies。

2.4 瀏覽器引擎相關(guān)原理

用戶(hù)輸入相應(yīng)的網(wǎng)址之后，請(qǐng)求服務(wù)器端響應(yīng)之后，再到瀏覽器以頁(yè)面的方式呈現(xiàn)出來(lái)，這期間瀏覽器做了哪些工作，以及通過(guò)怎么樣的方式處理html,css,js最終呈現(xiàn)到頁(yè)面上，了解了這些對(duì)進(jìn)行前端的優(yōu)化有很大的幫助。網(wǎng)頁(yè)試運(yùn)行在瀏覽器引擎上面的，瀏覽器引擎開(kāi)發(fā)者是不能改的，所以要優(yōu)化性能就要考慮在瀏覽器引擎的基礎(chǔ)上，對(duì)頁(yè)面的結(jié)構(gòu)，資源，請(qǐng)求方式進(jìn)行優(yōu)化，以減少瀏覽器處理的時(shí)間，更快的曾現(xiàn)頁(yè)面。

3.系統(tǒng)性能優(yōu)化

3.1 減少http請(qǐng)求數(shù)

一個(gè)服務(wù)器的請(qǐng)求的過(guò)程首先是用戶(hù)在瀏覽器輸入網(wǎng)址，首先通過(guò)DNS解析將域名解析相應(yīng)的ip地址，在通過(guò)路由選擇和轉(zhuǎn)發(fā)到達(dá)對(duì)應(yīng)的服務(wù)器，與服務(wù)器建立連接之后發(fā)送數(shù)據(jù)，服務(wù)器接受到數(shù)據(jù)之后作出相應(yīng)的處理之吼在想處理的結(jié)果返回給瀏覽器，每一次請(qǐng)求都是需要時(shí)間和網(wǎng)絡(luò)帶寬的，如果瀏覽器請(qǐng)求過(guò)多之后，瀏覽器會(huì)分批的進(jìn)行請(qǐng)求，從而會(huì)增加響應(yīng)的時(shí)間，降低用戶(hù)體驗(yàn)。

3.2 優(yōu)化請(qǐng)求帶寬

優(yōu)化請(qǐng)求帶寬就是醬文件現(xiàn)在服務(wù)器端采用壓縮技術(shù)將js,css，圖片等都進(jìn)行壓縮之后再傳輸，傳輸?shù)綖g覽器端之后再對(duì)壓縮的內(nèi)容進(jìn)行解壓縮，壓縮css和js的功能一般都是由打包工具提供，目前市場(chǎng)比較主流的打包工具是webpack，壓縮的文件一般去除了原本js文件中的空行，多余的注釋。

4.總結(jié)與展望

本文通過(guò)目前流行的前端框架對(duì)前端優(yōu)化方案進(jìn)行了研究與闡述，并介紹了平臺(tái)所采用的各種技術(shù)以及原理。并從需求入手，設(shè)計(jì)了優(yōu)化的前端框架。詳細(xì)的介紹了平臺(tái)所具有的各種功能：消息功能，購(gòu)買(mǎi)/支付功能，學(xué)習(xí)功能，交流功能，課程內(nèi)容管理和機(jī)構(gòu)人員管理功能，課程管理、用戶(hù)管理、交易管理、推廣/活動(dòng)管理功能，并介紹了其所使用的技術(shù)原理，分析了平臺(tái)前端的優(yōu)化方案，對(duì)其他應(yīng)用的優(yōu)化也有著參考意義。

本文對(duì)前端優(yōu)化的設(shè)計(jì)取得了一定的成果，但仍有很大部分的不足，由于技術(shù)知識(shí)水平的限制以及技術(shù)的不斷更新?lián)Q代，本文所論述的技術(shù)手段仍有提升的余地，如由于前端組件增多，如何有效且方便快捷的管理組件、引用組件就成了一個(gè)問(wèn)題。同時(shí)，平臺(tái)競(jìng)爭(zhēng)的市場(chǎng)十分激烈，其余平臺(tái)的技術(shù)也仍在不斷的進(jìn)步，不斷地更新?lián)Q代，所以本平臺(tái)仍需不斷優(yōu)化不斷發(fā)展，確保提供更多更好的資源來(lái)給廣大的使用群眾提供一個(gè)更加舒適的環(huán)境。

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

[2]馬琳,羅鐵堅(jiān),宋進(jìn)亮,等.Web系統(tǒng)性能測(cè)試及優(yōu)化[J].2005,31(12):229-231.

[3]王運(yùn).Web前端技術(shù)在開(kāi)放大學(xué)在線(xiàn)學(xué)習(xí)平臺(tái)中的應(yīng)用與研究[J].2015,(5):150-152.