Блог

Главная - Вопросы по программированию - Динамическая загрузка JavaScript HTML CSS против перенаправления страницы

Динамическая загрузка JavaScript HTML CSS против перенаправления страницы

#javascript #html #css #redirect #dynamic

#javascript #HTML #css #перенаправление #динамический

Вопрос:

В настоящее время я работаю над веб-приложением, которое требует очень небольшой задержки на стороне клиента. Веб-приложение состоит из трех основных частей (вход, просмотр элементов, оформление заказа).

В настоящее время состояние кода выглядит примерно так.

signIn.html

 <head>
    <link rel="stylesheet" href="css/signIn.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/init.js"></script>
</head>
<body>
    some HTML body....
</body>
<script>
    some javascript that appends stuff to the DOM and makes ajax calls
</script>

viewItems.html

 <head>
    <link rel="stylesheet" href="css/viewItems.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/init.js"></script>
</head>
<body>
    some HTML body....
</body>
<script>
    some javascript that appends stuff to the DOM and makes ajax calls
</script>

checkout.html

 <head>
    <link rel="stylesheet" href="css/checkout.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/init.js"></script>
</head>
<body>
    some HTML body....
</body>
<script>
    some javascript that appends stuff to the DOM and makes ajax calls
</script>

(init.js выше приведены некоторые проверки, такие как вход пользователя в систему и т.д.)

Как вы можете видеть, каждый следующий файл имеет очень похожий формат, но имеет разные связанные с ним функции HTML, CSS и Javascript. Каждый файл также имеет init.js , который в основном выполняет проверку, чтобы увидеть, вошел ли пользователь в систему (и другие проверки безопасности).

После init.js выполнив проверки, он перенаправит пользователя либо на checkout, signIn, либо на viewItems. Чтобы увеличить скорость веб-приложения, я хотел устранить перенаправления страниц, поэтому я подумал о динамической загрузке javascript, html и css, привязанных к файлу. Я наткнулся на эту статью, в которой указывается, что то, что я пытаюсь сделать, возможно. :

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Цель состоит в том, чтобы код выглядел примерно так:

index.html псевдокод

 <head>
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/init.js"></script>
</head>
<script>
    if(user == signedIn)
        load viewItems.html
        load viewItems.css
        load viewItems.js

    else if(user != signedIn)
        load signin.html
        load signin.css
        load signin.js
</script>
<body>
</body>

Мои основные вопросы заключаются в том, что будет ли это делать таким образом (удаляясь от перенаправления), значительно увеличит скорость (как загрузка элементов в теге head, так и init.js выполнение проверок выполняется только один раз, в отличие от загрузки при каждом перенаправлении пользователя). Или это спорный вопрос, так как увеличение скорости будет незначительным, и мне все равно лучше перенаправить пользователя.

Комментарии:

1. упс, да, это должен был быть псевдокод, но спасибо

Ответ №1:

Я не знаю точного ответа, потому что существует так много переменных, которые влияют на вашу скорость, но вот что я бы сделал.

В зависимости от ваших временных ограничений вы можете попробовать оба варианта (перенаправление и динамическую загрузку) и настроить тест скорости, чтобы определить, какой из них быстрее (конечно, вам придется учитывать местоположение, компьютеры, браузеры и т. Д. Ваших основных пользователей).

Кроме того, рассмотрите возможность сокращения файлов javascript и css для повышения производительности и объединения js и css в 2 файла (быстрее загрузить один большой файл js, чем 10 маленьких файлов js). В принципе, храните файлы отдельно для кодирования (это упрощает) и объединяйте их в один новый файл при развертывании веб-сайта.

Просто поищите в Google: существует множество инструментов, помогающих тестировать скорость и сжимать / объединять ваши файлы js и css.