加载页面

简单版:

  • 浏览器根据DNS服务器得到ip
  • 向ip发送http请求
  • 服务器收到处理返回http请求
  • 浏览器获得内容
    具体细节在 browser-render 里

渲染过程

简单版:

  • 根据html生成 DOM 树
  • 根据css生成 CSSOM
  • 将DOM和CSSOM整合成 RenderTree
  • 根据 RenderTree 开始渲染和展示
  • 遇到 script 执行并阻塞渲染
    更多细节在 browser-render 里

性能优化

优化原则和方向

  • 多使用内存 缓存 和其他方法
  • 减少 cpu gpu计算
    因此，方向: 减少页面体积，提升网络加载；优化页面渲染

减少页面体积，提升网络加载

  • 压缩合并 css js 图片
  • 缓存，md5文件名
  • cdn

优化网页渲染

  • css前，js后
  • 懒加载
  • 减少dom查询
  • 减少dom操作，多个操作合并 documentFragment
  • 事件节流
  • 尽早执行 DOMContentLoaded
  • ssr
  • 后台ssr渲染

优化图片

  • 压缩图片
  • 使用css替代图片
  • 拿空间换时间，图片多裁切，js先计算宽度，再发请求对应的尺寸
  • 小图片用base64
  • 合并图片
  • 正确选择格式
  • 懒加载

节流

throttle 滚动触发的次数太多
其实就是不断 setInterval 计算距离上次的时间，够时间了才触发

防抖

多次点击按钮，百度输入按键智能搜索
核心是 setTimeout 不断清计时器，然后添加新的。
时间不到永远不触发。

dns预解析

  1. link rel=dns-prefetch href=xxx.cn

预加载

  1. link rel=preload href=a.html

现在暂时不用，但希望尽快获取
兼容性。

预渲染

  1. link rel=prerender href=a.html

小说的下一页，极大概率会点击。