Как JS соединяет значения в шаблонной строке?
 

let i = 20, s = document.body.style;

s.top = `${i}px`;

// или

s.top = i + 'px'

Во втором случае выполняется математическое сложение с проверкой типов и преобразованиями, верно?

Но что происходит в первом случае?

Предположу, что первый способ эффективнее по производительности, ведь вроде как не выполняем математических операций.

Чему бы вы отдали предпочтение и почему?

const obj = (function (size, iterations, tests) {
  console.log('BREAK THE MYTH ;p')
  const array = Array.from({ length: size })
  const iterator = Array.from({ length: iterations })
  const score = iterator.map(iter => tests.map(test => {
    const start = performance.now()
    test(array)
    const end = performance.now()
    return [start, end]
  })).reduce((acc, result) => {
    result.forEach(row => {
      row.forEach((r, i) => {
        acc[i] += r
      })
    })
    return acc
  }, Array(tests.length).fill(0))
  console.log(`size: ${size}, iterations ${iterations}`)
  score.map((s, i) => console.log(`tests[${i}] : ${s}`))
})(
  100000,
  10,
  [
    array => array.map((item, i) => `${i}myth`),
    array => array.map((item, i) => i + 'myth'),
  ],
)

ну получается magic quotes продуктивнее ) в моем браузере...

SuperZen,
а если строки 24 и 25 поменять местами?

)) то не работает как ожидалось... напиши если есть время..

SuperZen,
Google Chrome, Firefox, последние, если менять очерёдность массивов, то массив, созданный первым, быстрее проходит тест, у меня так.

tests[0] : 1307
tests[1] : 1413

Firefox Nightly 70 :
tests[0] : 14060
tests[1] : 14532

Chrome Canary 78 :
tests[0] : 16188
tests[1] : 16988

Проверял на нетбуке.

Если тест, составленный SuperZen, оптимален, то шаблы `` лучше.
Вроде как performance.now() оценивает лучше )

Тоже проверил, поменял местами строки 24 и 25. Теперь всё наоборот. Что-то тут не так )

) хз, вот тут есть какие-то попугаи...

https://stackoverflow.com/questions/...83467#29083467

потом https://jsperf.com/es6-string-litera...-concatenation
там кнопочка есть есть run tests

) и у меня сложение через конкатенацию работает быстрее...

в целом, если операций +-1000 и таск запускается руками иногда, смысла не вижу в этом тесте)

SuperZen, короче буду использовать то, что всплывёт первым ))
Всем спасибо!

Вы в своём тесте специально подобрали такое вычисление, которое показывает, что первый тест быстрей выполнится.

Логично, ведь первый тест раньше выполняется.

Научное измерение длительности какого-либо процесса выглядит так:

• Измерить начальное время t₀
• Запустить и дождаться окончания процесса
• Измерить конечное время t₁

Разность Δt = t₁ − t₀ указывает на длительность процесса. При необходимости можно повторить процесс измерения несколько раз и найти среднее арифметическое для получения усреднённого результата.

Я думаю, что два вычисления не отличаются по эффективности (т. е. они одинаково эффективны), если время их выполнения различается не более чем на полпорядка.

(function(size, iterations, tests) {
	console.log('I assume I break NOTHING \uD83D\uDE1C')

	var iterationsResult = [];

	for(var i = 0; i < iterations; i++) {
		var v = 100 + Math.round(1400 * Math.random());

		iterationsResult.push(tests.map(test => ({
			start: performance.now(),
			value: Array.from({ length: size }, () => test(v)),
			end: performance.now(),
			get dt() { return this.end - this.start }
		})));
	}

	var times;
	console.table(
		(times = iterationsResult
			.reduce((memo, results) => results.map((result, i) => memo[i] + result.dt), new Array(tests.length).fill(0))
			.map(v => v / iterations / size))
			.reduce((m, v, i) => ({ ...m, [tests[i]]: {
				duration: `${(1000000 * v).toFixed(3)} ns`,
				order: 0.5 * Math.round(2 * Math.log(v / 1000) / Math.log(10))
			} }), {})
	);
}
)(100000, 10, [
	randomValue => `${randomValue}px`,
	randomValue => randomValue + "px",
	_ => {}
])

В таблице, которую вы видите в консоли, представлены три столбца: в первом указана выполняемая функция, во втором указано вычисленное время выполнения одной такой функции, в третьем вычислен порядок времени выполнения с точностью до полпорядка.


Например, такой результат означает, что и шаблонные строки и обычные одинаково эффективны. (А, например, вычисление пустой функции на полпорядка меньше, а значит более эффективно, чем любая строка)

Лучше больше итераций, разброс как всегда большой.

какая связь между местом в массиве и скоростью выполнения?

тест создает много объектов в куче, выделяется память. На момент второго теста свободной памяти меньше. Может либо сборщик мусора сработать во время теста, либо менеджер кучи чуть медленнее находит свободные места для новых объектов.

А по сабжу - сильно подозреваю, что современные компиляторы js (по крайней мере, оптимизирующие компиляторы) превращают оба варианта в один и тот же набор инструкций.

Почему вы это у меня спрашиваете? Вы не понимаете, что написал SuperZen в его коде?

Удивительная подгонка мировоззрения под лживый тест!

SuperZen складывает показания часов... как следует понимать такие результаты, я не знаю. Мне очень жаль, что вам трудно понимать идею измерения отрезка времени.

Поскольку SuperZen складывает показания часов, то тест находящийся на первом месте естественным образом будет иметь наименьшее показание!

