知識點整理(三)

1. 前端性能優化的方法?

(1) 減少http請求次數:CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網頁Gzip,CDN托管,data緩存 ,圖片服務器。
(2) 前端模板 JS+數據,減少由于HTML標簽導致的帶寬浪費,前端用變量保存AJAX請求結果,每次操作本地變量,不用請求,減少請求次數
(3) 用innerHTML代替DOM操作,減少DOM操作次數,優化javascript性能。
(4) 當需要設置的樣式很多時設置className而不是直接操作style。
(5) 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
(6) 避免使用CSS Expression(css表達式)又稱Dynamic properties(動態屬性)。
(7) 圖片預加載,將樣式表放在頂部,將腳本放在底部 加上時間戳。
(8) 按需加載, 將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載,可以大大提升重要資源的顯示速度和降低總體流量

2. CSS優化、提高性能的方法有哪些?

將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

3. jsonp的原理

jsonp的實現原理就是,jquery中動態創建一個script元素,然后給script的scr屬性賦值為ajax請求接口地址,在接口地址的后面添加一個callback的參數,參數的值就是jquery中動態生成的函數的函數名稱,后臺更具參數返回值
返回的結構是 方法名(json值) 成功后就相當于執行了一個js函數,就是ajax中success的成功后的回調函數

4. 請解釋一下 JavaScript 的同源策略。

同源策略是客戶端腳本(尤其是Javascript)的重要的安全度量標準。它最早出自Netscape Navigator2.0,其目的是防止某個文檔或腳本從多個不同源裝載。
它的精髓很簡單:它認為自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時,它們應該只被允許訪問來自同一站點的資源,而不是那些來自其它站點可能懷有惡意的資源。
這里的同源指的是:同協議,同域名和同端口

5. 跨域有幾種方法?

跨域的話我研究過的有兩種方法,jsonpCORS兩種,

jsonp 的話以前比較常用一些,主要實現原理就是通過引用js的方法來獲取跨域資源,通過執行js函數的方法調用回調成功的函數,

cors 的話這個比較簡單一些,但是有一些兼容問題,只支持ie10+ 和現代瀏覽器適合用于移動端,實現原理就是在后端加上header頭信息Access-Control-Allow-Origin: *,也可以指定域名訪問Access-Control-Allow-Origin: <u>http://api.qiutc.me</u>

其他的方法暫時還沒有研究過

6. 什么是Ajax和JSON,它們的優缺點。

Ajax是異步JavaScript和XML,用于在Web頁面中實現異步數據交互。
優點:
  可以使得頁面不重載全部內容的情況下加載局部內容,降低數據傳輸量
  避免用戶不斷刷新或者跳轉頁面,提高用戶體驗
缺點:
  對搜索引擎不友好(
  要實現ajax下的前后退功能成本較大
  可能造成請求數的增加
  跨域問題限制
JSON是一種輕量級的數據交換格式,ECMA的一個子集
優點:輕量級、易于人的閱讀和編寫,便于機器(JavaScript)解析,支持復合數據類型(數組、對象、字符串、數字)

7. HTTP和HTTPS

HTTP 協議通常承載于TCP協議之上,在HTTP和TCP之間添加一個安全協議層(SSL或TSL),這個時候,就成了我們常說的HTTPS
默認HTTP的端口號為80,HTTPS的端口號為443。

8. Ajax 是什么? 如何創建一個Ajax?

ajax是一種創建交互式網頁的計算
ajax的全稱:Asynchronous Javascript And XML。異步傳輸+js+xml。
所謂異步,在這里簡單地解釋就是:向服務器發送請求的時候,我們不必等待結果,而是可以同時做其他的事情,等到有了結果它自己會根據設定進行后續操作,與此同時,頁面是不會發生整頁刷新的,提高了用戶體驗

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.
(2)創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.

    var xhr= new XMLHttpRequest();
    xhr.open('GET','demo.url','true');
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 & xhr.status === 200) {
            console.log(responseText)
        }
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,106評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,441評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,211評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,736評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,475評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,834評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,829評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,009評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,559評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,306評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,516評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,038評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,728評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,132評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,443評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,249評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,484評論 2 379

推薦閱讀更多精彩內容

  • 【轉載】CSDN - 張林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牘閱讀 3,506評論 1 14
  • 概要 64學時 3.5學分 章節安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,275評論 0 3
  • 五十三:請解釋 JavaScript 中 this 是如何工作的。1.方法調用模式當一個函數被保存為一個對象的屬性...
    Arno_z閱讀 594評論 0 2
  • 本文旨在加深對前端知識點的理解,資料來源于網絡 position的值, relative和absolute分別是相...
    新晉小牛牛閱讀 1,340評論 0 15
  • 清明 清明時節雨紛紛,路上行人欲斷魂。 借問酒家何處有?牧童遙指杏花村。 清明一直以來我...
    蘋果冰閱讀 252評論 0 1