按需解析HTML
按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML。解析HTML都是需要一定时间,特别是HTML中包含有img标签、引用了背景图片时,如果一开始就解析,那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等,这些一开始是不需要解析,可以按需解析。
实现按需解析,首先用<script type=”text/x-template”>html</sccript> 这个标签来对忽略对HTML的解析。然后根据触发的动作,把script里面的HTML获取出来,填充到对应的节点中。
示例代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按需解析HTML</title> </head> <body> <script type="text/x-template" id="suc_subscription"> <!--假设这里的样式box-dytz 引用了一张背景图---> <div> <!--这里暂且用这张图片作为测试,实际中,大家可以替换为任何图片--> <img src="http://tid.tenpay.com/wp-content/uploads/2012/12/按需加载.jpg" /> </div> </script> <div id="success_dilog"></div> <input type="button" value="点我展示HTML" onclick="showHTML()" /> <script> function showHTML(){ document.getElementById(‘success_dilog‘).innerHTML = document.getElementById(‘suc_subscription‘).innerHTML; } </script> </body> </html>
DEMO:http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html
在页面加载结束后,看到并没有图片加载的请求。
点击按钮之后执行了加载图片的操作,此时才在网络中看到图片的请求
这样减少了加载页面最开始的请求,减轻服务器的负载。
按需加载图片
按需加载图片,就是让图片默认开始不加载,而且在接近可视区域范围时,再进行加载。也称之为懒惰加载。大家都知道,图片一下子全部都加载,请求的次数将会增加,势必影响性能。
先来看下懒惰加载的实现原理。它的触发动作是:当滚动条拉动到某个位置时,即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤:
1)生成<img data-src=”url”>标签时,用data-src来保存图片地址;
(相当于加载转圈的图片)
2)记录的图片data-src都保存到数组里;
(保存真正的图片)
3)对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};
4)在函数lazyload中,按照下面思路实现:计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+ scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的按需加载;
按需加载/懒加载