Browser学习笔记

# 浏览器渲染原理

# 思考

  • 1.我们平常浏览器的网页是否是应用
  • 2.在操作系统中的应用是如何运行的
  • 3.浏览器究竟是什么
  • 4.webkit 和浏览器的关系
  • 5.浏览器是如何呈现网页的
  • 6.经典问题：从浏览器的地址栏输入一个网址直到网页内容呈现完毕，发生了那些事情？

内核

  • 对于操作系统来说，内核是操作系统的核心，是第一层基于硬件的软件扩充，提供最核心最基础的服务。
  • 应用程序通过内核进行系统调用来使用计算机的硬件，内核代码简洁高效，并且基本没有 bug，由于是最底层的服务，一点微小的错误也会造成整个系统的崩溃。好处当然也显而易见，基于一个稳定的内核，开发者可以构建适合不同场景的操作系统和应用软件。
  • 对于浏览器来说，同样存在浏览器内核，于操作系统内核相似，浏览器内核需要提供 API 给浏览器开发者使用，同时提供最核心的功能

# 浏览器内核知识

  • 浏览器内核定义
  • 我们可以初步认为浏览器中负责将表示页面的字符转变成可视化图像模块就是浏览器内核。

# 远程主机响应

  • 请求报文
    • 起始行：

# 网页内容组成

  • dataType：

# http 相关缓存

  • 过期时间
    • Expires
    • Cache-Control
  • 条件验证
    • if-Mondified-Since:与 last-Mondified 配合使用
    • if-None-Match:与 Etag 配合使用

# 浏览器本地缓存

  • Cookie
  • Local Storage
  • Session Storage
  • IndexedDB

# 如何提高

  • 1.合并请求：nginx 模块，base64
  • 2.缓存：from cache(memory disk),localstorage,本地缓存策略，HTTP 头
  • 3.tcp 网络连接优化：tcp 调优，HTTP/2,keep-alive
  • 4.硬件：加大宽带，使用 cdn（对象存储）
  • 5.资源大小：gzip，webp，image 压缩，cookie 体积
  • 6.预加载：多个 cdn 域名，dns 预取，异步读取 js

# 渲染

  • JavaScript --> Style --> Layout --> Paint --> Composite

# JavaScript 引擎

  • 执行流程
    • 1.源代码
    • 2.抽象语法树
    • 3.字节码
    • 4.解释器
    • 5.JIT
    • 6.本地代码

# 渲染

  • 1.RenderObject
  • 2.RenderLayer
  • 3.布局计算
  • 4.绘图无关上下午呢

# 从关键路径入手

  • 1.API 接口速度，是否可提前调用，是否可合并，不要同域名超过 5 个
  • 2.是否存在大 IMG，能否懒加载，能否使用高斯模糊做缩略图
  • 3.保证 DOMContentLoad
  • 4.谨慎使用

# 整体观念

  • 1.HTTP 协议
  • 2.NGINX 调优
  • 3.TCP 调优
  • 4.前端基础设施

# 基础设施

# Chrome dev tool

  • 1.performance

一. →