静态资源本地缓存+静态资源延时加载

 

 

总结一下实习期间做的事情不多，除了做了一个本地资源缓存的探索和图片资源延时加载之外，都是一些琐碎得记不起来的事情了。

 

【场景描述】

           目前参与的项目中，有几个页面具有这样的特征：

1、  包含大量的静态资源（图片、css文件、js文件），主要是大量的图片

2、  这些图片并不会一次性展现在页面中，甚至初始化时只包含极少数的图片

3、  目前在页面初始化时一次性加载了这所有的页面。

4、  这所有的页面的静态资源都需要从远程服务端去获取。

 

以上几个特征的存在，导致页面加载的速度非常慢。      

 

【解决思路】

1、    静态资源本地缓存：将静态资源打包到用户本地，这样用户浏览该页面时所需加载的静态资源可以直接在本地取，而不是频繁的像服务器发请求。

2、    静态资源延时加载：按需加载，每次按照需要加载图片，而不是在初始化时一次性加载所有的图片，每次只加载出现在当前视图内的图片。

 

【本地缓存】

 

关于静态资源本地缓存，做一个简单的回忆，这个探索过程，还是值得我记住的。

 

效果：相对路径（服务端获取）-----------------绝对路径（本地获取）

Asset/js/a.js            %web%/Asset/js/a.js == file://c/webresource/ Asset/js/a.js.

 

过程：1、客户在安装程序时会有一个本地安装路径，桌面版开发人员记住这个路径path，传给web后端开发人员。

2、web后端接收到这个参数后用smarty模板的形式传递给web前端开发人员。

3、前端开发人员在web页面（tpl）中替换原来的相对路径，将path作为目录加入到该路径中。如原来为src=” Asset/js/a.js”,现在变为src=” <% path%>Asset/js/a.js”

 

问题：浏览器安全限制问题

 

探索过程：

场景1：拟从桌面rd直接将参数传给FE

问题：不能用js来接收地址参数，因html会在js解析之前就被读取，导致地址没有成功变更。

拟策略：1、FE在tpl中引用的路径中加入通配符如%web%/Asset/js/a.js

2、桌面rd拉取tpl文件----遇到通配符%web%/则将其替换成本地路径-----从客户端容器下载tpl文件

结果：失败。从容器中下载文件的时候还没下载完已经开始展示了。导致展示的页面元素会部分缺失。

 

 

探索2：由客户端直接在url中传入path参数，这样FE在tpl中作为smarty参数直接解析

问题：客户端不能获取到每一个url，特别是内部跳转的url

 

 

探索3：1、客户端在登录彩虹的时候将地址参数传递给web后端

2、 web后端以smarty模板变量的方式传给前端

3、前端接收到smarty模板变量值之后替换引入路径

问题：  1、tpl解析的html文件在远程服务端，而js文件在本地

2、安全问题导致无法读取本地js文件

出路：1、将html放在本地，这样本地文件读js本地文件，不存在安全问题，引入新的问题：本地html发送ajax请求失败

      

      【插曲】本地html发送ajax请求失败

      【应对】1、FE替换前端所有ajax请求的方法，替换成2的方式。

2、采用动态插入script标签的方式，将script标签的src属性赋值为要请求的url地址（可以发送请求，但是尝试获取返回结果失败，只能以可执行函数的方法返回，返回形如callback(responseText)）

3、如此会增加web后端的工作量，将原来返回responseText的地方都替换为callback(responseText)

 

           <script type=”text/javascript” src=”http://localhost/server.php”>

                           Callback(“12”);

</script>

       【小结】会给web后端增加一定程度上的工作量，不可取。

结论：不可取

出路：2、尝试从前端解决读取本地js文件的问题，只能将浏览器安全级别设低，而桌面rd在嵌入ie内核时不能获取修改浏览器安全设置的api，无法控制。

结论：失败

 

【折中方案】

1、 桌面rd将安装地址传给web后端rd

2、 Web后端rd将地址以smarty模板的形式传给FE

3、 FE替换相对路径

4、 静态资源暂时只考虑css文件和图片资源文件（html中直接引入图片也会受安全限制，只能通过在样式中引入图片）。IE对css文件的安全限制较低。Firefox不能读取本地css文件。这里客户端内嵌页面刚好使用的是IE内核，因此可以读本地css文件

5、FE：由于js或者html中不能直接引入图片，只能通过样式引入，需要修改js中用src引入图片的方式，将原本由img 的src属性引入图片方式改为div标签相应的属性改为background来引入图片。

 

 

 

 

 

【延时加载】

 

过程：1、阻止控件渲染时加载图片，如将img的src属性替换掉，以_lazyloadsrc属性代替，这样初始化控件时就不会加载图片。

2、获取所有待延时加载的资源，建立与之对应的标记对象，标记对应的每个元素是否已经加载。

3、定义触发资源加载的容器和事件（容器可视区域变更导致可视区域的资源变更）

4、事件触发时：计算容器的可视区域

               计算静态资源的位置

                               计算资源是否在当前容器可视区域

               加载在可视区域的资源（_lazyloadsrc属性还原成src属性），并标志已加载

5、 重复4直到全部被加载。

 

 

（1）阻止元素初始化加载，用_lazyloadsrc替换src属性

（2）获取容器可视区域的方法

（3）获取待加载资源位置的方法

（3）判断待加载资源是否在容器可视区域的方法

（4）调用上面的方法，如果资源在容器可视区域内，则删除检测，标志该资源已经加载。

              

（5）定义待加载的资源和加载标志，添加动态检测。并加载可视区域内的图片。