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

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

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

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

1.1 產(chǎn)品介紹

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

1.2 產(chǎn)品功能

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

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

圖1 平臺功能模塊圖

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

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

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

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

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

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

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

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

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

2.1 HTML

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

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

2.2 CSS

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

CSS的出現(xiàn)使網(wǎng)頁的格式代碼得到了簡化，減少了需要上傳的代碼數(shù)量，大大減少了重復(fù)工作的勞動量，從而達(dá)到了加快網(wǎng)頁加載速度的目的。同時(shí)，它也能提供了便利的更新功能，通過它能夠很容易為Web站點(diǎn)內(nèi)的所有網(wǎng)頁提供一致的外觀和風(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語法簡單，便攜比較的容易，css可以精準(zhǔn)的定位文檔中的元素，通過布局使得代碼很簡練。

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

2.3 javascript

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

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

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

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

3.1 減少http請求數(shù)

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

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

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

4.總結(jié)與展望

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

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

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

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

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