标签: 浏览器

  • 【视频】从浏览器渲染机制理解 Web 性能

    【视频】从浏览器渲染机制理解 Web 性能

    群里有同学问:

    如何优化网页性能?比如做了个网页,觉得打开速度比较慢,该怎么优化?

    这是个好问题,也是个很难回答的问题,因为涉及到的内容很多,一句两句说不清楚。所以我特地做了这个视频,详细讲解浏览器渲染的每一步,有哪些影响因素,以及我们可以针对性采取什么样的优化策略。

    开始觉得可能要做 10+p 幻灯片,讲个 10+ 分钟;结果幻灯片做了 29p,讲了 40+ 分钟。自荐给大家,希望大家认真观看,能够在日后面对网页初始加载优化时,能够游刃有余。

    从中我们也可以找到那道经典面试题:“当我们输入 URL,然后按下回车之后,都会发生什么”的答案。可谓一举两得。

    视频用到的 slidev 放在这里:

    当然,时间有限,能力有限,这个视频只关注 web 前端及部分 web 全栈的内容,以及我们力有所及能够优化的部分,可能有些内容没有覆盖到。所以,如果你有疑问、或者觉得有问题,请留言。我很乐意跟大家讨论这些问题,也很希望能给视频打补丁。

    如果你觉得我做得不错,也请给我一键三连,转发给更多需要的人。提前感谢支持。

  • 浏览器切换中

    浏览器切换中

    最近比较忙,博客有些荒废。忙过这阵子再写吧。

    接下来的三周,会强迫自己把开发浏览器切到 Firefox,争取从现有项目中找到兼容性问题,并且修复。

    再接下来如是反复,Chrome > Firefox > Edge > Safari > Chrome……

    以后客户越来越多了,兼容性得多费心了。

    下午4点更新

    Firefox 不支持 SourceMap……已经切回 Chrome 了,晚上继续尝试。

    8-14 更新

    Firefox 团队曾经抱怨 Google Chrome 不正当竞争,故意在几个大型产品中给 Firefox 挖坑,打压他们在用户心目中的地位。然而经过我这一周来的使用,我觉得 Firefox 实在做得不够好,很难让开发者选择它作为主力开发工具。

    1. 使用 Vue Cli 会不停报错,找不到 sw.js,连接不到 sockjs-node 等等
    2. 使用 webpack 无法加载到 sourcemap,无法 debug。(应该是配置问题,因为 Vue Cli 3 可以。
    3. 报错多了就影响性能,各种卡顿。
    4. 断点不会自动跳过去,屏幕没有明显的视觉效果,开始被迫重启好几次
    5. 断点不会自动更新堆栈、变量状态,需要点击一次“Step over”

    问题很多,很影响开发效率。可惜我厂老板特别爱用 Firefox,所以我还必须照顾下 Firefox,经过一周的挣扎,现在倒是好一些了,Windows 10 的表现还不错。