前端重点知识总结—BOM

前端 1,079° Views

浏览器对象模型（Browser Object Model），不同浏览器提供了可以对浏览器窗口进行访问和操作的方法。

1.常用的Bom属性

① location对象

  1. location.href-- 返回或设置当前文档的URL
  2. location.search -- 返回URL中的查询字符串部分。例如 http://www.xxx.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
  3. location.hash -- 返回URL#后面的内容，如果没有#，返回空
  4. location.host -- 返回URL中的域名部分，例如www.xxx.com
  5. location.hostname -- 返回URL中的主域名部分，例如xxx.com
  6. location.pathname -- 返回URL的域名后的部分。例如 http://www.xxx.com/xhtml/ 返回/xhtml/
  7. location.port -- 返回URL中的端口部分。例如 http://www.xxx.com:8080/xhtml/ 返回8080
  8. location.protocol -- 返回URL中的协议部分。例如 http://www.xxx.com:8080/xhtml/ 返回(//)前面的内容http:
  9. location.assign -- 设置当前文档的URL
  10. location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
  11. location.reload() -- 重载当前页面

② history对象

  1. history.go() -- 前进或后退指定的页面数 history.go(num);
  2. history.back() -- 后退一页
  3. history.forward() -- 前进一页
  4. history.pushState(stateData,nameString,pathUrl) -- 把路由页面放入历史记录，无刷新切换路由
  5. history.replaceState(stateData,nameString,pathUrl) -- 不放入历史，直接切换

③ Navigator对象

  1. navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
  2. navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

2.Cookie、sessionStorage、localStorage的区别

  1. Cookie：每次都会在同源的http请求头中携带（即使不需要，过多会带来性能问题），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  2. cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
  3. cookie存储的大小很小只有4K左右，而storage可以存5M甚至更大。
  4. sessionStorage仅在当前浏览器窗口关闭前有效，不可能持久保持；localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  5. localStorage 和cookie在所有同源窗口中都是共享的。而sessionStorage在新标签页总是会初始化一个新的 session。
  6. localStorage可以用来在页面之间传递参数。
  7. 易用性：cookie需要程序员自己封装，原生的cookie使用url query形式存储，开发不友好。

3.浏览器在渲染页面时候会生成哪两棵树？

  1. DOM树：浏览器会遍历服务器返回的HTML文档节点，生成DOM树
  2. CSSOM规则树：浏览器解析CSS样式和文件生成。

4.浏览器缓存机制

浏览器的缓存分为强缓存和协商缓存，当客户端请求某个资源的时候，获取缓存的流程如下：

  1. 先根据这个资源的http header（请求头）判断它是否命中强缓存，如果命中，则直接从本地缓存中获取资源，未命中则向服务器请求资源。
  2. 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些请求头验证这个资源是否命中协商缓存，这个过程成为http再验证，如果命中，服务器直接返回请求而不返回资源，告诉客户端从缓存中获取，客户端收到返回后就直接从客户端缓存获取资源。协商缓存返回的状态码一般为304
  3. 强缓存和协商缓存的共同之处在于：如果命中缓存，服务器不会返回资源；区别是：强缓存不发送请求到服务器，但是协商缓存会发送请求到服务器。
  4. 当协商缓存没有命中时，服务器会返回资源给客户端。
  5. 当ctrl+F5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。
  6. 当F5刷新页面时，跳过强缓存但会检查协商缓存。
  7. Chrome在解析html时会对a标签的域名进行预解析，然后缓存。

强制刷新ctrl + f5 ，请求头header带有Cache-control：no-cache（为了兼容，还带了 Pragma: no-cache），同时不带有if-not-match / If-Modified-Since，所以请求服务器协商缓存会被当做失效，返回200和最新内容。

关于浏览器缓存的详细内容，包含请求头中携带的相关字段请点此查看。

5.浏览器的内核分别是什么?

  1. IE: trident内核
  2. 火狐：gecko内核
  3. Safari：webkit内核
  4. Opera：以前是presto内核，现Blink内核(基于webkit)
  5. Chrome：Blink(基于webkit)

本文固定连接：https://code.zuifengyun.com/2018/09/1896.html，转载须征得作者授权。

加载中...
加载中...