V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yoa1q7y
V2EX  ›  分享发现

关于 “划词翻译” Chrome 扩展拖慢网站速度的问题

  •  1
     
  •   yoa1q7y · 2023-04-11 11:36:30 +08:00 · 3475 次点击
    这是一个创建于 597 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天因开发需要,在本地搭了一个服务,并绑定 hosts

    127.0.0.1 xxxxx.com
    

    在 Chrome 打开,居然发现响应速度有点慢,Chrome 标签会出现 loading 图标,按理说本地响应应该是极快的。打开 Chrome 控制台,发现 load 时间有 300 多 ms 。然后在无痕模式打开同一个地址,发现 load 时间只有几 ms ,顿时察觉出是某个 Chrome 扩展有问题。

    经过逐一禁用对比发现,是 “划词翻译” 这款扩展的问题,禁用之后 load 时间迅速下降到 30 多 ms (比无痕模式慢一些,应该是其他扩展的影响)。

    在对比其他网站,以 V2EX 为例,禁用之前,load 时间在 1.2 ~ 1.3s 左右,禁用之后下降到 800 ~ 900ms 。

    结论就是,这款扩展会将所有网站的 load 时间拖慢 300ms 左右

    38 条回复    2023-06-09 09:26:45 +08:00
    verbs2016
        1
    verbs2016  
       2023-04-11 11:47:38 +08:00 via Android
    一会试试,谢谢分享
    hadwin
        2
    hadwin  
       2023-04-11 12:02:10 +08:00
    不知道是不是心理作用,好像真的快了。尤其是测试 cubox 网页。
    yoa1q7y
        3
    yoa1q7y  
    OP
       2023-04-11 12:30:49 +08:00
    @hadwin 有数据支撑,打开开发者工具可以看到加载时长
    Spoter
        4
    Spoter  
       2023-04-11 13:44:21 +08:00
    具体是哪个翻译插件? Google 自家的?
    Spoter
        6
    Spoter  
       2023-04-11 15:39:49 +08:00
    谢谢了,看了下,没有安装。
    aptupdate
        7
    aptupdate  
       2023-04-11 15:46:02 +08:00 via iPhone
    @Spoter 😐 我安装了。。。
    ChiangKaishek
        8
    ChiangKaishek  
       2023-04-11 15:47:08 +08:00
    自己试了下, 确实开关插件之后的加载时间有明显的不同
    DOMO
        9
    DOMO  
       2023-04-11 15:48:17 +08:00
    chrome 不是自带划词翻译了么,为什么还要安装插件啊
    Lentin
        10
    Lentin  
       2023-04-11 15:51:35 +08:00
    @DOMO #9 自带的划词翻译是啥样的?
    Lentin
        11
    Lentin  
       2023-04-11 15:58:30 +08:00
    https://chrome.google.com/webstore/detail/aapbdbdomjkkjkaonfhkkikfgjllcleb
    试了下官方的翻译插件搭配快捷键 chrome://extensions/shortcuts 实现了手动的划词翻译 目前感觉还行
    LZSZ
        12
    LZSZ  
       2023-04-11 16:02:33 +08:00
    EDGE 的右键 '将所选的内容翻译为 简体中文' 够用了。
    DOMO
        13
    DOMO  
       2023-04-11 16:03:36 +08:00
    @Lentin 选中了按右键点击翻译到中文不就行了
    yohole
        14
    yohole  
       2023-04-11 16:22:40 +08:00
    划词翻译这个插件我用了挺久的,最近也逐渐觉得越来越"重",翻译速度越来越慢之类的,看到 OP 发文,刚才直接换了 deepl 官方的和基于 OpenAI 的,再持续观察一下

    另外经过我长期使用和对比,deepl 的翻译比谷歌翻译的质量要好很多
    Lentin
        15
    Lentin  
       2023-04-11 17:03:53 +08:00
    @DOMO #13 看了下 chrome 自带的没有针对选中文本翻译的选项,装了扩展才有那个谷歌翻译的功能
    Lentin
        16
    Lentin  
       2023-04-11 17:51:25 +08:00
    @Lentin #15 搜了一下,找到地方打开了 /t/914926
    Lentin
        17
    Lentin  
       2023-04-11 17:54:17 +08:00
    还支持翻译图片里面的文字 chrome://flags/#enable-lens-image-translate
    sadfQED2
        18
    sadfQED2  
       2023-04-11 17:56:06 +08:00
    把这个插件一关,确实感觉变快了。这个插件我记得是去年某个 V 友开发的吧,当时尝鲜装了一下,后续从来没用过,没想到被坑了
    xtx
        19
    xtx  
       2023-04-11 17:56:57 +08:00 via iPhone
    autoxbc
        20
    autoxbc  
       2023-04-11 17:58:50 +08:00
    延迟数值是对的,对加载体验的影响夸大了,这就是一个普通扩展正常的性能表现
    milkleeeeee
        21
    milkleeeeee  
       2023-04-11 21:24:41 +08:00   ❤️ 1
    我是划词翻译的作者……

    由于 V2EX 的访问速度会受到梯子的影响,所以我关了梯子、在 Chrome 开发者工具里勾选了“停用缓存”,然后在 baidu.com 试了一下。

    P.S. 不知道怎么在 v2 发图片,所以我就用文字来记录测试数据了

    在禁用划词翻译后,刷新了 11 次百度首页,加载时间分别是(单位毫秒):

    199, 192, 146, 139, 167, 193, 152, 136, 131, 179, 180

    然后我启用了划词翻译,再次刷新了 11 次百度首页,加载时间分别是(单位毫秒):

    171, 179, 165, 166, 189, 182, 149, 151, 167, 185, 158

    从这组简单的数据对比来看,“启用划词翻译会将所有网站的 load 时间拖慢 300ms 左右”看起来不成立。

    当然,这不意味着我不相信你的情况。你的情况确实有可能出现,但也可能是因为受到了其它因素(比如梯子)的影响,不然应该是可以稳定重现的才对。
    K2
        22
    K2  
       2023-04-12 04:38:28 +08:00
    @Lentin #15 DeepL 插件也可以
    goodryb
        23
    goodryb  
       2023-04-12 09:57:05 +08:00
    测试了下,Chrome 打开开发者工具,打开禁用缓存,打开百度首页多次取平均值

    开启划词翻译 720ms 左右
    关闭划词翻译 650ms 左右
    无痕模式 240ms 左右

    看起来启用扩展确实会对页面打开有一定的影响,不单单是划词翻译,扩展装多了也不好。。。
    yoa1q7y
        24
    yoa1q7y  
    OP
       2023-04-12 10:17:37 +08:00
    @milkleeeeee 我明白,我测的确实只能代表我本机的环境

    https://streamable.com/s1vj8c

    我录了一个视频,百度首页的,可以看到,禁用扩展时,平均时间在 400ms 左右,启用扩展后达到 700ms 左右
    Sunnybomber
        25
    Sunnybomber  
       2023-04-12 11:00:49 +08:00
    卧槽,真的假的,用了大概一年多了!
    milkleeeeee
        26
    milkleeeeee  
       2023-04-12 11:40:24 +08:00   ❤️ 1
    @yoa1q7y 原来你指的是所有资源的总加载时间,我之前测试的仅仅只是 baidu.com 首页 html 的加载时间。

    如果是这样的话,那么划词翻译确实会增加这里的总加载时间,但并不会影响你的使用体验。

    你可以在 Chrome 开发者工具网络面板的“过滤”输入框里输入 “ikhdkkncnoglghljlkmcimlnlhkeamad”,然后你就会看到划词翻译加载了 4 个 css 文件,这四个文件是从电脑本地加载的,加载时间在我这里分别是 10, 37, 37, 36 ,一共 120 毫秒,而这部分时间是计算进了所有资源的总加载时间的。

    这确实可能会导致标签页左侧多出一段时间的转圈圈动画,但实际上并不影响你正常使用网页。划词翻译是在 DOMContentLoaded 事件之后才加入的这些 CSS ,而此时网页已经可以正常互动了。DOMContentLoaded 事件指的是网站的 HTML 已经解析完毕且基本上 css 、script 脚本也已加载完毕,所以网站已经可以正常操作,但其它一些资源如图片、iframe 可能还没加载完的状态,详细说明可以参考 https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

    事实上,扩展程序是可以做到(并且官方也推荐)不在 Network 里显示这些 CSS 文件的,只需改为在 manifest.json 里声明这些 CSS 文件就可以了(不过我也不确定这样做是不是就不会增加总加载时间了),但是,划词翻译使用了 Shadow DOM 来隔离划词翻译与宿主网页之间的样式,让它们两个互相不被影响,所以才使用了 link herf="..." 的方式加载了这些划词翻译的 CSS 资源。

    我以前是在 load 事件之后(即网站自己的所有图像、iframe 都加载完)再加载这些 CSS 文件,这样就不会有转圈圈动画、也不会增加总加载时间了,但是经常有用户反馈,有的网站它嵌入的 iframe 页面(比如 google adsense 的广告)迟迟加载不完,导致 load 事件迟迟没有触发,所以划词翻译也就迟迟没有生效,而此时其实 DOMContentLoaded 事件已经好了,网页实际上已经可以正常操作了,鉴于此,我才将划词翻译的插入时机由 load 事件改为了 DOMContentLoaded 事件,从而就有了今天你发的帖子……
    milkleeeeee
        27
    milkleeeeee  
       2023-04-12 12:04:18 +08:00
    总结一下,为了确保划词翻译能尽快生效、又为了确保隔离划词翻译跟宿主网页的样式使之相互之间不受影响,最后我选择的方案虽然看上去增加了约 120 毫秒的总资源加载时间,但其实并不影响网页的正常使用。
    yoa1q7y
        28
    yoa1q7y  
    OP
       2023-04-12 13:19:00 +08:00
    @milkleeeeee 好的👌 确实不影响网页的正常使用
    zbowen66
        29
    zbowen66  
       2023-04-12 20:09:49 +08:00
    这种超高频工具还是用系统级的方便
    lqzhgood
        30
    lqzhgood  
       2023-04-12 22:31:49 +08:00
    @yoa1q7y 作者您好,我提个建议
    如果全局禁用 `划词翻译` 功能时(仅使用右键翻译),是不是能不载入这些资源呢。
    lqzhgood
        31
    lqzhgood  
       2023-04-12 22:33:07 +08:00
    哎呀, @错了,LZ 不好意思~
    @milkleeeeee
    milkleeeeee
        32
    milkleeeeee  
       2023-04-12 22:53:20 +08:00
    @lqzhgood

    可以是可以,相当于把初次加载延迟到被其它功能(如右键翻译、快捷键、截图翻译等)呼出之后才加载,但这样做也有问题:

    - 首次呼出会明显感觉到延迟了约半秒钟,毕竟资源插入进网页之后,初始化也是需要时间的
    - 逻辑上有点复杂,怎么准确判断资源插入进网页的时间点?毕竟能触发插入时机的场景(右键翻译、快捷键等)太多了

    所以这就是个取舍:是为了追求精益求精增加更多复杂的代码,还是保持逻辑简单但增加约 120 毫秒的总资源加载时间。而且前面也解释过了,这个时间仅仅只是增加了个数字,并没有阻碍浏览器加载你的网页。

    我选择后者
    lqzhgood
        33
    lqzhgood  
       2023-04-12 23:21:04 +08:00
    @milkleeeeee
    我没表达准确, 重说一下~ // 我以为右键翻译的结果是在右上图标 popup 弹出页上显示

    如果要在网页进行侵入式的显示(在网页内显示内容),为了用户体验,我是赞同您说的优先载入资源的

    我的意思是,如果关闭右键、快捷键等在网页内显示翻译的方式,只手动点击右上角 popup 弹出页进行手动翻译,或者独立窗口翻译,是不是不用载入这些资源

    我现在就是这样手动使用的,因为需要翻译的网页可能不到 10%,但是每个页面都需要载入资源却是实实在在的。
    比如 127.0.0.1 本地开发的页面一天可能因为热更新的缘故刷新上千次,也实实在在执行了这 4 条 css 上千次
    想给笔记本多扣一点电出来~
    zzbd
        34
    zzbd  
       2023-04-13 11:04:02 +08:00   ❤️ 1
    看了作者的回复,又默默地用回来了😲




    已经用习惯了,确实好用
    milkleeeeee
        35
    milkleeeeee  
       2023-04-13 19:26:00 +08:00
    @lqzhgood 这倒是可以,也许以后我会加个“省电模式”来覆盖你这种场景
    lqzhgood
        36
    lqzhgood  
       2023-04-13 21:45:21 +08:00   ❤️ 1
    @milkleeeeee 谢谢大佬, 大佬发财。 ;)
    huadaonan
        37
    huadaonan  
       2023-05-23 15:14:00 +08:00
    @milkleeeeee 我觉得划词翻译确实有些问题。关掉了就不慢了 很明显
    qiuxuqin
        38
    qiuxuqin  
       2023-06-09 09:26:45 +08:00
    @milkleeeeee 那 4 个 CSS 文件加进 manifest.json 吗?我前端开发,每次打开浏览器控制台调试页面,都会加载这 4 个 CSS 文件,有点干扰视线。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1332 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 17:49 · PVG 01:49 · LAX 09:49 · JFK 12:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.