动态加载Javascript HTML CSS vs页面重定向

我目前正在开发一个web应用程序，在客户端需要很少的延迟。Web App有三个主要部分(signIn, viewItems, checkout)。

当前代码的状态是这样的:

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。为了提高web应用程序的速度，我希望消除页面重定向，所以我考虑动态加载与文件绑定的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执行检查只完成一次，而不是每次用户被重定向时都被加载)。或者这是一个有争议的问题，因为速度的提高可以忽略不计，我最好还是重定向用户。

我不知道确切的答案，因为有太多的变量会影响你的速度，但这是我要做的。

根据你的时间限制，你可以尝试(重定向和动态加载)，并设置一个速度测试，以确定哪一个更快(当然，你必须考虑到你的主要用户的位置，计算机，浏览器等)。

另外，考虑最小化javascript和css文件以提高性能，并将js和css合并到2个文件中(加载单个大js文件比加载10个小js文件要快)。基本上，保持文件分开编码(使其更容易)，并在部署网站时将它们合并为一个新文件。

只要在谷歌上搜索:有很多工具可以帮助测试速度和收缩/合并你的js和css文件

相关内容

最新更新

热门标签：