浏览器工作原理（1）认识浏览器

浏览器的三大进化路线

  1. 应用程序 Web 化
    应用程序 web 化的原理在于云计算的普及和HTML5技术的快速发展，越来越多的应用转向了浏览器/服务器（B/S)架构。视频、音频、游戏几大核心场景都在往 Web 的使用场景切换。
  2. Web 应用的移动化
    Web 应用在技术层面的问题：
  • 渲染过于复杂、性能不及原生应用
  • 离线时用户无法使用
  • 无法接收消息推送
  • 移动端没有一级入口

    Google 推出了 PWA 方案来整合 Web 和本地程序各自的优势、

  1. Web 操作系统化
    3-1. 利用 Web 技术构建一个纯粹的操作系统（如 ChromeOS）
    3-2. 浏览器底层结构往操作系统架构方向发展
  • Chrome 朝着 SOA 的方向演化，未来很多模块都会以服务的形式提供给上层应用使用；
  • 在浏览器中引入多种编程语言的支持，如 WebAssembly；
  • 简化渲染流程，使渲染过程更加直接高效；
  • 加大对系统设备特性的支持；
  • 提供对复杂 Web 项目开发的支持。

Web 应用到底能做什么

未来适用于哪些新领域

浏览器已经逐步深化成操作系统之上的操作系统

浏览器工作原理有哪些帮助

  1. 准确评估 Web 开发项目的可行性
    web 高速渲染动画，快速交互
  2. 从更高维度审视页面
    常见的几个用户体验指标：
  • 当用户请求一个网站时，1秒内看不到关键内容，用户会产生任务被中断的感觉
  • 当用户点击某些按钮时，100ms 内无法响应，用户会感受到延迟
  • 如果 web 动画没有达到 60fps, 用户会感受到动画卡顿

    首屏显示涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript阻塞等技术因素。

  1. 在快节奏的技术迭代中把握本质
    Node.js 是前端发展的一个核心推动力，它基于 Chrome 的 JavaScript 引擎 V8 来实现，特点是脱离浏览器环境执行 JavaScript

    前端技术是如何针对这些核心的需求演进的？

    3-1. 脚本执行速度问题
  • 更新语言，出 ES6/ES7/ES8，或者 TypeScript 改动小，推行容易。解决 JavaScript 设计缺陷和执行效率问题
  • 使用新语言，如 WebAssembly(WebAssembly 经过编译器编译，体积小、执行速度快，提升执行效率。但语言本身的完善和构建需要时间)
    3-2. 前端模块化开发
    WebComponents,React/vue 都在渐进地适应 WebComponents
    3-3. 渲染效率问题