【前端】BOM & DOM

两天更新完毕，建议关注收藏点赞
友谊链接：
HTML&CSS&LESS&Bootstrap&Emmet
Axios & AJAX & Fetch
BOM DOM
待整理 js2

---

• Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM)。官方文档点击跳转
  

• 浏览器如何界面渲染的
  
  
  
  解析（Parser）HTML，生成DOM树(DOM Tree)
  同时解析（Parser） CSS，生成样式规则 (Style Rules)
  根据DOM树和样式规则，生成渲染树(Render Tree)
  进行结构 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
  进行绘制 Painting(重绘): 根据盘算和获取的信息进行整个页面的绘制
  Display: 展示在页面上
  
• 回流(重排)
  当 Render Tree 中部分或者全部元素的尺寸、结构、结构等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
  会导致回流（重排）的操作：简单明确影响到结构了，就会有回流
   页面的首次刷新
   浏览器的窗口大小发生改变
   元素的大小或位置发生改变
   改变字体的大小
   内容的变化（如：input框的输入，图片的大小）
   激活css伪类 （如：:hover）
   脚本操作DOM（添加或者删除可见的DOM元素）
  
• 重绘
  由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档结构时(比如：color、background-color、outline等), 称为重绘。
  
• 重绘不肯定引起回流，而回流肯定会引起重绘。
  
  
  
  
• JS运行机制
  
  
  
  • JS是单线程，不能同时进行；因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处置惩罚页面中用户的交互，以及操作 DOM 而诞生的。比如我们对
    某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
    
  • 同步使命v.s.异步使命
    为相识决这个问题，利用多核 CPU 的盘算能力，HTML5 提出 Web Worker 尺度，答应 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步使命和异步使命。
    JS中全部使命可以分成两种，一种是同步使命（synchronous），另一种是异步使命（asynchronous）。本质区别： 这条流水线上各个流程的执行序次不同。
    同步使命指的是：在主线程【执行栈】上列队执行的使命，只有前一个使命执行完毕，才能执行后一个使命；
    异步使命指的是：不进入主线程、而进入【使命队列】的使命，当主线程中的使命运行完了，才会从”使命队列”取出异步使命放入主线程执行。比如你在做一件事变时，因为这件事变会花费很长时间，在做这件事的同时，你还可以去处置惩罚其他事变。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
    
    
    
    
  • JS执行机制：变乱循环
    
    
    
    
    
    
    
  1. //下面三个片段的输出各是什么
  2. console.log(1);
  3. setTimeout(function() {
  4.     console.log(3);
  5. }, 1000);
  6. console.log(2);
  7. //1->2->3
  9. console.log(1);
  10. setTimeout(function() {
  11.     console.log(3);
  12. }, 0);
  13. //将回调函数放入 宏任务队列，虽然 0ms 但仍然要等主线程任务执行完毕后才执行。
  14. //即使 setTimeout 的时间是 0ms，它依然不会立即执行，而是等 同步任务执行完毕 才执行。
  15. console.log(2);
  16. //1->2->3
  18. console.log(1);
  19. document.onclick = function() {
  20.     console.log('click');
  21. }
  22. console.log(2);
  23. setTimeout(function() {
  24.     console.log(3);
  25. }, 3000);
  26. //1 2 3（如果 3 秒不点击）
  27. // 1 2 click 3（如果 3 秒内点击）

  复制代码
  BOM浏览器对象模型
  
  BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。其焦点/顶级对象是 window。
  ​ BOM 由一系列相关的对象构成，而且每个对象都提供了许多方法与属性。
  ​ BOM 缺乏尺度，JavaScript 语法的尺度化组织是 ECMA，DOM 的尺度化组织是 W3C，BOM 最初是Netscape 浏览器尺度的一部分。
  BOM>DOM，BOM包含DOM
  
  
  
  
  
  
  
  • window对象
    是js访问浏览器窗口的接口。
    是一个全局对象，定义在全局作用域中的变量、函数都会酿成window对象的属性和方法。
    调用时可省略window，比方alert(),prompt()等
    
  • 
    
    
    
    • window.name 是 JavaScript 里一个独特的属性，它和一样寻常的变量不同，具有持久性和跨页面共享的特性。window.name 在页面刷新后仍然保存
      
    
    
  
  
  • 一样寻常来说，JavaScript 变量在页面刷新后会被重置，但 window.name 不会丢失，除非手动修改或关闭浏览器。window.name 可以在同一窗口的不同页面之间共享
    
  • 如果用户在当前窗口导航到一个新页面，window.name 的值不会丢失，可以在新页面中访问它！
    
  • window.name 答应存储超长字符串
    一样寻常的 localStorage 最大存储约 5MB，而 window.name 可以存储比 localStorage 更多的数据，乃至可以用来存储 JSON 字符串。
    
  • 安全性风险：由于 window.name 可以在不同页面之间共享，如果不小心泄露，可能会导致安全风险（如 XSS 攻击）。