前端优化

前端优化

• CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用css图片的一些属性进行背景定位
• CDN
• 使用缓存，http缓存
• Angular的打包优化， 如引用moment库时(默认包含locale日期时间的国际化库)，只需要在typings.d.ts文件最后加上declare var moment:any; 将项目中的import * as moment from ‘moment’;全部删除， 如果要引入中文库，只需要 import ‘moment/locale/zh-cn’; moment.locale(‘zh-cn’)。 还有在引入@ng-bootstrap/ng-bootstrap这个库时, 官方推荐的是直接引入NgbModule,这种方式会引入所有的模块，改进方式只引入需要的, 例如NgbDatepickerModule, 根组件NgbDatepickerModule.forRoot()， 其他组件直接使用NgbDatepickerModule。 还有引入echarts 支持按需加载， 配置webpack
• angular 懒加载，让首页尽快的加载。 优化前我们工程就一个主模块文件（app.module.ts），路由跳转各页面其实都属于该模块一部分， 多个chunk.js。 多模块懒加载-> --prod –aot 优化方式编译 –> 服务端开启gizp压缩， source-map-explorer插件，查看vendor.js里面我们添加进去的第三方插件库
• angular生命周期钩子(特殊事件)， 每个(接口/钩子)都有唯一的(钩子方法)(ng前缀 + 接口名) ngOnChanges(绑定的值发送改变) --> ngOnInit --> ngDoCheck(检测并在Angular上下文发生变化时执行， 检测那些被 Angular 忽略的更改) --> ngOnDestroy(取消订阅) 。 再就是组件特定的接口 afterContent(外来内容被投影到组件中之后调用它们,类似 transclusion，一般不要在组件标签内部放任何内容，要放内容就要投影进去), afterView(在每次创建了组件的子视图后调用它们) (init/checked)， 对应组件的访问(@ContentChild, @ViewChild)
• angular事件发射器， somethingChange.emit(value)发出事件, obj.somethingChanged.subscribe(val) 使用这个订阅方法来实现事件发射的订阅