第33篇

1、CommonJS中的require/exports和ES6中的import/export的区别

CommonJS模块的重要特性是加载时执行&＃xff0c;即脚本代码在require的时候&＃xff0c;就会全部执行。一旦出现某个模块被“循环加载”&＃xff0c;

就只输出已经执行的部分&＃xff0c;还未执行的部分不会输出。

ES6模块是动态引用&＃xff0c;如果使用import从一个模块加载变量&＃xff0c;那些变量不会被缓存&＃xff0c;而是成为一个指向被加载模块的引用

&＃xff0c;需要开发者自己保证&＃xff0c;真正取值的时候能够取到值。

import/exports最终都是编译为require/exports来执行的&＃xff0c;commonJS规定&＃xff0c;每个模块内部&＃xff0c;module变量代表当前模块&＃xff0c;

这个变量是一个对象&＃xff0c;它的exports属性&＃xff08;即module.exports&＃xff09;使对外的接口。加载某个模块其实是加载该模块module.exports

属性。export命令规定的是对外的接口&＃xff0c;必须与模块内部的变量建立一一对应关系。

2、项目做过那些性能优化&＃xff1f;

减少HTTP请求数

减少DNS查询

使用CDN

避免重定向

图片懒加载

减少DOM元素数量

减少DOM操作

使用外部Javascript和css

压缩Javascript、css、字体、图片等

使用CSS Sprite

使用iconfont

字体剪裁

多域名分发分容到不同域名

尽量减少iframe使用

把样式放置在头部

把脚本放置在页面底部

3、js异步加载的方式

渲染引擎遇到script标签会停下来&＃xff0c;等到执行完脚本&＃xff0c;继续向下渲染。

defer是“渲染完再执行”&＃xff0c;async是“下载完就执行“

defer如果有多个脚本&＃xff0c;会按照在页面中出现的顺序加载&＃xff0c;

多个async脚本不能保证加载顺序

加载es6模块的时候设置type&＃61;module,

异步加载不会造成阻塞浏览器&＃xff0c;页面渲染完再执行&＃xff0c;可以同时加上async属性

异步执行脚本&＃xff08;利用顶层的this等于undefined这个语法点&＃xff09;&＃xff0c;可以侦测当前代码是否在ES6模块之中

4、gei和post通讯的区别&＃xff1f;

Get请求能缓存&＃xff0c;Post不能。

Post相对Get安全一点点&＃xff0c;因为Get请求都包含在URL里&＃xff0c;且会被浏览器保存历史记录&＃xff0c;

post不会&＃xff0c;但是在抓包的情况下都是一样的。

post可以通过request body来传输比get更多的数据&＃xff0c;get没有这个数据

url长度有限制&＃xff0c;会影响get请求&＃xff0c;但是这个长度限制是浏览器规定的&＃xff0c;post支持更多的编码类型且不对数据类型限制

5、为什么虚拟dom会提高性能&＃xff1f;

虚拟dom相当于在js和真实dom中间加了一个缓存&＃xff0c;利用dom diff算法避免了没有必要的dom操作&＃xff0c;从而提高性能。

用Javascript对象结构表示DOM树的解构&＃xff0c;然后用这个树构建一个真正的DOM树&＃xff0c;插到文档当中&＃xff0c;当状态变更的时候&＃xff0c;重新构造一棵新的对象树&＃xff0c;

然后用新的树和旧的树进行比较&＃xff0c;记录2棵树的差异&＃xff0c;&＃xff0c;把记录的差异应用到前面所构建的真正的DOM树上&＃xff0c;视图就更新了。