每日背诵面试题记录

BOM和DOM对象

BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？ XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

说说你对spa单页面应用的理解

• SPA(single-page application)仅在web页面初始化时加载相应的HTML,JavaScipt和css.一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用路由机制实现HTML内容的变化，UI与用户的交互，避免与页面的重新加载

• 优点

  • 用户的体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重新渲染

  • 基于上面一点，SPA相对对服务器压力小

  • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

• 缺点：

  • 初次加载时耗时多：为实现单页web应用功能及显示效果。需要在加载页面的时候将javaScript,css统一加载，部分页面按需加载

  • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理

  • seo难度较大：由于所有的内容都在一个页面中动态替换显示，所以在seo上其有着天然的弱势

this指向，new关键字

this对象是是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中，this等于window，而当函数被作为某个对象调用时，this等于那个对象。 在实际开发中，this 的指向可以通过四种调用模式来判断。

1. 函数调用，当一个函数不是一个对象的属性时，直接作为函数来调用时，this指向全局对象。
2. 方法调用，如果一个函数作为一个对象的方法来调用时，this指向这个对象。
3. 构造函数调用，this指向这个用new新创建的对象。
4. 第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。apply接收参数的是数组，call接受参数列表，`` bind方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this指向除了使用new `时会被改变，其他情况下都不会改变。

new

1. 首先创建了一个新的空对象
2. 设置原型，将对象的原型设置为函数的prototype对象。
3. 让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
4. 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

GET和POST的区别

        1.get方法通过url请求来传递用户的数据，将表单内容各字段名称与其内容，以成对的字符串连接，置于action属性所指程序的url后，数据都会直接显示在url上，就像用户点击一个链接一样，post方法通过HTTP post机制，将表单内各字段名称与其内容放置在HTML表头（header）内一起传送给服务器端交由action属性能所指的程序处理，该程序会通过标准输入（stdin）方式，见表单的数据读出并加以处理。

        2.get方式需要使用request，QueryString来取得变量的值；而post方式通过RequestForm来访问提交的内容；

        3.get方式传输的数据量非常小，一般限制在2kb左右，但是执行效率却比post方法好，而post方式传输的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击。建议：除非你肯定你提交的数据可以一次性提交，否则请尽量用post方法；

        4.get方式提交数据，会带来安全问题，比如一个登录页面，通过get方式提交数据时，用户名和密码将出现在url上，如果页面可以被缓存或者其他人可以访问客户这台机器，就可以从历史记录获得该用户的账号和密码，所以表单提交建议使用post方法；

        5.get是从服务器上获取数据，post是向服务器传送数据。

        6.get方式的安全性较post方式要差些，包含机密信息的化，建议用post数据提交方式；

注意：在做数据查询时，建议用get方式，而在做数据添加、修改或删除时，建议用post方式。

作用域，作用域链

        1.js作用域也就是js识别变量的范围，作用域链也就是js查找变量的顺序

        2.先说作用域，js作用于主要包含全局作用域、局部作用域和es6的块级作用域

                全局作用域：也就是定义在window下的变量范围，在任何地方都可以访问

                局部作用域：是指在函数内部定义的变量范围

                块级作用域：简单来说用let和const在任意的代码块中定义的变量都认为是块级作用域中的变量，例如在for循环中用let定义的变量，在if语句中使用let定义的变量等。

                注意：尽量不要使用全局变量，因为容易导致全局的污染，命名冲突，对bug查找不利。

          3.所谓的作用域链就是由最内部的作用域往最外部查找变量的过程，形成的链条就是作用域链。                                      

重排重绘

网页生成过程：

• HTML被HTML解析器解析成DOM 树
• css则被css解析器解析成CSSOM 树
• 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
• 生成布局（flow），即将所有渲染树的所有节点进行平面合成
• 将布局绘制（paint）在屏幕上

重排(也称回流): 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 触发：

1. 添加或者删除可见的DOM元素
2. 元素尺寸改变——边距、填充、边框、宽度和高度

重绘:当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 触发：

• 改变元素的color、background、box-shadow等属性

重排优化建议：

1. 分离读写操作
2. 样式集中修改
3. 缓存需要修改的DOM元素
4. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
5. 动画开始GPU加速，translate使用3D变化

transform 不重绘，不回流 是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

标签：面试题,HTML,DOM,作用域,记录,对象,背诵,post,页面
来源： https://blog.csdn.net/m0_56272227/article/details/120481377