淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式

淘宝详情页的BigRender优化的最佳方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box1-data {
visibility: hidden;
}
</style>
</head>
<body>
<!--
显示 代码 textarea内转义
< &lt; &amp;lt;
&lt; &amp;lt; &amp;amp;lt;
&amp; &amp;amp; &amp;amp;amp;
-->
<div id="box1">
<textarea id="box1-data">
<textarea>&lt;/textarea>
&amp;lt;
&amp;amp;lt;
&amp;amp;amp;
<p>缺点:</p>
<ol>
<li>服务端,要将 html 中的 &amp;amp; 转义成 &amp;amp;amp;</li>
<li>服务端,要打破 ETAGO, 将 &amp;lt;/textarea 转义成 &amp;amp;lt;/textarea</li>
</ol>
</textarea>
</div>
<script>
document.getElementById('box1').innerHTML = document.getElementById('box1-data').value
</script>
<div id="box2">
<script type="text/html" id="box2-data">
<p>缺点:</p>
<ol>
<li>服务端,要将 script 里 html 中的 &lt;/script 替换为某种特殊标记。</li>
<li>浏览器端,得到 htmlCode 后,要将上面的特殊标记替换回原值。</li>
</ol>
</script>
</div>
<script>
document.getElementById('box2').innerHTML = document.getElementById('box2-data').innerHTML
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
// 不执行
document.getElementById('box1').innerHTML = '<script>alert(1)<\/script>' // 执行 jQuery 对 script 做了处理
$('#box2').html('<script>alert(2)<\/script>') function loadScriptString(code) {
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.getElementById('box3').appendChild(script)
// document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert('hi');}alert(3);")
sayHi()
</script>
</body>
</html>

-_-#【减少 DOM 元素】textarea, script 延迟渲染的更多相关文章

  1. Deferred Shading,延迟渲染(提高渲染效率,减少多余光照计算)【转】

    Deferred Shading,看过<Gems2> 的应该都了解了.最近很火的星际2就是使用了Deferred Shading. 原帖位置:   http://blog.csdn.net ...

  2. ☀【jQuery插件】DOM 延迟渲染

    test.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  3. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  4. vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

  5. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  6. html2canvas根据DOM元素样式实现网页截图

    html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...

  7. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  8. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  9. web性能优化--减少DOM操作(三)

    减少DOM数量 减少DOM操作 批量处理DOM操作 批量处理样式修改 尽量不要使用tabel布局 尽量不要使用css表达式 string用数组join css选择符优化 1.减少DOM数量 在HTML ...

随机推荐

  1. 关于atoi的实现

    一.关于atoi atol的实现 __BEGIN_NAMESPACE_STD __extern_inline double __NTH (atof (__const char *__nptr)) { ...

  2. ThinkPHP3.2 加载过程(四)

    前言: 由于比较懒散,但是又是有点强迫症,所以还是想继续把ThinkPHP3.2的加载过程这个烂尾楼补充完整. ========================================分割线= ...

  3. USB初始化

    //USB初始化void CFileManagerDlg::usbinit(){ #define BUFFER_SIZE 64 struct usb_bus *bus; struct usb_devi ...

  4. 如何使用ERStudio 生成comment

    在ER使用中,在生成sql过程中,如何批量生成字段描述,如何批量添加Owner,请看下文: 1.ER生成字段描述 2.ER生成描述添加Owner 使用的ER版本是8.0,英文版本,在操作过程中,有些配 ...

  5. 【7】了解Bootstrap栅格系统基础案例(2)

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  6. ubuntu u盘安装

    参考博客:http://www.bjwilly.com/archives/325.html 1.下载光盘映像 目前可选12.04LTS(长期支持版本) http://www.ubuntu.org.cn ...

  7. building hadoop2.4.1 on centos7[在centos7上面构建hadoop2.4.1]

    本文介绍在centos7上面通过hadoop2.4.1源码构建hadoop distribution 版本,即hadoop的运行版本. 为何要自己building,而不用Apache的distribu ...

  8. python使用psutil获取服务器信息

    >>> import psutil 获取cpu信息>>> psutil.cpu_times()scputimes(user=128258.38, nice=12.2 ...

  9. JavaScript decodeURI() 和 encodeURI() 函数

    定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码. 语法 decodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串 ...

  10. 增加字体和颜色样式-------CSS

    通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...