要用js迭代html svg服務器端或客戶端？

Question

我正在為擁有低端智能手機且移動連接不那么出色的人構建輕量級的移動應用程序。

在html中使用svg圖標，一頁可能包含10-20個圖標，僅下載svg圖標代碼就需要下載大約5kb-20kb。

我們需要使用代碼，因為圖標需要可變，例如筆觸，顏色。 否則，將使用.svg文件。

我認為也許最好將這些重復的代碼存儲到JS變量中，並在頁面加載到客戶端后對其進行迭代。 這將意味着客戶端將只為每個圖標下載一次svg代碼，然后由他們的電話來在整個頁面中多次放置該圖標。

依靠電話來完成這樣的任務是一種不好的做法嗎？ 假設有一部2歲的智能手機，這會占用最多的手機資源，Web應用程序上的內存/ CPU嗎？

我添加svg圖標的方式如下：

var arrowIconNext = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"'+
                'width="11.8px" height="46.8px" viewBox="0 0 11.8 46.8" enable-background="new 0 0 11.8 46.8" xml:space="preserve">'+
                '<polyline fill="none" stroke-width="1" stroke-miterlimit="10" points="1.3,1 20.2,24 5.3,46.2 "/>'+
                '</svg>';

$('.content .icon').html(arrowIconNext);

這將循環瀏覽頁面上的所有.icons並插入svg html。

Answer 1

您的一些樣板是不必要的。 id屬性也可能是不必要的，但是如果不查看是否使用它就很難分辨。

var arrowIconNext = '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'+
                    'width="11.8px" height="46.8px" viewBox="0 0 11.8 46.8">'+
                    '<polyline fill="none" stroke-width="1" stroke-miterlimit="10" points="1.3,1 20.2,24 5.3,46.2 "/>'+
                    '</svg>';

還gzip所有您的數據並將其作為Content-Encoding: gzip發送到手機Content-Encoding: gzip