(08).前端知识库之浏览器篇

walking957
64 阅读4分钟

一、浏览器渲染机制

  1. 浏览器的渲染机制 浏览器通过以下步骤将网页转换为可视化界面：
  • 解析HTML：构建DOM树（Document Object Model）。
  • 解析CSS：生成CSSOM树（CSS Object Model）。
  • 布局（Layout）：根据DOM和CSSOM计算元素的几何位置（如坐标、大小）。
  • 绘制（Paint）：将布局结果渲染到屏幕上。
  • 合成（Composite）：将多个图层合并为最终画面（如GPU加速）。

  1. 浏览器渲染页面的流程

  2. 输入URL：用户输入网址或点击链接。

  3. DNS解析：将域名转换为IP地址。

  4. 建立TCP连接：通过三次握手与服务器建立连接。

  5. 发送HTTP请求：获取网页资源（HTML/CSS/JS等）。

  6. 处理响应：解析资源并构建DOM树、CSSOM树。

  7. 执行JavaScript：动态修改DOM和样式。

  8. 触发重绘与回流：更新布局后重新渲染页面。

  9. 重绘与回流的触发场景及优化

  • 触发场景：
    • 回流：DOM结构变化（如增删节点）、窗口大小调整、样式修改（如width、height）。
    • 重绘：样式变化（如color、background），不影响布局。
  • 优化方法：
    • 减少DOM操作，使用DocumentFragment批量修改。
    • 避免频繁读取布局属性（如offsetWidth），改用requestAnimationFrame优化动画。
    • 使用CSS动画代替JavaScript动画（利用GPU加速）。
  1. 优化重绘与回流
  • 批量修改样式：通过class切换或CSS Variables集中控制。
  • 避免强制同步布局：使用getComputedStyle()提前计算样式。
  • 利用will-change属性：提前通知浏览器哪些元素可能变化。

二、缓存机制

  1. 浏览器的缓存机制
  • 强缓存：直接使用本地缓存资源（无需服务器验证），通过Cache-Control: max-age控制有效期。
  • 协商缓存：资源过期后，客户端携带缓存标识（如Last-Modified、ETag）向服务器验证是否可用。
  1. 如何控制浏览器缓存
  • 设置HTTP头： 
    Cache-Control: no-cache, no-store, must-revalidate  # 禁用缓存
Cache-Control: max-age=3600  # 缓存1小时
ETag: "unique-value"  # 协商缓存标识
  • 使用版本号或指纹（如文件名加哈希）强制更新资源。

三、跨域问题

  1. 跨域产生的原因 浏览器同源策略限制：仅允许访问同协议、同域名、同端口的资源。

  2. 解决跨域的常见方法

  • CORS（跨域资源共享）：服务器设置Access-Control-Allow-Origin响应头。
  • JSONP：通过<script>标签绕过同源限制（仅支持GET请求）。
  • 代理服务器：通过中间服务器转发请求（如Nginx）。
  • WebSocket：协议本身支持跨域。
  1. 跨域解决方案的具体实现
  • CORS实现： 
    // 服务器端设置（Node.js示例）
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  • JSONP实现： 
    <script src="https://api.example.com/data?callback=handleResponse"></script>

四、网络请求与页面加载

  1. 从输入网址到页面呈现的完整过程
  2. DNS解析：将域名转为IP地址。
  3. TCP握手：建立安全连接（HTTPS需TLS加密）。
  4. 发送HTTP请求：获取HTML、CSS、JS等资源。
  5. 解析资源：构建DOM树和CSSOM树。
  6. 执行JS：动态修改页面内容（如渲染SPA框架）。
  7. 触发渲染：完成布局、绘制和合成，页面显示。

五、数据格式

  1. XML与JSON的区别
    特性XMLJSON
    语法标签嵌套，严格闭合键值对形式，更简洁
    体积较大，冗余标签多更轻量，适合作为数据传输格式
    解析速度较慢快速（浏览器原生支持）
    应用场景配置文件、SOAP Web ServiceWeb API、NoSQL数据库存储

六、浏览器原理

  1. 事件循环在浏览器与Node中的差异
  • 浏览器：
    • 单线程事件循环，分为宏任务（如setTimeout）和微任务（如Promise.then）。
    • 执行顺序：微任务优先于宏任务。
  • Node.js：
    • 基于libuv多线程事件循环，但对外暴露单线程接口。
    • 使用process.nextTick()插入到当前循环的末尾，优先级高于微任务。

  1. 主流浏览器内核差异

    内核浏览器特点
    TridentIE/Edge（旧版）兼容性较差，已逐步淘汰
    GeckoFirefox开源，注重隐私和性能
    WebKitSafari专注于Web标准，曾为Chrome基础
    BlinkChrome/Opera/Edge（新版）轻量、快速，Chromium项目分支

    兼容性测试：

  • 使用工具：BrowserStack、CrossBrowserTesting。
  • 通过特性检测（如Modernizr）动态适配不同内核。
  1. Quirks模式与Standards模式
  • Quirks模式：模拟老旧浏览器（如IE5）的怪异行为，解决历史遗留问题。
  • Standards模式：严格遵循W3C标准，推荐默认使用。
  • 触发方式：缺失<!DOCTYPE>声明或使用过时文档类型。
avatar
文章
阅读
粉丝