撩课-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 树上，视图就更新了。