After starting to work with the ionic framework, I noticed a significant change in performance when testing an android app on Chrome for the first time. It was fast and responsive until I added a button that led to a screen with navigation bars, side menus, and custom fonts on both screens. Suddenly, the app slowed down drastically to the point where clicking the button to navigate became nearly impossible. Surprisingly, the app runs much smoother in Firefox, but even when using 'ionic serve --lab', there is still noticeable lag. Additionally, I experienced issues with loading custom fonts on Android devices - they display correctly upon initial launch, but fail to show up on subsequent launches. Below is the code for both screens:
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- your app's js -->
</head>
<body ng-app="starter">
<ion-pane class="customBackground">
<div class="harpee" style="font-family: Freehand521, sans-serif">Harpee</div>
<div class="motto">
<p>A Culture of Happiness and Hope</p>
</div>
<div class="logIn">
<h1>Log In</h1>
</div>
<div class="logInForm">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username">
</label>
</div>
<div class="list list-inset formSpacing">
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
</div>
<a href="homeView.html">
<button class="button button-positive customButton">
Sign In
</button>
</a>
<div class="customText">
<p>Forgot your Password?</p>
<p>Sign Up</p>
</div>
</div>
</ion-pane>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</body>
</html>`
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/home.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- your app's js -->
<!--Fonts-->
</head>
<body ng-app="starter">
<ion-pane>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<i class="icon ion-ios7-search button button-clear" ng-click="#"></i>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-home" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-compose" ui-sref="talk">
<ion-nav-view name="talk"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-social-reddit" ui-sref="hdi">
<ion-nav-view name="hdi"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-person" ui-sref="you">
<ion-nav-view name="you"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item class="item item-avatar">
<img src="img/3.jpg">
<h2>User Name</h2>
<p>Brief Bio</p>
<!--This is the actual code to be used, to fetch user data and display as in the above code-->
<!--<img ng-src="{{item.img}}">-->
<!--<h2>{{item.title}}</h2>-->
<!--<p>{{item.description}}</p>-->
</ion-item>
<ion-item nav-clear menu-close ng-click="#">
<i class="icon ion-person" ng-click="#">
My Profile
</i>
</ion-item>
<ion-item nav-clear menu-close ng-click="#">
<i class="icon ion-person-stalker" ng-click="#">
Forums
</i>
<span class="badge badge-assertive">0</span>
</ion-item>
<ion-item nav-clear menu-close ng-click="#">
<i class="icon ion-loop" ng-click="#">
Connect
</i>
</ion-item>
<ion-item nav-clear menu-close ng-click="#">
<i class="icon ion-gear-a" ng-click="#">
Settings
</i>
</ion-item>
<ion-item nav-clear menu-close ng-click="#">
<i class="icon ion-power" ng-click="#">
Log Out
</i>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-pane>
<script type="text/ng-template" id="home.html">
... (omitted for brevity)
</script>
<script type="text/ng-template" id="talk.html">
... (omitted for brevity)
</script>
<script type="text/ng-template" id="hdi.html">
... (omitted for brevity)
</script>
<script type="text/ng-template" id="you.html">
... (omitted for brevity)
</script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</body>
</html>`