angular.js - AngularJS 单页面应用首页加载优化有哪些方法?

浏览:46日期:2023-02-08

问题描述

传统网页的请求中,数据在服务器端加载到模板上,一步就可以完成。

下载 HTML下载 CSS / javascript渲染

单页面应用需要先下载框架,然后才能开始加载数据。

下载 HTML下载 CSS / javascript下载数据 / 模板渲染

有什么办法减少请求次数,或是将这种串行加载变成并行的方法呢?

问题解答

回答1:

完美的方案是服务器端渲染首屏,不过angular似乎不擅长这个,没见到过实际的方案

稍差一些至少可以让服务端把首屏的数据吐在页面上

另外一些基本的css 模板 js的编译合并应该是最基本的

回答2:

用一下gulp 工具把 css 打包成一个文件, js打包成一个文件, 模板打包成一个js文件($templateCache) 可以和js 文件打包成一起.然后就是1 下载 HTML (第一个请求, 纯静态页面, 可能会包括部分angular模板内容, 这个页面响应要快)2 下载 CSS (一个请求)3 下载 javascript文件 和 模板js文件 (一个请求)4 angular 渲染页面一共3个请求 + 其他ajax请求搞定.

'gulp': '~3.8.0','gulp-angular-templatecache': '^1.4.2','gulp-compass': '^2.0.1','gulp-concat': '^2.4.1','gulp-jasmine': '^1.0.1','gulp-jshint': '~1.5.5','gulp-livereload': '~1.3.1','gulp-minify-css': '^0.3.10','gulp-minify-html': '^0.1.6','gulp-mocha': '~0.5.1','gulp-ng-annotate': '^0.3.5','gulp-nodemon': '^1.0.4','gulp-shell': '^0.2.10','gulp-uglify': '^1.0.1',回答3:

推荐使用requireJs + angularJsAMD,可以做到按需加载。链接传送:https://github.com/marcoslin/angularAMD

回答4:

angularjs压缩后就170多kb 如果在移动端上你要考虑一下了 在pc端。。我感觉也不用太在意 你看teambition 前端上m的资源 还不是一个loading在转啊转

回答5:

从业务和设计着手,常用的可以grunt等工具打包lib.min.js到一次性加载,非 常用的惰性加载

相关文章: