Edge浏览器中的图标渲染很慢答案

【问题标题】：Icons rendering is very slow in Edge browserEdge浏览器中的图标渲染很慢
【发布时间】：2020-01-07 08:11:23
【问题描述】：

在我们的网站上，我们展示了风格化复选框的图标。图标是从 SVG 文件呈现的。这些图标在 Edge 浏览器中加载非常缓慢（几乎 10 秒）。它在 IE 和 Chrome 中运行良好。请建议一些选项来改善 Edge 的图像加载时间。 PFB 带有复选框的屏幕截图。

实现细节

复选框对应的 HTML 元素是在从 Web 服务获取响应时动态添加的。逻辑用纯 JS 实现，样式用 SASS 完成。

【问题讨论】：

尝试清除Edge浏览器缓存和cookie，看看是否会减少加载时间？此外，您能否发布足够的代码来重现问题，这样可能更容易缩小问题范围？
就像 Windows 上的 Docker。不要使用它。
我们没有使用 Docker。我们只开发了它的自定义代码:)

标签： css svg microsoft-edge

【解决方案1】：

由于您使用网络服务来填充复选框，首先我们需要提高性能，您可以尝试使用 F12 开发人员工具或设置计时器来检查它。此外，还可以优化Image Usage，尝试使用异步方式调用Web服务。

此外，在我看来（因为您没有发布相关代码），我建议您可以尝试使用 CSS 或 Javascript 来创建带有复选标记的自定义复选框，而不是使用 SVG，因为通过使用 CSS style，当添加新的复选框时，我们可以为其添加相关的 CSS 样式。

您可以参考以下代码：

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnAdd").click(function () {

            //call the web service to get the checkbox items.

            //add new checkbox items with CSS style. 
            $("#dynamiccontent").append("<label class='container'>TwoTwo<input type = 'checkbox' > <span class='checkmark'></span> </label >");
        });
    });
</script>

HTML代码：

<input type="button" id="btnAdd"  value="Add"/>
<div id="dynamiccontent">
    <label class="container">
        One
        <input type="checkbox" checked="checked">
        <span class="checkmark"></span>
    </label>

    <label class="container">
        Two
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
</div>

CSS 样式：

<style type="text/css">
    /* Customize the label (the container) */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
</style>

结果如下：

参考：How TO - Custom Checkbox

【讨论】：