利用image測試網速 , 上報數據
對於img標籤 , 它的資源是可以跨域的 , 通過src特有的屬性 , 但是img標籤有一個屬性 , crossorigin="anonymous" , 這個屬性是告訴後端 , 我需要去跨域 , 如果後端不讓我們跨域 , 這張圖片就協商不成了
例如下面img標籤的 src 爲 test.png
<img crossorigin="anonymous" src="test.png" />
<!--這裏的圖片路徑我們由不同的服務器返回 , 根據不同的圖片大小 , 以及時間差 , 就可以計算出網速 -->
<script>
var s = Date.now();
var image = new Image();
image.src = 'http://ip地址/test.png' // 假設我們已知這張圖片大小爲4
image.onload = function (){
var e = Date.now();
var w = 4 / (e - s) * 1000 // 這樣就可以算出多少k/s了
}
</script>
第二點 : 做上報數據 --- 上報數據類似於埋點功能 , 系統性能監控平臺 , 系統的bug監控 , 打點
具體實現 , 用戶在對該頁面進行點擊 , 離開等一些操作後 , 會自動發送一個特別小的圖片過去給服務端 , 服務端會根據傳輸過去的圖片token進行分析,
分析點1 : 爲什麼不用ajax走網絡請求 , 正常來說 , 如果走ajax意味着, 就要設計一個接口 , 以及對應的數據庫 , 一般來說 , 這種設計接口是沒有必要的 , 只需要用戶端主動傳輸就可以
如果想要js做統計的話是需要 , 以下代碼做統計
navigator.sendBeacon("abc.php", analyticsData) // 發送成功返回true , 假設數據大小被限制或者請求不成功 , 返回false
什麼是navigator.sendBeacon
- navigator.sendBeacon , 是一個可以將少量數據發送給服務器的web原生api
- 規範定義了一個接口，Web開發人員可以使用該接口來調度異步和無阻塞的數據傳遞，以最大程度地減少與其他時間緊迫的操作之間的資源爭用，同時確保仍處理此類請求並將其傳遞到目的服務器
- Web應用程序通常需要發出請求，以將事件，狀態更新和分析報告給一臺或多臺服務器。這樣的請求通常不需要在客戶端上進行響應處理（例如，結果爲204或200個HTTP響應代碼帶有空的響應body），並且不應與其他高優先級操作（例如，獲取關鍵資源，做出反應）搶奪網絡資源並計算資源輸入，運行動畫等。但是，此類單向請求也負責傳遞關鍵的應用程序和測量數據，從而迫使開發人員使用昂貴的方法來確保其傳遞 , 即它不會搶奪優先級高的請求 , 但瀏覽器又會儘可能保證其發送成功
navigator.sendBeacon 瀏覽器支持
- 以下數據由http://caniuse.com , 提供
- Chrome 37+
- Firefox (Gecko) 31+
- Internet Explorer 不支持
- Opera 24+
- Safari 不支持
- 安卓瀏覽器支持
CSS遠程攻擊漏洞
css的遠程攻擊, 一般都是利用css都url屬性 , 例如: background
<style>
.test{
background: url(js腳本) /*通過這樣攻擊站點 , 例如一些挖礦注入腳本*/
}
</style>
說個題外話 , 跨域的問題 , 可以使用js壓縮進圖片 , 解決跨域 jstopng的問題
iframe遠程localStorage擴容
本域名的iframe的一個值可以通過postMessage , 可以向另外一個域 , 發信息 , 那個域接到信息 , 可以把信息送回來
注意點 : 什麼是postMessage
解釋 : window.postMessage() 方法可以安全地實現跨源通信。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協議（通常爲https），端口號（443爲https的默認值），以及主機 (兩個頁面的模數 Document.domain設置爲相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。從廣義上講，一個窗口可以獲得對另一個窗口的引用（比如 targetWindow = window.opener），然後在窗口上調用 targetWindow.postMessage() 方法分發一個 MessageEvent 消息。接收消息的窗口可以根據需要自由處理此事件。傳遞給 window.postMessage() 的參數（比如 message ）將通過消息事件對象暴露給接收消息的窗口。
說回iframe在不用二級域中 , 只要設置父級域名相同 , 子域名下都cookie是可以相互訪問
html語義化都重要性
更好的seo , 讓爬蟲知道網站結構 , 利於爬蟲標記 , 正確的標籤做正確的事情 , 閱讀方便