2025面试题（10）
一、从输入url到渲染出页面的整个过程？
DNS解析：将域名转换为IP地址。
TCP连接：与服务器建立TCP三次握手。
HTTP请求：发送HTTP请求（GET/POST等）。
服务器响应：返回HTML文件及资源（CSS/JS/图片等）。
解析与渲染：
HTML解析：构建DOM树。
CSS解析：生成CSSOM树，与DOM合并为渲染树（Render Tree）。
布局（Layout）：计算元素位置和大小。
绘制（Paint）：将渲染树转换为屏幕像素。
JS执行：阻塞DOM/CSSOM构建，可通过
async/defer优化。
关键点：
优化方向：减少DNS查询、HTTP请求（合并资源）、Critical CSS、懒加载。
将 CSS 放在
<head>的核心目的是让浏览器尽早加载和解析样式，避免无样式闪烁、优化渲染流程，从而提升用户体验和页面性能。这是网页开发中被广泛遵循的最佳实践。
二、window.onload 和DOMContentLoaded的区别？
- DOMContentLoaded：DOM 树构建完成后触发，无需等待样式表、图片等资源加载完毕。
- window.onload：页面所有资源（DOM、样式表、图片、JS 等）全部加载完成后才触发，晚于 DOMContentLoaded。
关键区别：
DOMContentLoaded更快，适合初始化交互；onload更晚，确保所有资源可用。
三、性能优化？
性能优化原则：多使用内存、缓存或其他方法
减少 CPU 计算量，减少网络加载耗时
(适用于所有编程的性能优化 -- 空间换时间 )
1.让加载更快：
（1）减少资源体积，压缩代码；
（2）减少访问次数：合并代码，SSR服务器端渲染，缓存
缓存：静态资源加 hash 后缀，根据文件内容计算 hash；
文件内容不变，则 hash 不变，则 url不变；
url 和文件不变，则会自动触发 http 缓存机制，返回 304；
SSR：服务器端渲染:将网页和数据一起加载，一起渲染；
非 SSR(前后端分离):先加载网页，再加载数据，再渲染数据；
早先的 JSPASP PHP，现在的 vue React SSR；
（3）使用更快的网络：CDN
2.让渲染更快：
（1）css放在head，JS放在body下面
（2）尽早开始执行JS，用DOMContentLoaded触发
（3）懒加载（图片懒加载，上滑加载更多）
（4）对DOM查询进行缓存
（5）频繁DOM操作，合并到一起插入DOM结构
（6）节流throttle防抖debounce
防抖：监听一个输入框的，文字变化后触发 change 事件
直接用 keyup 事件，则会频发触发 change 事件
防抖:用户输入结束或暂停时，才会触发 change 事件
节流：拖拽一个元素时，要随时拿到该元素被拖拽的位置
直接用 drag 事件，则会频发触发，很容易导致卡顿
节流:无论拖拽速度多快，都会每隔 100ms 触发一次
