Быстрее ли иметь код (около 30 строк) внутри вложенных функций или быстрее вызывать код без вложенной функции?

Question

скажем, у меня есть блок кода, такой как

for (j = 0; j < 4; j++) {
    for (var i = 0; i < 4; i++) {
        str = pieceData[piece][rotation]
        char = str.substr(k, 1);

        if (char == 1) {
            c.fillStyle = pieceColours[piece]
            c.fillRect(x + (i * 20), y + (j * 20), 20, 20)
            c.fill()
        } else {
            c.fillStyle = 'green'
            if (x + (i * 20) > 180) {
                c.fillStyle = 'red'
            }
            c.fillRect(x + (i * 20), y + (j * 20), 20, 20)
            c.stroke()
        }
        k++
    }
}
k = 0

Будет ли он замедляться, если я вызову его во вложенной функции, такой как

function pieceGen() {

    for (j = 0; j < 4; j++) {
        for (var i = 0; i < 4; i++) {
            str = pieceData[piece][rotation]
            char = str.substr(k, 1);

            if (char == 1) {
                c.fillStyle = pieceColours[piece]
                c.fillRect(x + (i * 20), y + (j * 20), 20, 20)
                c.fill()
            } else {
                c.fillStyle = 'green'
                if (x + (i * 20) > 180) {
                    c.fillStyle = 'red'
                }
                c.fillRect(x + (i * 20), y + (j * 20), 20, 20)
                c.stroke()
            }
            k++
        }
    }
    k = 0
}
//________________________________________________________________________

function animate() {
    pieceGen()
    requestAnimationFrame(animate)
}

Мне нужно принять это виз-за низкой производительности моих ноутбуков и не замедлится ли я, если я буду использовать все больше и больше вложенных функций?

Answer 1

Функции являются функциональными объектами.В JavaScript все, что не является примитивным типом (неопределенным, нулевым, логическим, числом или строкой), является объектом.Это означает, что во втором случае вы будете иметь следующие издержки:

• будет создан объект, содержащий описание функции
• , будет выделен адрес памяти, в котором будут храниться функцииконтекст (закрытие)

Итак, два дополнения:

• дополнительный объект с несколькими байтами в нем (функция)
• дополнительное закрытие

Ни один из них не имеет значения с точки зрения производительности.

Читаемость кода и инкапсуляция послужат вам намного лучше, сделайте это!Вы всегда должны думать о производительности, это правда, но функции являются строительными блоками javascript, и вы должны их использовать.

Answer 2

Вызов функций имеет очень незначительные накладные расходы в javascript, используйте их свободно, поскольку они делают ваш код чище