问题描述
传统网页的请求中,数据在服务器端加载到模板上,一步就可以完成。
下载 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到一次性加载,非 常用的惰性加载

