unity在线文档在使用过程中切换缓慢,有时会影响使用。幸运的是,官方网站提供了离线文档,可以下载到本地浏览。 但是! 但是! 但是! 为什么浏览器一直在本地打开?每个页面打开10个s以上内容可以加载?本地加载孤独?
问题现象
打开Manual/index.html之后,浏览器继续加载空白页,持续约10页s,加载后切换页面也会出现长期加载的问题 以下是文档加载的过程
首次加载
第一次加载耗时20s以上
切换页面
切换页面需要10个时间s以上
原因分析
从现象来看,就像网页加载时加载一些耗时的内容一样,你可以从控制台中的网络(Network)查看网页加载的全过程,看看哪些文件加载时间慢。 注:如果你感兴趣,你可以从HTML简单了解页面的加载顺序。 从下图可以看出,第二种资源在加载过程中花费了21s获取失败后,还有其他一些资源获取s耗时。这些似乎是文档内容无法加载的罪魁祸首。那么如何解决呢?我们可以先看看index.html内容,俗称网页源代码。 这里我们关注几个关键词: css?family=Roboto&display=swap otSDKStub.js 根据关键字,在源代码中可以看到相应的代码位置
<!DOCTYPE html><html lang="en" class="no-js"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <script type="text/javascript" src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" charset="UTF-8" data-domain-script="6e91be4c-3145-4ea2-aa64-89d716064836"></script> <script type="text/javascript"> function OptanonWrapper() {
} </script> <script>var offline=(location.href.indexOf('docs.unity3d.com')==-1)?true:false;if(!offline){
(function(w,d,s,l,i){
w[l]=w[l]||[];w[l].push({
'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5V25JL6');}</script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unity - Manual: Unity User Manual 2020.3 (LTS)</title>
<meta property="og:image" content="https://unity3d.com/files/images/ogimg.jpg">
<meta name="author" content="Unity Technologies">
......下面的省略
加载时间长的css文件或js文件都包含在head中。 从HTML页面的加载顺序中,我们知道了浏览器会按照head->body执行,若head中存在script,需要等待script执行结束后,才能进行下面的渲染,所以我们遇到的文档加载时间长,其实是在等待文件请求完成。
问题解决
既然文件加载慢,可以不加载么? 这里我整理了3个文件
名称 | 用途 | 链接 |
---|---|---|
css?family=Roboto&display=swap | 从链接看像是一个字体样式 | https://fonts.googleapis.com/css?family=Roboto |
otSDKStub.js | Onetrust cookie 管理 | https://cdn.cookielaw.org/scripttemplates/otSDKStub.js |
gtm.js | Google Tag Manager 可能用于网站的访问统计用途 | https://www.googletagmanager.com/gtm.js?id= |
百度搜索了一下网友的解决方法,大家提供了两种方法:
- 断网访问,电脑断网时,无法从外网获取资源,自然访问就快了
- 把源码中包含的3个文件的内容都注释掉,目前看是所有的页面中都存在,所以需要借助某些工具批量处理(2020版本目前28,465个文件)
这里我提供一个新的思路。 目前大部分人使用浏览器都会开启广告拦截插件,用于过滤广告,广告拦截的原理一般都是匹配请求的网址中是否包含对应的关键字。我们可以将上述的文件链接添加至插件中,从而实现资源的屏蔽。 这里我以AdBlock为例,其他的插件应该大同小异。 添加下面三个链接:
- cdn.cookielaw.org/scripttemplates
- www.googletagmanager.com/gtm.js
- fonts.googleapis.com/css?family=Roboto
添加后可以在手动编辑拦截规则中看到新增的链接。 这里要注意的是,添加的这个规则是全局拦截,如果其他页面中有使用到此资源的,也有可能被误杀。