DOM相关

1. JS 的各种位置，比 clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop 的区别?

• clientHeight: 表示的是可视区域的高度，不包含border和滚动条
• offsetHeight: 表示可视区域的高度，包合了border和滚动条
• scrollHeight: 表示了所有区域的高度，包含了因为滚动被隐藏的部分
• clientTop: 表示边框 border 的厚度，在未指定的情况下一般为O
• scrollTop: 滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度

2. 预加载和懒加载的区别，预加载在什么时间加载合适

• 预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用。
• 懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源

两者主要区别是一个是提前加载，一个是迟缓其至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

3. 在浏览器输入一个网址，到显示页面，中间发生了什么

1. DNS解析：浏览器首先会将输入的URL解析成对应的IP地址。如果浏览器缓存中没有对应的IP地址，那么会向本地DNS服务器发送请求，本地DNS服务器会根据自身的缓存情况或者向根域名服务器进行递归查询，最终将域名解析为IP地址。

2. 建立TCP连接：浏览器通过解析得到的IP地址和端口号，向Web服务器发送TCP连接请求，与Web服务器建立TCP连接。

3. 发送HTTP请求：一旦TCP连接建立成功，浏览器就会向Web服务器发送HTTP请求，请求获取指定URL的资源（如HTML、CSS、JavaScript、图片等）。

4. 服务器处理请求：Web服务器接收到来自浏览器的HTTP请求后，会根据请求的内容进行相应的处理，比如读取文件、运行脚本等。

5. 返回HTTP响应：服务器处理完请求后，将生成的HTTP响应（包括状态码、内容等）发送回浏览器。

6. 浏览器解析内容：浏览器接收到HTTP响应后，会根据响应中的内容类型进行解析，比如渲染HTML、加载CSS和JavaScript等。

7. 页面渲染：浏览器根据解析到的内容和执行JavaScript代码，开始渲染页面，并显示给用户。

整个过程涉及到网络通信、协议处理、服务器处理、内容解析和页面渲染等多个环节，最终完成了从输入网址到显示页面的整个过程。

4. 浏览器是如何渲染页面

1. HTML解析：浏览器从服务器接收到HTML文档后，会进行解析。解析的过程包括词法分析和语法分析。词法分析将HTML文档分割成一个个词法单元（token），语法分析则将这些词法单元转化为DOM节点，并构建DOM树的结构。

2. CSS解析：浏览器接收到CSS样式表后，会进行解析。解析的过程同样包括词法分析和语法分析。通过词法分析，浏览器将CSS样式表分割成一个个词法单元，然后通过语法分析将其转化为样式规则，最终构建成CSSOM树。

3. 构建渲染树：浏览器将DOM树和CSSOM树合并成一棵渲染树（Render Tree）。渲染树中只包含需要显示的内容，例如不可见的节点（如head、display: none等）将被排除在外。

4. 布局计算：浏览器根据渲染树中每个节点的样式和尺寸信息，计算出它们在页面上的确切位置。这个过程称为布局计算（Layout）或重排（Reflow）。浏览器需要考虑盒模型、定位、浮动等因素进行布局计算。

5. 绘制页面：浏览器根据计算得到的位置和样式信息，将渲染树中的每个节点绘制到屏幕上。这个过程称为绘制（Painting）或重绘（Repaint）。浏览器使用图形库将各个元素绘制到屏幕上，包括文字、图像、背景色等。

6. JavaScript执行：如果页面中有JavaScript代码，浏览器会执行这些脚本。JavaScript代码可能会修改DOM结构、样式或触发重新布局和绘制，从而影响页面渲染过程。

7. 渲染完成：当所有节点都被布局和绘制之后，页面渲染完成，用户就可以看到最终的页面内容了。

以上就是浏览器渲染页面的更加详细的过程，包括HTML解析、CSS解析、渲染树构建、布局计算、绘制页面和JavaScript执行等多个环节。理解这些环节可以帮助我们更好地优化页面性能，提高用户体验。