浏览器对象模型(Browser Object Model),不同浏览器提供了可以对浏览器窗口进行访问和操作的方法。
1.常用的Bom属性
① location对象
location.href
-- 返回或设置当前文档的URLlocation.search
-- 返回URL中的查询字符串部分。例如 http://www.xxx.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdulocation.hash
-- 返回URL#后面的内容,如果没有#,返回空location.host
-- 返回URL中的域名部分,例如www.xxx.comlocation.hostname
-- 返回URL中的主域名部分,例如xxx.comlocation.pathname
-- 返回URL的域名后的部分。例如 http://www.xxx.com/xhtml/ 返回/xhtml/location.port
-- 返回URL中的端口部分。例如 http://www.xxx.com:8080/xhtml/ 返回8080location.protocol
-- 返回URL中的协议部分。例如 http://www.xxx.com:8080/xhtml/ 返回(//)前面的内容http:location.assign
-- 设置当前文档的URLlocation.replace()
-- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url);location.reload()
-- 重载当前页面
② history对象
history.go()
-- 前进或后退指定的页面数 history.go(num);history.back()
-- 后退一页history.forward()
-- 前进一页history.pushState(stateData,nameString,pathUrl)
-- 把路由页面放入历史记录,无刷新切换路由history.replaceState(stateData,nameString,pathUrl)
-- 不放入历史,直接切换
③ Navigator对象
navigator.userAgent
-- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)navigator.cookieEnabled
-- 返回浏览器是否支持(启用)cookie
2.Cookie、sessionStorage、localStorage的区别
- Cookie:每次都会在同源的http请求头中携带(即使不需要,过多会带来性能问题),即cookie在浏览器和服务器间来回传递。而
sessionStorage
和localStorage
不会自动把数据发给服务器,仅在本地保存。 - cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
- cookie存储的大小很小只有4K左右,而storage可以存5M甚至更大。
sessionStorage
仅在当前浏览器窗口关闭前有效,不可能持久保持;localStorage
始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage
和cookie在所有同源窗口中都是共享的。而sessionStorage
在新标签页总是会初始化一个新的 session。localStorage
可以用来在页面之间传递参数。- 易用性:cookie需要程序员自己封装,原生的cookie使用url query形式存储,开发不友好。
3.浏览器在渲染页面时候会生成哪两棵树?
- DOM树:浏览器会遍历服务器返回的HTML文档节点,生成DOM树
- CSSOM规则树:浏览器解析CSS样式和文件生成。
4.浏览器缓存机制
浏览器的缓存分为强缓存和协商缓存,当客户端请求某个资源的时候,获取缓存的流程如下:
- 先根据这个资源的http header(请求头)判断它是否命中强缓存,如果命中,则直接从本地缓存中获取资源,未命中则向服务器请求资源。
- 当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些请求头验证这个资源是否命中协商缓存,这个过程成为http再验证,如果命中,服务器直接返回请求而不返回资源,告诉客户端从缓存中获取,客户端收到返回后就直接从客户端缓存获取资源。协商缓存返回的状态码一般为304
- 强缓存和协商缓存的共同之处在于:如果命中缓存,服务器不会返回资源;区别是:强缓存不发送请求到服务器,但是协商缓存会发送请求到服务器。
- 当协商缓存没有命中时,服务器会返回资源给客户端。
- 当ctrl+F5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存。
- 当F5刷新页面时,跳过强缓存但会检查协商缓存。
- Chrome在解析html时会对a标签的域名进行预解析,然后缓存。
强制刷新ctrl + f5 ,请求头header带有Cache-control:no-cache(为了兼容,还带了 Pragma: no-cache),同时不带有if-not-match / If-Modified-Since,所以请求服务器协商缓存会被当做失效,返回200和最新内容。
关于浏览器缓存的详细内容,包含请求头中携带的相关字段请点此查看。
5.浏览器的内核分别是什么?
- IE: trident内核
- 火狐:gecko内核
- Safari:webkit内核
- Opera:以前是presto内核,现Blink内核(基于webkit)
- Chrome:Blink(基于webkit)
本文固定连接:https://code.zuifengyun.com/2018/09/1896.html,转载须征得作者授权。