Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari.
Initially, I suspected that the app may have too many JavaScript files causing the delay. To address this, I combined 11 JS files into 3 files, which resolved the problem. Further experimentation revealed that mobile Safari has limitations on the number of JS files allowed on the first page, with 4 being the maximum accepted count.
My question is: Are there indeed restrictions imposed by mobile Safari regarding the number of JS files on the initial page load? Or could this be attributed to misusing AngularJS or HTML5 in any way? It seems odd if Safari enforces such limitations without proper documentation, something I have not found through Google searches.
The original code for my first page appears as:
<!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>