淘宝详情页的 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. fsockopen/curl/file_get_contents效率比较

    前面小节 PHP抓取网络数据的6种常见方法 谈到了 fsockopen,curl与file_get_contents 的使用方法,虽然它们都能达到同一个使用目的,但是它们之间又有什么区别呢? 先谈谈c ...

  2. 九度OJ 1497 面积最大的全1子矩阵 -- 动态规划

    题目地址:http://ac.jobdu.com/problem.php?pid=1497 题目描述: 在一个M * N的矩阵中,所有的元素只有0和1,从这个矩阵中找出一个面积最大的全1子矩阵,所谓最 ...

  3. N个数随机相加得出固定值的排列组合

    static double[] iArr = new double[10] { 1,2,3,4,5,6,7,8,9,10 }; static Stack<double> stack = n ...

  4. 【HeadFirst设计模式】12.复合模式

    定义: 复合模式结合两个或以上的模式,组成一个解决方案,解决一再发生的一般性问题. 要点: MVC模式是复合模式,结合了观察者模式.策略模式和组合模式. 模型使用了观察者模式,以便观察者更新,同时保存 ...

  5. Qt-获取主机网络信息之QNetworkInterface

    QNetworkInterface类提供了一个主机IP地址和网络接口的列表. QNetworkInterface表示了当前程序正在运行时与主机绑定的一个网络接口.每个网络接口可能包含0个或者多个IP地 ...

  6. post提交与get提交的一个小知识点

    今天偶然发现post提交与get提交的一个小知识点,记下来以后可以看看. 将form表单的method的设置为get后,通过url传递的参数将不会被传递到服务器,例如1.ashx?a=123,的a=1 ...

  7. 1. Window环境下 - 开发环境的配置: (安装Android Studio 2.1)

    0. Java简介: 1990年Sun公司预料嵌入式系统将在未来家用电器领域大显生手, 于是成立了一个由James Gosling领导的"Green计划"(首席科学家Bill Jo ...

  8. SET QUOTED_IDENTIFIER ON

    语法  SET QUOTED_IDENTIFIER { ON | OFF }    注释  当 SET QUOTED_IDENTIFIER 为 ON 时,标识符可以由双引号分隔,而文字必须由单引号分隔 ...

  9. wpf image控件循环显示图片 以达到动画效果 问题及解决方案

    1>最初方案: 用wpf的image控件循环显示图片,达到动画效果,其实就是在后台代码动态改变Image.Source的值,关键代码: ; i < ; i++)//六百张图片 { Bitm ...

  10. hdu 2222 Keywords Search ac自动机入门

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2222 题意:有N(N <= 10000)个长度不超过50的模式串和一个长度不超过1e6的文本串. ...