• HB
    2019-10-01
    为老师点赞,假期不断更

    作者回复: 争取快点把主干课程写完,然后还要整理几百条留言,来系统地答疑

     1
     11
  • Luke
    2019-10-10
    我们在进行优化的时候,其中有一条策略就是使用离线dom减少重排与重绘,就是将dom先隐藏再修改,修改完后再显示出来。但是浏览器的渲染策略更倾向于将一个大的任务拆分成多个小的任务进行实时多次的渲染。那么离线dom的这种优化是不是有可能成为一种负优化?将多个渲染任务都集中到一次渲染中,导致页面渲染不够及时,当前帧占用时间过长,页面也会出现卡顿?
     1
     6
  • mfist
    2019-10-03
    加载阶段:
    通过分析network中关键资源(html文件 js文件 css文件)的大小,个数,只找到一个可能性能问题:html文件是128kb比较大,网站本身已经开启gzip http2 多个静态资源域名、开启缓存等多个优化手段
    交互阶段
    新浪首页页面加载完成后,滚动页面查看次屏页面,没有太多的交互,查看performance没有发现太明显的性能问题
    今日总结:
    一个页面从生命周期的维度主要分为三个阶段:加载阶段、交互阶段、关闭阶段。
    1. 加载阶段影响网页首次渲染的关键资源几个指标:个数、大小、RTT(round trip time)。通常一个HTTP的数据包在14kb左右。
    2. 交互阶段的优化主要是指渲染进程渲染帧速度。如何让单个帧生成的速度变快呢?
     * 减少JavaScript脚本执行时间
     * 避免强制同步布局,添加 删除dom后计算样式布局是在另外一个任务中执行的,这时候获取样式信息,会将其变成同步任务。
     * 避免布局抖动
     * 合理利用CSS合成动画(标识 will-change 单独生成一个图层)
     * 避免频繁的垃圾回收。(尽量避免临时垃圾数据,优化存储结构,避免小颗粒对象产生)
    展开
     1
     3
  • 安静
    2019-10-08
    请问老师:当 JavaScript 标签加上了 sync 或者 defer、CSSlink 属性之前加上了取消阻止显现的标志后,它们就变成了非关键资源了。
    这段里面取消阻止显现标记是什么标记呀
    
     2
  • 阿哲
    2019-10-03
    加载阶段渲染流水线的配图中,css解析器和v8引擎是不是写反了?
     2
     2
  • 柴柴
    2019-10-02
    老师辛苦!
    
     1
  • 时光逆行
    2020-01-23
    新浪在加载过程中,有强制同步布局的操作,但是间隔时间不是很大
    
    
  • AMIR
    2019-12-30
    为了避免强制同步布局,我们可以调整策略,在修改 DOM 之前查询相关值,但是老师,修改之前查询的DOM值只是修改之前的啊,我要查询修改之后的不还是得放到后面??
    
    
  • 匡晨辉
    2019-12-18
    老师,以前了解到浏览器对dom操作做了优化,就是不是每次dom操作都会立马出发重排或者重绘,可能是多个dom操作后才触发。这个机制也是为了缓存优化性能,老师您看过源码知道这个机制具体是如何的吗?是定时触发还是有个什么别的机制?
    
    
  • 匡晨辉
    2019-12-18
    老师,加载阶段的那个图画是不是失误画错了?加载css生成cssod 应该是在执行js前面,应为js可能会操作css依赖cssod的生成这是前几张讲过的内容
    
    
  • -_-_aaa
    2019-12-13
    我在“https://chokcoco.github.io/demo/css3demo/html/index.html”对里面的动画做性能分析时发现Performance中main线程不断的进行layout和paint,在Layers中有新的层出现应该是合成层。为什么在main中有呢,不应该是合成线程的事吗,难道浏览器性能分析里面的main包含合成线程吗,没有的话合成线程在Performance中的哪里呢?
    
    
  • -_-_aaa
    2019-12-13
    文中“所以要尽量利用好 CSS 合成动画,如果能让 CSS 处理动画,就尽量交给 CSS 来操作。”感觉这句话的意思时只要时css处理的动画都是合成动画,真的是这样吗?应该是类似will-change,translate等才会触发合成动画,像hover一个透明度变化应该不会合成吧?还有可以调用GPU加速的。
    
    
  • -_-_aaa
    2019-12-13
    在性能分析时,哪个灰色的Task就是宏任务吗?一段一段的Task就是Event Loop吗?
    
    
  • vianem
    2019-12-03
    老师您好,我利用will-change: transform优化css动画,动画只进行了transfrom: translate()平移。在测试该动画是否会被主线程阻塞的时候出了问题:我在控制台输入while (1) {};动画直接卡住了

    作者回复: 我不知道你怎么写的代码,你可以用同样的方式试下这个站点:https://chokcoco.github.io/demo/css3demo/html/index.html

    
    
  • 昆虫捕手
    2019-11-27
    老师,强制同步布局是因为是和js任务一起执行,所以多触发了一次布局而消耗性能的? 正常情况下,可能是多个js任务执行完,再触发一次布局?
    
    
  • bai
    2019-11-21
    有疑惑,js文件加上defer应该也不能变成非关键资源吧。defer的js的执行时间是domcontentloaded事件之前,此时还没有执行布局和绘制,也就是首屏页面还没有展示。也就是说defer的js还是会执行之后再进行布局和绘制。
    
    
  • Crack
    2019-11-13
    想起一个问题,请问浏览器是如何渲染gif的,会引起页面重绘吗

    作者回复: 不会的,gif是经过专门处理的

     1
    
  • Geek_320111
    2019-10-29
    这里的RTT和以太网的MTU有什么关系?之前了解到MTU一般默认为1500字节。那一个0.1M的文件要拆分的数据包就不止8个了吧,望老师解答。
    
    
  • Sunsmile
    2019-10-21
    老师给详细讲一下Performance可好?感觉性能优化这块,它很重要
    
    
  • 桃翁
    2019-10-21
    老师,我感觉应该是 JavaScript 是加上 async 标签吧,你写的是 sync 标签,async(异步)的方式才能达到优化的效果。

    作者回复: 嗯 是写错了,一会改正

    
    
我们在线,来聊聊吧