河南省實(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)。
本學(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)容。
平臺(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è)置必不可少。
前端開(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é)。
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)容。
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)的分離。
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。
用戶(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è)面。
一個(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)。
優(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文件中的空行,多余的注釋。
本文通過(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.