前端开发常见问题

组件封装

目的：为了重用，提高开发效率和代码质量 注意：低耦合，单一职责，可复用性，可维护性

常用操作：

1. 分析布局
2. 初步开发
3. 化繁为简
4. 组件抽象

JS 异步加载

1. 动态生成 script 标签
2. 添加h5的 async defer 属性，前者乱序不适合依赖性加载
3. async 是下载完就执行， defer 是渲染完再执行

css 与 js 动画差异

1. css 性能好
2. css 代码逻辑相对简单
3. js 动画控制好
4. js 兼容性好
5. js 可实现的动画多
6. js 可以添加事件

负载均衡

多台服务器共同协作，不让其中某一台或几台超额工作，发挥服务器的最大作用

1. http 重定向负载均衡：调度者根据策略选择服务器以 302 响应请求，缺点只有第一次有效果，后续操作维持在该服务器
2. dns 负载均衡：解析域名时，访问多个ip服务器中的一个（可监控性较弱）
3. 反向代理负载均衡：访问统一的服务器，由服务器进行调度访问实际的某个服务器，对统一的服务器要求大，性能受到 服务器群的数量

CDN

内容分发网络，基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

内存泄漏

定义：程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题 js中可能出现的内存泄漏情况 结果：变慢，崩溃，延迟大等 原因：

1. 全局变量
2. dom 清空时，还存在引用
3. ie 中使用闭包
4. 定时器未清理
5. 子元素存在引起的内存泄露

避免策略：

1. 减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
2. 注意程序逻辑，避免死循环之类的 ；
3. 避免创建过多的对象 原则：不用了的东西要及时归还。
4. 减少层级过多的引用

babel 原理

ES6、7 代码输入 -> babylon 进行解析 -> 得到 AST（抽象语法树）-> plugin 用 babel-traverse 对 AST 树进行遍历转译 ->得到新的 AST 树->用 babel-generator 通过 AST 树生成 ES5 代码

promise

特性：Promise 对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止，也即是说，错误总会被下一个 catch 语句捕获

js 自定义事件

三要素： document.createEvent() event.initEvent() element.dispatchEvent()

demo:
(en:自定义事件名称，fn:事件处理函数，addEvent:为DOM元素添加自定义事件，triggerEvent:触发自定义事件)
window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEvent("test",function(){console.log("handler1")});
    demo.addEvent("test",function(){console.log("handler2")});
    demo.onclick = function(){
        this.triggerEvent("test");
    }
}
Element.prototype.addEvent = function(en,fn){
    this.pools = this.pools || {};
    if(en in this.pools){
        this.pools[en].push(fn);
    }else{
        this.pools[en] = [];
        this.pools[en].push(fn);
    }
}
Element.prototype.triggerEvent  = function(en){
    if(en in this.pools){
        var fns = this.pools[en];
        for(var i=0,il=fns.length;i<il;i++){
            fns[i]();
        }
    }else{
        return;
    }
}

es6 模块 commonjs amd cmd

1. CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
2. CommonJS 是同步加载模块,在浏览器中会出现堵塞情况，所以不适用
3. AMD 异步，需要定义回调define方式
4. es6 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量
5. es6 还可以导出类、方法，自动适用严格模式

前后端路由差别

1. 后端每次路由请求都是重新访问服务器
2. 前端路由实际上只是 JS 根据 URL 来操作 DOM 元素，根据每个页面需要的去服务端请求数据，返回数据后和模板进行组合。