前端工程化

何为工程化：工程化是为了提高效率和降低成本面生
工程化方案
1、开发规范
1 css hint
2 html hint
3 eslint
2、模块化开发：(资源的模块化 css 模块化 js 模块化)每个包含模板html +样式(css)+逻辑(js)功能完备的结构单元统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM 是DOM优化
3、组件化开发：组件化框架/类库的思想是先来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优化。
4、性能优化：自动化的压缩合并打包加时间戳，预编译和资源注入
5、部署
6、开发流程 : code Review 、BUG收集(前端埋点)、文件监听
7、开发文档(JSDOC)
8、自动化测试 或者单元测试(vue-cli mocha+chai+@vue/test-utils)
总结:JS面向对象开发 HTMl 面向组件开发 代码验证交由自动化测试或单元测试(把代码交由机器验证，而不是程序员)

性能优化
针对需要优化页面通过检测页面加载性能进行专项优化
performance.timing
DNS查询耗时 :domainLookupEnd - domainLookupStart TCP链接耗时 :connectEnd - connectStart
request请求耗时 :responseEnd - responseStart
解析dom树耗时 : domComplete- domInteractive
白屏时间 :responseStart - navigationStart
domready时间 :domContentLoadedEventEnd - navigationStart
onload时间 :loadEventEnd - navigationStart
如需要进行打点通过navigator.sendBeacon(‘请求地址’) 通过get方式进行发送
当前方法是等主渲染进程不忙的时候进行发送。不影响主进程