js加载顺序对页面性能的影响

Question

问题：在thml中间中插入一个用script标签，这个script是加载html的公共部分，并加载了相关的js，在公共部分里没有加载相关的js文件时，在跳转到另一个页面时，有时候要刷新页面才会触发公共模块的相关事件，有时候又不用刷新，有时候有需要强制刷新才行。这个应该是js引入的顺序问题，但如果我在公共模块加载了公共模块相关的js，以上的问题就都没有出现。

相关代码：

                <div id="mapModule">
                    <script  type="text/javascript" >
                        $("#mapModule").load("mapModule.html");
                    </script>
                </div> 
              

疑问：就是我在这个html结构中加载了js，对页面的性能是否影响很大？？

各位资深人士是否可以提供一个专业的回答哈！！

谢谢！！！

Answer 1

看了你的图，如果你的body里面除了这个div在没有其他元素。那这段代码渲染出来以后什么也没有。还有js文件最好放在页面的底部，如果有window.onload或者$(function(){})也可以放在头部，但是加到头部会影响网页的加在速度，尽量不要加在元素的标签中。

Answer 2

html下用load加载页面一般都是最基础的样式文件，
调用了js的话可以把js文件在mapModule.html页面也引用一下，
或者相关js文件在页面头部引用 </head>之前。

一般有公用部分最好用第三方打包工具，比如webpack、requirejs你可以去看下，
或者你可以去看下handlebars这个模版引擎，本人最近自学总结的文章也可以参考。
http://www.cnblogs.com/yuanxi...

Answer 3

从代码角度来说 html里 写js是没问题的，但若js执行可能会阻止html代码的渲染！为了代码管理一般都是html 和 js分离 ，在body标签结束之前引用外部js方法。
好了，回到问题上。看代码你用的是jquery里load加载html片段，load()函数本质上其实是ajax，有ajax那么你应该想到服务器环境，使用load最好搭建一个本地环境，最后补充一个坑：jquery的load()兼容并不是很好