撩课-Web大前端天天5道面试题-Day33

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

CommonJS 模块的重要特性是加载时执行，
即脚本代码在 require 的时候，就会所有执行。
一旦出现某个模块被”循环加载”，
就只输出已经执行的部分，
还未执行的部分不会输出。

ES6 模块是动态引用，
若是使用 import 从一个模块加载变量，
那些变量不会被缓存，
而是成为一个指向被加载模块的引用，
须要开发者本身保证，
真正取值的时候可以取到值。

import/export 最终都是编译为 require/exports 来执行的。
CommonJS 规范规定，
每一个模块内部，
module 变量表明当前模块。
这个变量是一个对象，
它的 exports 属性（即 module.exports ）是对外的接口。
加载某个模块，
实际上是加载该模块的 module.exports 属性。
export 命令规定的是对外的接口，
必须与模块内部的变量创建一一对应关系。

复制代码

2.项目作过哪些性能优化？

减小 HTTP 请求数
减小 DNS 查询
使用 CDN
避免重定向
图片懒加载
减小 DOM 元素数量
减小 DOM 操做
使用外部 JavaScript 和 CSS
压缩 JavaScript 、 CSS 、字体、图片等
优化 CSS Sprite
使用 iconfont
字体裁剪
多域名分发划份内容到不一样域名
尽可能减小 iframe 使用
避免图片 src 为空
把样式表放在 中
把脚本放在页面底部

复制代码

3.js 异步加载的方式?

渲染引擎遇到 script 标签会停下来，
等到执行完脚本，继续向下渲染
defer 是“渲染完再执行”，async 是“下载完就执行”，
defer 若是有多个脚本，
会按照在页面中出现的顺序加载，
多个async 脚本不能保证加载顺序
加载 es6模块的时候设置 type=module，
异步加载不会形成阻塞浏览器，页面渲染完再执行，
能够同时加上async属性，
异步执行脚本（利用顶层的this等于undefined这个语法点，
能够侦测当前代码是否在 ES6 模块之中）

复制代码

4.get与post 通信的区别？

Get 请求能缓存，Post 不能
Post 相对 Get 安全一点点，
由于Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，
Post 不会，可是在抓包的状况下都是同样的。
Post 能够经过 request body来传输比 Get 更多的数据，Get 没有这个技术
URL有长度限制，会影响 Get 请求，
可是这个长度限制是浏览器规定的，不是 RFC 规定的
Post 支持更多的编码类型且不对数据类型限制

复制代码

5.为何虚拟 dom 会提升性能?

虚拟 dom 至关于在 js 和真实 dom 中间加了一个缓存，
利用 dom diff 算法避免了没有必要的 dom 操做，从而提升性能。

用 JavaScript 对象结构表示 DOM 树的结构；
而后用这个树构建一个真正的 DOM 树，
插到文档当中当状态变动的时候，从新构造一棵新的对象树。
而后用新的树和旧的树进行比较，
记录两棵树差别把 2 所记录的差别应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

复制代码