【產(chǎn)品經(jīng)理必知Web前端技術(shù)】20190515

1. AJAX

AJAX(Asynchronous JavaScript And XML)是一項用于異步拉取數(shù)據(jù)并展示在當前頁面的技術(shù)恬砂,這對需要延遲加載數(shù)據(jù)和觸發(fā)式家在數(shù)據(jù)的頁面有很大益處鹉勒。

如運用到鼠標懸浮顯示注釋的功能:鼠標懸浮到相應(yīng)的按鈕上后衬衬,這是瀏覽器的XmlHttpRequest對象發(fā)起對后臺的一次去請求轧抗。隨后這次請求返回注釋的JSON串蝗敢,這是網(wǎng)頁中的JavaScript程序開始進行處理砸西,解析JSON串秉氧,并將解析后的字符串插入網(wǎng)頁的DOM結(jié)構(gòu)中。

如運用到網(wǎng)站訪問中:網(wǎng)站的后臺會把當前頁面的基本框架“吐回”瀏覽器演训,如基本的文字顯示弟孟。圖片是在框架加載完后,再發(fā)起AJAX請求拉取样悟。

技術(shù)優(yōu)勢:最大程度上緩解用戶等待的焦慮感

2. DOM

DOM(Document Object Model拂募,文檔對象模型)定義了一個網(wǎng)頁的結(jié)構(gòu),是網(wǎng)頁的骨骼和框架窟她,網(wǎng)頁呈現(xiàn)的內(nèi)容是通過JavaScript從服務(wù)器上請求到數(shù)據(jù)后操縱DOM而展現(xiàn)的陈症。---異步加載

更便捷的技術(shù):虛擬DOM。用JavaScript模擬一個簡單的DOM樹震糖,然后在上面演練所有的DOM操作录肯,等時機成熟后再把虛擬DOM樹和真正瀏覽器的DOM樹做對比,算出差異吊说,一次性改變真正的DOM樹嘁信。

3. 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁

都是網(wǎng)頁于样,靜態(tài)網(wǎng)頁不需要后臺程序處理,直接從服務(wù)器返回潘靖;動態(tài)網(wǎng)頁一般需要后臺程序來處理(ASP穿剖、JSP、PHP卦溢、Python糊余、Ruby等),并且由數(shù)據(jù)庫提供數(shù)據(jù)支撐单寂。

動態(tài)網(wǎng)頁的后臺處理以PHP為例:當網(wǎng)頁被請求時贬芥,首先到PHP容器中進行解釋,這時解釋器知道了當前頁面的需求(比如文字宣决,圖片)蘸劈,然后PHP程序連接數(shù)據(jù)庫,獲取這些數(shù)據(jù)并插入網(wǎng)頁的HTML中尊沸,再吐回瀏覽器顯示威沫。

4. 分析URL的結(jié)構(gòu)

一個標準的URL地址由protocol(協(xié)議),hostname(主機名)洼专,port(端口)棒掠,path(路徑),parameter(參數(shù))屁商,query幾部分組成烟很。

protocol(協(xié)議)

http://、https://蜡镶、ftp雾袱、thunder都是協(xié)議,協(xié)議就是一套定義了數(shù)據(jù)的封裝官还、打包芹橡、拆包和解釋的規(guī)則。URL地址標識了一個資源妻枕,協(xié)議頭標識我們可以通過什么協(xié)議訪問它僻族。

hostname(主機名)

qq.com是一級域名粘驰,www.qq.com和news.qq.com都是二級域名

port(端口)

一般http的端口號為80屡谐,https的端口號為443。

一個主機可以有2的16次方蝌数,65536個端口愕掏,URL中的端口號就是指定了從哪個這個端口訪問資源,這個網(wǎng)頁服務(wù)器必須現(xiàn)在這個端口部署服務(wù)顶伞,才能供用戶訪問饵撑。

path(路徑)

