浏览器相关知识点

加载页面

简单版:

  • 浏览器根据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
    小说的下一页,极大概率会点击。

请我喝杯咖啡吧~