window.onload 和 document.onDOMContentLoaded 有什么區(qū)別椰苟？
區(qū)別：
//頁面所有資源加載完成
window.onload = function(){
console.log('window loaded')
}
//DOM 結(jié)構(gòu)解析完成
document.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded ')
})
- window.onload：當(dāng)頁面上所有資源全都加載完成才觸發(fā) onload，觸發(fā)時機特別晚梳凛；
- document.onDOMContentLoaded：DOM 的結(jié)構(gòu)渲染完成就觸發(fā)月培，而不是頁面上的資源加載完成才觸發(fā)。
如何獲取圖片真實的寬高？
<img src="https://upload-images.jianshu.io/upload_images/3624093-96b6fd4aca7fa30e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
<script>
function $(selector){
return document.querySelector(selector);
}
$('img').onload = function(){
console.log(getComputedStyle(this).width);
}
</script>
如何獲取元素的真實寬高？
<style>
div{
height: 100px;
width: 200px;
color: #fff;
background-color: #000;
}
</style>
<div>abcabc</div>
<script>
var div = document.querySelector('div);
console.log(getComputedStyle(div).width); // 200px
console.log(getComputedStyle(div).height); // 100px
</script>
URL 如何編碼解碼凡资？為什么要編碼？
為什么要編碼
在因特網(wǎng)上傳送URL谬运，只能采用ASCII字符集
也就是說URL只能使用英文字母、阿拉伯?dāng)?shù)字和某些標(biāo)點符號垦藏，不能使用其他文字和符號梆暖，即
只有字母和數(shù)字[0-9a-zA-Z]、一些特殊符號$-_.+!*'()[不包括雙引號]掂骏、以及某些保留字（空格轉(zhuǎn)換為+）轰驳，才可以不經(jīng)過編碼直接用于URL
這意味著 如果URL中有漢字，就必須編碼后使用弟灼。 但是麻煩的是 標(biāo)準(zhǔn)的國際組織并沒有規(guī)定具體的編碼方法级解，而是交給應(yīng)用程序（瀏覽器）自己決定。 這導(dǎo)致"URL編碼"成為了一個混亂的領(lǐng)域田绑。
如果包含中文勤哗，其實會自動編碼的。
URL 如何編碼解碼
URL編碼通常也被稱為百分號編碼（percent-encoding）掩驱，是因為它的編碼方式非常簡單：
使用%加上兩位的字符——0123456789ABCDEF——代表一個字節(jié)的十六進制形式芒划。URL編碼要做的冬竟，就是將每一個非安全的ASCII字符都被替換為“%xx”格式，
對于非ASCII字符民逼，RFC文檔建議使用utf-8對其進行編碼得到相應(yīng)的字節(jié)泵殴，然后對每個字節(jié)執(zhí)行百分號編碼。
如"中文"使用UTF-8字符集得到的字節(jié)為0xE4 0xB8 0xAD 0xE6 0x96 0x87拼苍，經(jīng)過Url編碼之后得到"%E4%B8%AD%E6%96%87"
.+ %20
./ %2F
.? %3F
.% %25
.# %23
.& %26
URL的編碼/解碼方法
JavaScript提供四個URL的編碼/解碼方法笑诅。
decodeURI()decodeURIComponent()encodeURI()encodeURIComponent()
區(qū)別
encodeURI方法不會對下列字符編碼
1\. ASCII字母
2\. 數(shù)字
3\. ~!@#$&*()=:/,;?+'
encodeURIComponent方法不會對下列字符編碼
1\. ASCII字母
2\. 數(shù)字
3\. ~!*()'
所以encodeURIComponent比encodeURI編碼的范圍更大。
實際例子來說疮鲫，encodeURIComponent會把 http:// 編碼成 http%3A%2F%2F 而encodeURI卻不會吆你。
如果你需要編碼整個URL，然后需要使用這個URL棚点，那么用encodeURI早处。
encodeURI("[http://blog.jirengu.com/?cat=11&a=饑人谷](http://blog.jirengu.com/?cat=11&a=%E9%A5%A5%E4%BA%BA%E8%B0%B7)");
//"[http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7](http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7)";
其中，漢字被編碼瘫析。但是如果你用了encodeURIComponent砌梆，那么結(jié)果變?yōu)?/p>
"http%3A%2F%2Fblog.jirengu.com%2F%3Fcat%3D11%26a%3D%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7"
補全如下函數(shù)，判斷用戶的瀏覽器類型贬循。
function isAndroid(){
}
function isIphone(){
}
function isIpad(){
}
function isIOS(){
}
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
function isIphone(){
return /Iphone/.test(navigator.userAgent);
}
function isIpad(){
return /Ipad/.test(navigator.userAgent);
}
function isIOS(){
return /(Iphone)|(Ipad)/i.test(navigator.userAgent);
}
通過userAgent屬性識別瀏覽器咸包，不是一個好辦法。因為必須考慮所有的情況（不同的瀏覽器杖虾，不同的版本）烂瘫，非常麻煩，而且無法保證未來的適用性奇适，更何況各種上網(wǎng)設(shè)備層出不窮坟比，難以窮盡。所以嚷往，現(xiàn)在一般不再識別瀏覽器了葛账，而是使用“功能識別”方法，即逐一測試當(dāng)前瀏覽器是否支持要用到的JavaScript功能皮仁。
cookie & session &localStorage 分別是什么籍琳？
一、cookie
- cookie是存儲在瀏覽器上的一小段數(shù)據(jù)贷祈，用來記錄某些當(dāng)頁面關(guān)閉或者刷新后仍然需要記錄的信息趋急。在控制臺用 「document.cookie」查看你當(dāng)前正在瀏覽的網(wǎng)站的cookie。
- cookie可以使用 js 在瀏覽器直接設(shè)置（用于記錄不敏感信息势誊，如用戶名）, 也可以在服務(wù)端通使用 HTTP 協(xié)議規(guī)定的 set-cookie 來讓瀏覽器種下cookie呜达，這是最常見的做法。（打開一個網(wǎng)站粟耻，清除全部cookie闻丑，然后刷新頁面漩怎，在network的Response headers試試找一找set-cookie吧）
- 每次網(wǎng)絡(luò)請求 Request headers 中都會帶上cookie。所以如果 cookie 太多太大對傳輸效率會有影響嗦嗡。
- 一般瀏覽器存儲cookie 最大容量為4k勋锤，所以大量數(shù)據(jù)不要存到cookie。
- 設(shè)置cookie時的參數(shù)：
- path：表示 cookie 影響到的路徑侥祭，匹配該路徑才發(fā)送這個 cookie叁执。expires 和 maxAge：告訴瀏覽器 cookie 時候過期，maxAge 是 cookie 多久后過期的相對時間矮冬。不設(shè)置這兩個選項時會產(chǎn)生 session cookie谈宛，session cookie 是 transient 的，當(dāng)用戶關(guān)閉瀏覽器時胎署，就被清除吆录。一般用來保存 session 的 session_id。
- secure：當(dāng) secure 值為 true 時琼牧，cookie 在 HTTP 中是無效恢筝，在 HTTPS 中才有效
- httpOnly：瀏覽器不允許腳本操作 document.cookie 去更改 cookie。一般情況下都應(yīng)該設(shè)置這個為 true巨坊，這樣可以避免被 xss 攻擊拿到cookie撬槽。[cookie 參數(shù)][簡述 Cookie 是什么]
二、session
當(dāng)一個用戶打開淘寶登錄后趾撵，刷新瀏覽器仍然展示登錄狀態(tài)侄柔。服務(wù)器如何分辨這次發(fā)起請求的用戶是剛才登錄過的用戶呢？這里就使用了session保存狀態(tài)占调。用戶在輸入用戶名密碼提交給服務(wù)端暂题，服務(wù)端驗證通過后會創(chuàng)建一個session用于記錄用戶的相關(guān)信息，這個 session 可保存在服務(wù)器內(nèi)存中究珊，也可保存在數(shù)據(jù)庫中薪者。
創(chuàng)建session后，會把關(guān)聯(lián)的session_id 通過setCookie 添加到http響應(yīng)頭部中苦银。
瀏覽器在加載頁面時發(fā)現(xiàn)響應(yīng)頭部有 set-cookie字段，就把這個cookie 種到瀏覽器指定域名下赶站。
當(dāng)下次刷新頁面時幔虏，發(fā)送的請求會帶上這條cookie， 服務(wù)端在接收到后根據(jù)這個session_id來識別用戶贝椿。
cookie 是存儲在瀏覽器里的一小段「數(shù)據(jù)」想括，而session是一種讓服務(wù)器能識別某個用戶的「機制」，session 在實現(xiàn)的過程中需要使用cookie烙博。 二者不是同一維度的東西瑟蜈。
三烟逊、localStorage
localStorage HTML5本地存儲web storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中铺根，保存后數(shù)據(jù)永遠(yuǎn)存在不會失效過期宪躯，除非用 js手動清除。
不參與網(wǎng)絡(luò)傳輸位迂。
一般用于性能優(yōu)化访雪，可以保存圖片、js掂林、css臣缀、html 模板、大量數(shù)據(jù)泻帮。
使用 localStorage封裝一個 Storage 對象精置，達(dá)到如下效果：
Storage.set('name', '饑人谷')
Storage.set('age', 2, 30) ; //設(shè)置 name 字段存儲的值為'饑人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饑人谷’
Storage.get('age') // 如果不超過30秒，返回數(shù)字類型的2锣杂；如果超過30秒脂倦，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超過60秒蹲堂，返回數(shù)組狼讨； 如果超過60秒，返回undefined
var Storage = (function(){
return {
set: function(key, value, expireSeconds){
localStorage[key] = JSON.stringify({
value: value,
expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
})
},
get: function(key){
if(localStorage[key] === undefined){
return
}
var o = JSON.parse(localStorage[key])
if(o.expired === undefined || Date.now() < o.expired){
return o.value
}else{
delete localStorage[key]
}
}
}