路徑是最終文件所在的路徑和文件名剑梳,只不過此地址的文件存儲在服務(wù)器上。

如http://www.reibang.com/p/a12049bfc461 加粗的即為路徑

5. 網(wǎng)頁基礎(chǔ)知識:表單

表單<form>是用戶和服務(wù)器的數(shù)據(jù)交互的用戶界面滑潘。

表單代碼說明了數(shù)據(jù)內(nèi)容提交的地址和方法(GET或POST)

6. H5應(yīng)用程序緩存簡介

如果沒有緩存垢乙,用戶每次打開同一個網(wǎng)頁都要全量下載,如果訪問的用戶量大的話语卤,服務(wù)器會頂不住追逮。因此引出了緩存的技術(shù)(當然有錢可以擴容)。

Application Cache是H5中定義的一種離線存儲技術(shù)標準粹舵,可以讓開發(fā)者明確指定頁面中的哪些靜態(tài)資源可以在第一次訪問網(wǎng)頁的同時緩存到本地钮孵。再次訪問的時候,頁面通過注冊監(jiān)聽器的方式獲得Cache更新成功的事件眼滤,主動刷新一下頁面巴席,并最新的內(nèi)容及時展示給用戶。

技術(shù)優(yōu)勢:大大釋放了服務(wù)器帶寬诅需,同時內(nèi)容展示時間大大縮短漾唉。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市诱担,隨后出現(xiàn)的幾起案子毡证,更是在濱河造成了極大的恐慌,老刑警劉巖蔫仙,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件料睛,死亡現(xiàn)場離奇詭異,居然都是意外死亡摇邦,警方通過查閱死者的電腦和手機恤煞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來施籍,“玉大人居扒,你說我怎么就攤上這事〕笊鳎” “怎么了喜喂?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長竿裂。 經(jīng)常有香客問我玉吁,道長,這世上最難降的妖魔是什么腻异? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任进副,我火速辦了婚禮,結(jié)果婚禮上悔常,老公的妹妹穿的比我還像新娘影斑。我一直安慰自己给赞,他們只是感情好,可當我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布矫户。 她就那樣靜靜地躺著片迅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪皆辽。 梳的紋絲不亂的頭發(fā)上障涯,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天,我揣著相機與錄音膳汪,去河邊找鬼唯蝶。 笑死,一個胖子當著我的面吹牛遗嗽,可吹牛的內(nèi)容都是我干的粘我。 我是一名探鬼主播,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼痹换,長吁一口氣:“原來是場噩夢啊……” “哼征字!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起娇豫,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤匙姜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冯痢,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體氮昧,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年浦楣,在試婚紗的時候發(fā)現(xiàn)自己被綠了袖肥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡振劳,死狀恐怖椎组,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情历恐,我是刑警寧澤寸癌,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站弱贼,受9級特大地震影響蒸苇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜哮洽,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一填渠、第九天 我趴在偏房一處隱蔽的房頂上張望弦聂。 院中可真熱鬧鸟辅,春花似錦氛什、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至再层,卻和暖如春贸铜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背聂受。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工蒿秦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蛋济。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓棍鳖,卻偏偏與公主長得像,于是被迫代替她去往敵國和親碗旅。 傳聞我的和親對象是個殘疾皇子渡处,可洞房花燭夜當晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容

  • HTTP基本原理 URI、URL祟辟、URN(Uninform Resource) URI(Identifier):統(tǒng)...
    GHope閱讀 2,070評論 2 26
  • $HTML医瘫, HTTP,web綜合問題 1旧困、前端需要注意哪些SEO 2醇份、 的title和alt有什么區(qū)別 3、HT...
    Hebborn_hb閱讀 4,584評論 0 20
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5吼具? 答:HTML5是最新的HTML標準被芳。 注意:講述HT...
    kismetajun閱讀 27,452評論 1 45
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,093評論 1 32
  • 一:什么是閉包?閉包的用處馍悟? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)畔濒。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,550評論 1 52