Вот, например, у меня была открыта некоторое время страница с его кодом... Я скопировал код и выполнил в консоли...
Как следует понимать такие результаты, я не знаю. Оно показывает время с начала загрузки страницы до начала/окончания выполнения одного теста, сложенного с началом/окончанием выполнения второго теста... Что это обозначает, я не знаю!

В посте №11 я указал, как измеряется длительность какого-либо процесса.

рони, если измерять время по методу SuperZen, то получается что первый бегун всегда бежит быстрее, чем все остальные.

рони, Alexandroppolus, вы конечно можете считать сколько угодно меня за идиота... ведь проблема именно в этом, а не в том, что вы якобы не видите, что в том тесте вовсе не измеряется время вычисления!

UPD И на всякий случай код SuperZen, о котором речь...

const obj = (function (size, iterations, tests) {
  console.log('BREAK THE MYTH ;p')
  const array = Array.from({ length: size })
  const iterator = Array.from({ length: iterations })
  const score = iterator.map(iter => tests.map(test => {
    const start = performance.now()
    test(array)
    const end = performance.now()
    return [start, end]
  })).reduce((acc, result) => {
    result.forEach(row => {
      row.forEach((r, i) => {
        acc[i] += r
      })
    })
    return acc
  }, Array(tests.length).fill(0))
  console.log(`size: ${size}, iterations ${iterations}`)
  score.map((s, i) => console.log(`tests[${i}] : ${s}`))
})(
  100000,
  10,
  [
    array => array.map((item, i) => `${i}myth`),
    array => array.map((item, i) => i + 'myth'),
  ],
)

Чтобы он его не поменял и потом не набежали лэймасы и не развели опусы о том, что там всё в порядке, а дескать это мализ во всём виноват...

Malleys,
я не понимаю достаточно хорошо ни ваш код, ни код SuperZen,
я незнаю почему первый бегун всегда бежит быстрее, чем все остальные..
что тут происходит order: 0.5 * Math.round(2 * Math.log(v / 1000) / Math.log(10)), для меня тоже тайна.

Наверное вам стоит самим написать код, который измеряет время выполнения функции.

Я тоже не знаю... Но в мире SuperZen всё происходит именно так!

Тут вычисляется порядок времени выполнения с точностью до полпорядка.

Порядок позволяет классифицировать величины, например, единицы, десятки, сотни, тысячи... а также десятые части целого, сотые части целого, тысячные части целого... и т. д. Например, если говорить о секундах, то, например, 2 и 5 секунд могут быть отнесены к классу единиц... а, 2 и 50 секунд относятся к разным классам. (единицы и десятки)

Порядок, который вычисляется в примере, является показателем степени, в которую нужно возвести число 10.

Любое число можно представить в стандартной форме, в виде мантиссы и порядка.

Почему в приведённой теме так сильно уделяется внимание мантиссе. Например, приводится тест, в котором говорится, что один вариант выполняется на 3% быстрее. Но вы понимаете, что такое 3% от 100нс? Я думаю, что вы плохо это представляете.

При сравнении результатов мантиссу можно отбросить, не принимать её во внимание... Понятное дело, что если у вас оба процесса таким образом показывают, например, 10⁻⁷ сек. = 0.0000001 сек., то не имеет значения, какая там мантисса, оба варианта одинаково эффективны и быстры!

Другое дело, если отбросив мантиссы вы получаете, например, 10⁻⁷ сек. = 0.0000001 сек. и 10⁻⁵ сек. = 0.00001 сек., то так и так видно, что процесс длительностью 10⁻⁵ сек. менее эффективен. Не имеет значения, какая там мантисса.

Если вам нужно более точное сравнение, то можно воспользоваться такой формулой...
, где x₁ и x₂ — времена выполнения сравниваемых процессов, r — основание логарифма, в данной теме 10. При выполнении условия можно говорить об одинаковой эффективности!

Malleys,
спасибо.

рони,
Malleys,

в моем коде была ошибка:

return [start, end]

был уверен, что я написал end - start )))

немного модифицированный вариант )

const obj = (function (size, iterations, tests) {
  console.log('BREAK THE MYTH ;p')
  const array = Array.from({ length: size })
  const iterator = Array.from({ length: iterations })
  const score = iterator.map(iter =>
    tests.map(test => {
      const start = performance.now()
      array.forEach((_, i) => test(i))
      const end = performance.now()
      return end - start
    }))
  console.table(score)
  const results = score.reduce((acc, results) => {
    results.forEach((result, i) => {
      acc[i] += result
    })
    return acc
  }, Array(tests.length).fill(0))
  console.table(results)
})(
  100000,
  10,
  [
    i => `${i}myth`,
    i => i + 'myth',
    () => { }
  ],
)

но теперь нет конкретного победителя, от рефреша к рефрешу новые результаты...

немного модифицировал вариант, чтобы выводило порядки одного вызова...

(function (size, iterations, tests) {
  console.log('BREAK THE MYTH ;p')
  const array = Array.from({ length: size })
  const iterator = Array.from({ length: iterations })
  const score = iterator.map(iter =>
    tests.map(test => {
      const start = performance.now()
      array.forEach((_, i) => test(i))
      const end = performance.now()
      return Math.log((end - start) / 1000 / size) / Math.log(10)
    }))
  console.table(score)
  const results = score.reduce((acc, results) => {
    results.forEach((result, i) => {
      acc[i] += result / iterations;
    })
    return acc
  }, Array(tests.length).fill(0))
  console.table(results)
})(
  100000,
  10,
  [
    i => `${i}myth`,
    i => i + 'myth',
    () => { }
  ],
)

SuperZen,
спасибо.
:yes: