1.promise:三种状态,pending等待中,resolve成功状态,rejected 失败状态 配合then方法使用;
2.async/await:async声明一个异步函数,返回值是一个promise对象,配合await使用(reslove状态)最好放在try{}catch{}里面做一个容错,then方法的语法糖。
3.使用箭头函数注意:
a.用了箭头函数,this就不是指向window,而是父级(指向是可变的
b.不能够使用arguments对象
c.不能用作构造函数,这就是说不能够使用new命令,否则会抛出一个错误
d.不可以使用yield命令,因此箭头函数不能用作 Generator 函数
4.浏览器渲染过程:
a.获取html文档构建dom树;
b.解析css构建cssdom树,
c.合并dom树,cssdom树,构建render树
d.根据render树进行布局,然后绘制;
5.webpack核心概念:
ertry入口文件,告诉webpack从哪个模块作为构建项目的起点
output告诉webpack在哪里输出打包好的代码,默认为dist
Loader:本质就是一个函数,在该函数中对接收到的内容进行转换,返回转换后的结果; 因为 Webpack 只认识 JavaScript,所以 Loader 就成了翻译官,对其他类型的资源进行转译的预处理工作。
Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
Webpack构建过程
1. 从entry里配置的module开始递归解析entry依赖的所有module
2. 每找到一个module,就会根据配置的loader去找对应的转换规则
3. 对module进行转换后,再解析出当前module依赖的module
4. 这些模块会以entry为单位分组,一个entry和其所有依赖的module被分到一个组Chunk
5. 最后Webpack会把所有Chunk转换成文件输出在整个流程中Webpack会在恰当的时机执行plugin里定义的逻辑
webpack优化:使用babel-loader开启缓存;image-webpack-loader压缩图片;thread-loader;uglifyjs-webpack-plugin 压缩JS代码;exclude/include (确定 loader 规则范围);html-webpack-externals-plugin
6. hash模式和history模式。hash模式是通过监听hashChange事件来实现的,history模式是通过pushState方法+popstate事件来实现的。