diff --git a/zeppelin-web/src/components/navbar/navbar.controller.js b/zeppelin-web/src/components/navbar/navbar.controller.js
index 7838a824e20..8586960af1c 100644
--- a/zeppelin-web/src/components/navbar/navbar.controller.js
+++ b/zeppelin-web/src/components/navbar/navbar.controller.js
@@ -57,6 +57,7 @@
     }
 
     function initController() {
+      $scope.isDrawNavbarNotebookList = false;
       angular.element('#notebook-list').perfectScrollbar({suppressScrollX: true});
 
       angular.element(document).click(function() {
@@ -122,6 +123,19 @@
     $scope.$on('loginSuccess', function(event, param) {
       loadNotes();
     });
+
+    /*
+    ** Performance optimization for Browser Render.
+    */
+    angular.element(document).ready(function() {
+      angular.element('.notebook-list-dropdown').on('show.bs.dropdown', function() {
+        $scope.isDrawNavbarNotebookList = true;
+      });
+
+      angular.element('.notebook-list-dropdown').on('hide.bs.dropdown', function() {
+        $scope.isDrawNavbarNotebookList = false;
+      });
+    });
   }
 
 })();
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
index c4de8468076..8851409b025 100644
--- a/zeppelin-web/src/components/navbar/navbar.html
+++ b/zeppelin-web/src/components/navbar/navbar.html
@@ -25,12 +25,12 @@
 
     <div class="collapse navbar-collapse" ng-controller="NavCtrl as navbar">
       <ul class="nav navbar-nav" ng-if="ticket">
-        <li class="dropdown" dropdown>
-          <a href="#" class="dropdown-toggle" dropdown-toggle>Notebook <span class="caret"></span></a>
+        <li class="dropdown notebook-list-dropdown" dropdown>
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle>Notebook <span class="caret"></span></a>
           <ul class="dropdown-menu navbar-dropdown-maxHeight" role="menu">
             <li><a href="" data-toggle="modal" data-target="#noteNameModal"><i class="fa fa-plus"></i> Create new note</a></li>
             <li class="divider"></li>
-            <div id="notebook-list" class="scrollbar-container">
+            <div id="notebook-list" class="scrollbar-container" ng-if="isDrawNavbarNotebookList">
               <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
               <li ng-repeat="note in navbar.notes.root.children | filter:query.q | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index"
                   ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'components/navbar/navbar-notebookList-elem.html'">