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. 跨域有幾種方法?
跨域的話我研究過的有兩種方法,jsonp
和CORS
兩種,
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)
}