网页优化 tips

这是16年的一篇笔记，技术也许已经有过时的，再做这方面的优化的时候将会更新此文（2018.10）

参考和引用的资料来源

ng-book 权威指南 ch32 优化Angular应用
网络资源： 分析小米页面

css方面

字体问题

google字体在国内被block，替换成360提供的useso
再三确认网络字体是否真正需要，不需要的化直接注释掉

FontSpider

于是 “字蛛(FontSpider)” 这款工具可以粉墨登场啦（别乱用成语啊亲~）—— 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

页面字体效果切换的闪动（FOUT——flash of unstyled text）现象。

通过将字体的声明部分inline到页面中，而不是通过文件请求，可以将其转化为base64编码

js第三方lib库

比如jquery，angualr，underscore，等常见库，使用cdn加速。
可供选择的加速网站：

• sinaapp http://lib.sinaapp.com/js/angular.js/angular-1.2.19/
• 360前端
• 又拍云前端
• cdnjs /cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/
• 百度cdn开源项目

自定义的css和js，上传到云存储加速

• 收费： 又拍云
• 免费：七牛

angular中

利用$templateCache

使用XHR加载模板可能会导致Web应用缓慢或者有卡顿的感觉。可以通过将模板包装为JavaScript文件,然 后连同应用程序的其他部分一起传输的方式伪造模板缓存加载,而不是通过XHR提取模板。
即：将模版的html转化为js脚本载入并缓存，而且不再通过xhr加载，加快了页面载入速度。

原理与工具

默认情况下,Angular无法从本地$tempalteCache中找到模板时,会通过XHR提取模板。当 XHR请求很慢,或者模板很大时,它可能会对应用的用户体验造成很大的负面影响。
你可以通过“伪造”$templateCache已经被填充的方式来避免这一延迟,这样Angular就不必 从远程加载模板。可以在JavaScript中手动实现这个技巧,就像这样:

angular.module('myApp',\[])
.run(function($templateCache) {
  $templateCache.put('home.html', 'This is the home template');
});

现在,当Angular需要提取名为home.html的模板时,它会在$templateCahce中找到它,而无需从服务器提取。
如果想为服务器打包应用,手动处理的步骤就会很繁琐。幸好,grunt-angular-templates 这个Grunt任务可以帮我们完成。

资源文件的压缩整套流程

grunt.registerTask('dist',['clean', 'ngAnnotate', 'copy', 'cssmin','concat', 'uglify', 'targetHtml', 'htmlmin','clean:post']);

• uglify: 压缩HTML、JavaScript、CSS,甚至是图片。

图片压缩

ui库 自定义裁剪

semantic-ui可以使用gulp工具，自己选择需要的生成dist，应用到生产环境中。