前端知識點總結

前端知識點總結

• 瀏覽器歡迎補充

• html歡迎補充

• css盡情期待

• javascript盡情期待

• vue盡情期待

• es6盡情期待

• typeScript盡情期待

1、瀏覽器

什麼是Bom? Bom是瀏覽器對象。有哪些經常使用的Bom屬性呢？

(1)location對象

location.href-- 返回或設置當前文檔的URL
location.search -- 返回URL中的查詢字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu返回包括(?)後面的內容?id=5&name=dreamdu
location.hash -- 返回URL#後面的內容，若是沒有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL的域名後的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的協議部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的內容http:
location.assign -- 設置當前文檔的URL
location.replace() -- 設置當前文檔的URL，而且在history對象的地址列表中移除這個URL location.replace(url);
location.reload() -- 重載當前頁面

(2)history對象

history.go() -- 前進或後退指定的頁面數 history.go(num);
history.back() -- 後退一頁
history.forward() -- 前進一頁

(3)Navigator對象

navigator.userAgent -- 返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
navigator.cookieEnabled -- 返回瀏覽器是否支持(啓用)cookie

到此經常使用瀏覽器對象基本說完，歡迎補充
複製代碼

Cookie、sessionStorage、localStorage的區別

• Cookie：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下,存儲的大小很小隻有4K左右。 （key：能夠在瀏覽器和服務器端來回傳遞，存儲容量小，只有大約4K左右）
• sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持，localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。（key：自己就是一個回話過程，關閉瀏覽器後消失，session爲一個回話，當頁面不一樣即便是同一頁面打開兩次，也被視爲同一次回話）
• localStorage：localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。（key：同源窗口都會共享，而且不會失效，無論窗口或者瀏覽器關閉與否都會始終生效）

cookie補充說明已經應用舉例：

• 保存用戶登陸狀態。例如將用戶id存儲於一個cookie內，這樣當用戶下次訪問該頁面時就不須要從新登陸了，如今不少論壇和社區都提供這樣的功能。 cookie還能夠設置過時時間，當超過期間期限後，cookie就會自動消失。所以，系統每每能夠提示用戶保持登陸狀態的時間：常見選項有一個月、三個 月、一年等。

• 跟蹤用戶行爲。例如一個天氣預報網站，可以根據用戶選擇的地區顯示當地的天氣狀況。若是每次都須要選擇所在地是煩瑣的，當利用了 cookie後就會顯得很人性化了，系統可以記住上一次訪問的地區，當下次再打開該頁面時，它就會自動顯示上次用戶所在地區的天氣狀況。由於一切都是在後 臺完成，因此這樣的頁面就像爲某個用戶所定製的同樣，使用起來很是方便

• 定製頁面。若是網站提供了換膚或更換佈局的功能，那麼可使用cookie來記錄用戶的選項，例如：背景色、分辨率等。當用戶下次訪問時，仍然能夠保存上一次訪問的界面風格。

2、html

(1)對HTML語義化標籤的理解

HTML5語義化標籤是指正確的標籤包含了正確的內容，結構良好，便於閱讀以及爬蟲的爬取和seo，好比nav表示導航條，相似的還有article、header、footer等等標籤。

(2)iframe是什麼？有什麼缺點？

定義：iframe元素會建立包含另外一個文檔的內聯框架 提示：能夠將提示文字放在之間，來提示某些不支持iframe的瀏覽器

缺點：

• 會阻塞主頁面的onload事件
• 搜索引擎沒法解讀這種頁面，不利於SEO
• iframe和主頁面共享鏈接池，而瀏覽器對相同區域有限制因此會影響性能。