I have a problem on the initial load of my angular APP on mobile safari, it hangs with blank page for nearly 2 minutes, while on other browsers,it works perfect, even on MAC safari and IPAD safari.
At a first guess, maybe my app has too many js files. So I concat them(11 files) into 3 files, and the issue was resolved. Seems mobile safari has some limitation of the number of js files on the first page. So I tried 4 files, and 5, and it seems 4 is the max number accepted by mobile safari.
My question is: Is there really any limitation for mobile safari on the first page's number of js files? Or did I misuse angularJS or HTML5,or anything else. Because I think if safari really does, it seems awkward, and it should be carefully documented which I never searched on google.
The original code of my first page looks like:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<base href="/"/>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles for this page -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
</head>
<body class="blog-body" ng-app="blog" ng-controller="blogCtrl">
<div ng-include src="'modules/blogPublish/blogNavBar.html'"></div>
<div ui-view autoscroll='true' class="anchor"></div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../modules/blogPublish/blog.js"></script>
<script src="../modules/blogPublish/ui_effect.js"></script>
<script src="../modules/appError/appError.js"></script>
<script src="../modules/common/underscore.js"></script>
<script src="../modules/common/alert.js"></script>
</body>
</html>
