zoukankan      html  css  js  c++  java
  • -_-#【减少 DOM 元素】textarea, script 延迟渲染

    淘宝详情页的 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>
  • 相关阅读:
    ansible设置串行的方法
    给k8s集群中的node节点加标签
    Prometheus断电后启动异常 Error on ingesting samples
    配置 containerd 镜像仓库完全攻略
    这款网络排查工具,堪称神器!
    k8s备份工具之velero
    CentOS 7安装megacli
    Atitit .h5文件上传 v3
    php切片处理视频大文件思路
    php切片处理视频大文件功能
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3367999.html
Copyright © 2011-2022 走看看