string concat vs "+"

Benchmark created on


Setup

var FEED_CSS_CARD_CSS_CLASS = "tbl-feed-card", FEED_CSS_ABP_CSS_CLASS = "tbl-feed-abp", FEED_CSS_CONTAINER_CLASS = "[".concat("data-feed-main-container-id", "=\"").concat("test1", "\"]");

Test runner

Ready to run.

Testing in
TestOps/sec
concat
".".concat(FEED_CSS_CONTAINER_CLASS, " { position: relative; margin-top: 20px; margin-bottom: 20px; -webkit-text-size-adjust: 100%; clear: both; } .").concat(FEED_CSS_CONTAINER_CLASS, " .tbl-feed-header { padding: 5px; background-color: #ffffff; display: inline-block; } .").concat(FEED_CSS_CONTAINER_CLASS, " .tbl-feed-header-logo { background: url(//cdn.taboola.com/static/f8/f89e1763-220d-4e09-ba69-9e040548fb7a.svg) no-repeat 0 0; background-size: contain; height: 11px; width: 76px; display: inline-block; } .").concat(FEED_CSS_CONTAINER_CLASS, " .tbl-loading-spinner { margin-bottom: 10px; } .").concat(FEED_CSS_CONTAINER_CLASS, " .").concat(FEED_CSS_CARD_CSS_CLASS, " { margin-bottom: 10px; background-color: #ffffff; border: 1px solid #f1f1f1; } .").concat(FEED_CSS_CONTAINER_CLASS, " .").concat(FEED_CSS_ABP_CSS_CLASS, " { max-width: 770px; margin: 20px auto 0; } /** Mobile CSS Rules **/ @media screen and (max-width: 480px) { .").concat(FEED_CSS_CONTAINER_CLASS, " { padding: 0; background-color: #ffffff; } .").concat(FEED_CSS_CONTAINER_CLASS, " .tbl-feed-header { margin-left: 2px; padding: 5px 0; } .").concat(FEED_CSS_CONTAINER_CLASS, " .").concat(FEED_CSS_CARD_CSS_CLASS, " { margin-bottom: 5px; padding-bottom: 5px; border-width: 0; border-bottom: 4px solid #f1f1f1; } .").concat(FEED_CSS_CONTAINER_CLASS, " .trc_header_ext, .").concat(FEED_CSS_CONTAINER_CLASS, " .trc-widget-footer { padding-right: 3px; } } /** End of Mobile CSS Rules **/ ");
ready
plus
"." + FEED_CSS_CONTAINER_CLASS + " { position: relative; margin-top: 20px; margin-bottom: 20px; -webkit-text-size-adjust: 100%; clear: both; } ." + FEED_CSS_CONTAINER_CLASS + " .tbl-feed-header { padding: 5px; background-color: #ffffff; display: inline-block; } ." + FEED_CSS_CONTAINER_CLASS + " .tbl-feed-header-logo { background: url(//cdn.taboola.com/static/f8/f89e1763-220d-4e09-ba69-9e040548fb7a.svg) no-repeat 0 0; background-size: contain; height: 11px; width: 76px; display: inline-block; } ." + FEED_CSS_CONTAINER_CLASS + " .tbl-loading-spinner { margin-bottom: 10px; } ." + FEED_CSS_CONTAINER_CLASS + " ." + FEED_CSS_CARD_CSS_CLASS + " { margin-bottom: 10px; background-color: #ffffff; border: 1px solid #f1f1f1; } ." + FEED_CSS_CONTAINER_CLASS + " ." + FEED_CSS_ABP_CSS_CLASS + " { max-width: 770px; margin: 20px auto 0; } /** Mobile CSS Rules **/ @media screen and (max-width: 480px) { ." + FEED_CSS_CONTAINER_CLASS + " { padding: 0; background-color: #ffffff; } ." + FEED_CSS_CONTAINER_CLASS + " .tbl-feed-header { margin-left: 2px; padding: 5px 0; } ." + FEED_CSS_CONTAINER_CLASS + " ." + FEED_CSS_CARD_CSS_CLASS + " { margin-bottom: 5px; padding-bottom: 5px; border-width: 0; border-bottom: 4px solid #f1f1f1; } ." + FEED_CSS_CONTAINER_CLASS + " .trc_header_ext, ." + FEED_CSS_CONTAINER_CLASS + " .trc-widget-footer { padding-right: 3px; } } /** End of Mobile CSS Rules **/ ";
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.