Web前端面试题目汇总
以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教。:）
HTML/CSS部分
1、什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
3、CSS实现垂直水平居中
一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：
<div class="wrapper">
<div class="content"></div>
</div> CSS：
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
} 4、简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
5、什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
// 1、条件Hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性Hack
.test{
color:#090\9; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
6、简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
7、px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
8、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
9、浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
JavaScript部分
怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。
/**
* 对象克隆
* 支持基本数据类型及对象
* 递归方法
*/
function clone(obj) {
var o;
switch (typeof obj) {
case "undefined":
break;
case "string":
o = obj + "";
break;
case "number":
o = obj - 0;
break;
case "boolean":
o = obj;
break;
case "object": // object 分为两种情况 对象（Object）或数组（Array）
if (obj === null) {
o = null;
} else {
if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
o = [];
for (var i = 0; i < obj.length; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}如何消除一个数组里面重复的元素？
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
};Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
请描述一下cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
统计字符串中字母个数或统计最多字母数。
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;i<str.length;i++){
var v = str.charAt(i);
if(obj[v] && obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
} jQuery的事件委托方法on、live、delegate之间有什么区别？
如何理解闭包？
跨域请求资源的方法有哪些？
谈谈垃圾回收机制方式及内存管理
开发过程中遇到的内存泄露情况，如何解决的？
HTTP
一次完整的HTTP事务是怎样的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
HTTP的状态码有哪些？
HTTPS是如何实现加密？
算法相关
手写数组快速排序
关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
"快速排序"的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为"基准"（pivot）。
（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。
（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
参考代码：
var quickSort = function(arr) {
if (arr.length <= 1) { return arr; }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};JavaScript实现二分法查找
二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：
（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。
（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。
（3）如果某一步数组为空，则表示找不到目标元素。
参考代码:
// 非递归算法
function binary_search(arr, key) {
var low = 0,
high = arr.length - 1;
while(low <= high){
var mid = parseInt((high + low) / 2);
if(key == arr[mid]){
return mid;
}else if(key > arr[mid]){
low = mid + 1;
}else if(key < arr[mid]){
high = mid -1;
}else{
return -1;
}
}
};
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result = binary_search(arr,10);
alert(result); // 9 返回目标元素的索引值
// 递归算法
function binary_search(arr,low, high, key) {
if (low > high){
return -1;
}
var mid = parseInt((high + low) / 2);
if(arr[mid] == key){
return mid;
}else if (arr[mid] > key){
high = mid - 1;
return binary_search(arr, low, high, key);
}else if (arr[mid] < key){
low = mid + 1;
return binary_search(arr, low, high, key);
}
};
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result = binary_search(arr, 0, 13, 10);
alert(result); // 9 返回目标元素的索引值 Web安全
你所了解到的Web攻击技术
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
前端性能
如何优化图像、图像格式的区别？
浏览器是如何渲染页面的？
设计模式
对MVC、MVVM的理解
正则表达式
写一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}使用正则表达式验证邮箱格式
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email)); // true 职业规划
对前端工程师这个职位你是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
大总结-JS-挖 “掘” 淘 “金” 之 前端闯关历险记学习资料汇总
世间万物，为我所用。
掘金不仅是一个很好的在线同性交友平台，也是一个学习交流和分享技术场所，更是程序猿和程序媛获取养料的精神家园。
分享是一个杂乱无章的环节，这无可厚非，因为在这里人人平等，每个人都可以分享自己看到的精品文章，也可以创作记录分享自己的成果，这是平台带给大家的优势，同时，面对零零散散的文章，对于我们来说，很困惑，我到底该学什么，从入门到精通的过程是怎样的？我该如何系统的学习这门语言？
汪洋大海，我该如何探寻所需的宝藏？
学习路途，我该如何寻找最佳的曲线？
去年开始看掘金，收藏了很多文章，也收获了很多知识，但是对于上面的疑问一直也在摸索当中，这里先感谢掘金这个平台，让我能学习到很多新的未知的东西，但在用掘金的这段时间内，也发现看的东西虽然很多，但是很杂，没有系统化的去深入了解一个东西，于是诞生了把自己看到过的，错过的，还有将要发表的，一起做一个整理和集合。
看见好的文章就收藏，后来发现收藏了几百篇，很多都是重复的，也不够系统化，资源如浩瀚大海，找起来也麻烦，无疑给自己增加了负担，在此，为了方便大家系统的学习前端这门课程，找准自己的定位，我利用空余时间，把掘金有屎以来分享的前端文章做了一个归类，方便掘金的朋友学习和收藏，喜欢的朋友可以收藏一下，这篇文章会持续更新，也欢迎关注【我的GitHub博客】获取最新动态。
贵有恒何必三更眠五更起，最无益只怕一日曝十日寒。 一天更新一点，每天看一点，坚持就是胜利，如果只整理和收藏不花时间看，一切都是徒劳。✌️
一、推荐规则
- 推荐内容全部来自广大码农朋友的分享和专栏的原创，也就是掘金能搜索到的内容；
- 每个分类原则上不多于3篇，除非这一分类优秀的文章特别多；
- 每个文章我都有粗略阅读，排名按照收藏数和个人感觉关联度；
- 文章日期全部来自2017-3月之前，会不定期更新，如果遗漏非常精彩的文章，可以及时联系我
- 由于工程量大，推荐和排版难免出错，还望见谅，如果错误请底下及时评论反馈
二、代码规范篇
没有规矩，无以成方圆。
为什么把这个放在首位呢？好的代码规范不仅自己看起来赏心悦目，心情舒畅，我怎么就这么牛逼写出这么好看的代码（熏疼自己三秒钟，这往往只是错觉），别人看起来也直观一目了然，后来接手维护的人看了这种高逼格的代码也不会出现这种情况：这尼玛什么几把玩意，简直一坨翔，坑死劳资了（反正我走了也听不到?，你就骂吧）
2.1 前端开发规范总览
2.2 HTML规范
2.3 CSS规范
2.4 JS规范
《JavaScript风格指南》
《JavaScript 代码整洁之道》
《Airbnb 的 JavaScript 编程规范》
2.5 ES6规范
三、前言
国学大师王国维自己的著作《人间词话》中说：
古今之成大事业、大学问者，必经过三重境界：
第一境界:昨夜西风凋碧树,独上高楼,望尽天涯路。
第二境界:衣带渐宽终不悔,为伊消得人憔悴。
第三境界:众里寻他千百度,蓦然回首,那人却在灯火阑珊处。
其实我觉得学习JavaScript也要经历类似的三种阶段：
第一境界:看山是山，看水是水。
第二境界:看山不是山，看水不是水。
第三境界:看山还是山，看水还是水。
国学大师王国维精妙地以三句词道破人生之路：起初的迷惘，继而的执着和最终的顿悟。
我以瞎几把乱扯三句词道破学习JavaScript之路：起初的表象，继而的本质和最终的本质回归到现象。
四、JavaScript基础篇
看是是山，看水是水。
万丈高楼平地起，胸有丘壑宏图画。
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。任何事情都要从基础做起，打好基础，不浮躁，才能做好一件事，学习一门语言也是一样，从“Hello World!"开始，踏踏实实，夯实基础，基础知识是整个学习体系的根本,没有牢固的基础知识作为根基,我们的学习和努力必将事倍功半,学习提纲是巩固基础知识的一种有效手段.
《思维导图来学习Javascript基础知识》
《多年 JavaScript 学习笔记整理》
《javascript 基础小结篇》
《前端开发基础 - JavaScript》
《你不知道的 Javascript》
五、JavaScript进阶篇
看山不是山，看水不是水。
其实地上本没有坑，踩的人多了，于是就有了。
JS是一门玄学，是一门很灵活的语言，当然里面有很多不好懂的概念，尤其是学完基础之后，对执行环境、this、类型转换、作用域链、闭包、原型链、继承、eval、JS左值与引用、浅复制与深复制、IIFE、模块化、函数式编程等等都有着这样或那样的不解之惑，想要成为JS大神这些门槛和坑不得不踩。
5.1 内存空间
因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间，内存管理，内存释放的认知比较模糊，甚至有些人干脆就是一无所知。
《前端基础进阶：详细图解 JavaScript 内存空间》
《JavaScript 内存管理》
《JavaScript 中的内存释放》
5.2 执行上下文与作用域
首先来说说js中的执行环境，所谓执行环境（也称执行上下文–execution context）它是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据 ，决定了它们各自的行为。而每个执行环境都有一个与之相关的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了执行环境栈中的每个执行环境对应的变量对象.通过作用域链，可以决定变量的访问和标识符的解析。
《前端基础进阶：详细图解 JavaScript 执行上下文》
《深入探讨 JavaScript 的执行环境和栈》
《图解 JS 上下文与作用域》
5.3 变量对象
深入理解执行上下文中的变量对象，从原理上解释变量提升，为接下来理解作用域链，闭包，原型打下坚实的理论基础，值得基础知识不牢固的盆友一阅。
5.4 作用域链与闭包
当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了执行环境栈中的每个执行环境对应的变量对象.通过作用域链，可以决定变量的访问和标识符的解析。
关于闭包的概念，是婆说婆有理。因而，我就翻阅了**红皮书(p178)**上对于闭包的陈述：
闭包是指有权访问另外一个函数作用域中的变量的函数
这概念有点绕，拆分一下。从概念上说，闭包有两个特点：
- 1、函数
- 2、能访问另外一个函数作用域中的变量
在ES 6之前，Javascript只有函数作用域的概念，没有块级作用域（但catch捕获的异常 只能在catch块中访问）的概念（IIFE可以创建局部作用域）。每个函数作用域都是封闭的，即外部是访问不到函数作用域中的变量。
《前端基础进阶：详细图解，彻底搞懂闭包与作用域链》
《JavaScript 闯关记之作用域和闭包》
《你想知道的关于 JavaScript 作用域的一切 (译)》
《弄懂 JavaScript 的作用域和闭包》
5.5 this
This,传说中的天使还是魔鬼？对于新手来说，this的指向一直是很头疼的地方，用的好就是天使，用的差就是魔鬼了，人人都想成为代码中的天使，为了避免成为魔鬼，我们必须好好深入学习一下this的作用机理和一些常见的坑。
《前端基础进阶：全方位解读 this》
《JavaScript 中的 this 陷阱的最全收集 -- 没有之一》
《Javascript 深入浅出 this》
《从 ECMA 规范深入理解 js 中的 this》
5.6 原型链
在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对 象共有的特点。 即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例 能够访问在构造函数原型中定义的属性和方法。
《JavaScript原型详解》
《三张图搞懂JavaScript的原型对象与原型链》
《JavaScript 原型中的哲学思想》
《一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系》
5.7 继承
Javascript 这门语言对于习惯了众多传统 OOP 语言 (c++,Java 等) 的 coder 来说其实是一门很奇怪的语言, 因为 Javascript 的 OOP 方式是基于原型的, 而非传统的类继承,主要有原型链继承，借用构造函数继承,组合继承，寄生式继承，寄生组合继承。
《js 原型链继承，借用构造函数继承, 组合继承，寄生式继承，寄生组合继承》
《Javascript 三招两式之对象继承 (上)》
《JavaScript 三招两式之对象继承 (下)》
《征服 JavaScript 面试系列：类继承和原型继承的区别》
《谈一谈 JavaScript 继承》
5.8 arguments
每个函数都会有一个 Arguments 对象实例 arguments，它引用着函数的实参，可以用数组下标的方式”[]” 引用 arguments 的元素。arguments.length 为函数实参个数，arguments.callee 引用函数自身。
《Arguments 对象深入了解》
《javascript arguments(callee、caller) 详解》
《Javascript 中的 arguments 对象》
5.9 类型转换
如果把通过函数或方法调用，明确的将某种类型转换成另一种类型称为显示转换 ，相反则称为隐式类型转换 。google和维基百科中没有找到“显示类型转换”，“隐式类型转换”的字眼。暂且这么称呼。 JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的，如下是数值类型和布尔类型的相加：
3 + true; // 4
结果是一个数值型！如果是在C或者Java环境的话，上面的运算肯定会因为运算符两边的数据类型不一致而导致报错的！但
是，在JavaScript中，只有少数情况下，错误类型才会导致出错，比如调用非函数，或者读取null或者undefined的属
性时。
《从 []==![] 为 true 来剖析 JavaScript 各种蛋疼的类型转换》
《一篇文章搞定 JS 类型转换》
《聊一聊 JS 中的『隐式类型转换』》
5.10 IIFE
全拼Imdiately Invoked Function Expression，立即执行的函数表达式。立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。
立即执行函数写法大全：
// 最常用的两种写法
(function(){ /* code */ }()); // 老道推荐写法
(function(){ /* code */ })(); // 当然这种也可以
// 括号和JS的一些操作符（如 = && || ,等）可以在函数表达式和函数声明上消除歧义
// 如下代码中，解析器已经知道一个是表达式了，于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();
// 如果你不怕代码晦涩难读，也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();
// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参数
《javascript模块化编程-详解立即执行函数表达式IIFE》
《Javascript 的匿名函数与自执行》
《js 匿名自执行函数中闭包的高级使用（前端必看）》
这一篇掘金没有推荐过，不过我认为真的写的很全很详细，这里也推荐一下：
《详解javascript立即执行函数表达式（IIFE）》
5.11 setTimeout
平时的工作中，也许你会经常用到setTimeout这个方法，可是你真的了解setTimeout吗？本系列想通过总结setTimeout的用法，顺便来探索javascript里面的事件执行机制。在一个基础阶段，理解JavaScript定时器的工作原理的是非常重要的。通常它们看起来不那么直观，因为它们处于单线程中。
《[译] JavaScript 中的定时器是如何工作的？》
《关于 JavaScript 定时器我的一些小理解》
《JavaScript 定时器及相关面试题》
《【原】以 setTimeout 来聊聊 Event Loop》
5.12 Object.defineProperty()函数
该方法允许精确添加或修改对象的属性。一般情况下，我们为对象添加属性是通过赋值来创建并显示在属性枚举中（for...in 或 Object.keys 方法）， 但这种方式添加的属性值可以被改变，也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。例如，默认情况下，使用 Object.defineProperty() 增加的属性值是不可改变的。 对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一；不能同时是两者。
《理解 JavaScript 的 Object.defineProperty() 函数》
《解析神奇的 Object.defineProperty》
《双向绑定的简单实现 - 基于 ES5 对象的 getter/setter 机制》
5.13 call、apply、bind
今天看博客时，看到了这样的一段js代码： var bind = Function.prototype.call.bind(Function.prototype.bind); 上面那段代码涉及到了call、bind，所以我想先区别一下call、apply、bind的用法。这三个方法的用法非常相似，将函数绑定到上下文中，即用来改变函数中this的指向。这个系列就是让大家深入理解其中的差异。
《JS 中 call、apply、bind 那些事》
《JavaScript 中的 call、apply、bind 深入理解》
《回味JS基础:call apply 与 bind》
《深入浅出妙用 Javascript 中 apply、call、bind》
5.14 深拷贝与浅拷贝
eg：有A、B两个对象，且都有子对象
深拷贝：将B对象拷贝到A对象中，包括B里面的子对象;
浅拷贝：将B对象拷贝到A对象中，但不包括B里面的子对象;
首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。
《JavaScript 深拷贝》
《javaScript 中的浅拷贝和深拷贝》
《深入剖析 JavaScript 的深复制》
5.15 正则表达式
还记得被称为正则小王子的jQuery作者吗？但正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜，邮箱正则去网上搜，复杂点的看看文档拼凑一下，再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过，搞完这个系列是不是准备拿下它。
《正则表达式 - 理论基础篇》
《正则表达式学习笔记》
《正则表达式实践篇》
《常见的正则表达式可视化描述》
《最全面的常用正则表达式大全》
直接来个
5.16 事件
JavaScript 程序采用了异步事件驱动编程（Event-driven programming）模型，维基百科对它的解释是：
事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的
《JavaScript 浏览器事件解析》
《深入理解 - 事件委托》
《我也来说说 JS 的事件机制》
《DOM 事件深入浅出（一）》
《DOM 事件深入浅出（二）》
《JS 中的事件绑定、事件监听、事件委托是什么？》
5.17 其他混淆点
其他一些容易混淆的难点就不单独开一个类型，这里就统一做一个系列说明，也是平时经常遇到的一些痛点和难点吧，主要是区分一些概念，知道彼此之间的异同，以下简称一张图系列。
《一张图看懂JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some》
《一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别》
《一张图彻底掌握 scrollTop, offsetTop, scrollLeft, offsetLeft......》
《一张图看懂 Function 和 Object 的关系及简述 instanceof 运算符》
六、JavaScript高手篇
看山还是山，看水还是水。
如果学习JavaScript不是为了成为高手，那将毫无意义。
其实，高手有一颗寂寞的心，因为高手的造就本就是用寂寞堆积而成。
6.1 JavaScript数据结构与算法篇
程序设计=数据结构+算法
6.1.1 数组去重
6.1.2 排序
6.1.3 查找
6.1.4 数据结构
《学习JavaScript数据结构(一)——栈和队列》
《学习 JavaScript 数据结构(二)——链表》
《学习 JavaScript 数据结构(三)——集合》
《学习 javascript 数据结构 (四)——树》
《javaScript的数据结构与算法（五）——字典和散列表》
6.1.5 其它
《前端面试中常见的算法问题读后整理》
《常见数据结构 (一)- 栈, 队列, 堆, 哈希表》
《常见数据结构 (二)- 树 (二叉树，红黑树，B 树)》
《算法学习笔记》
《javascript array js 缓存算法、数组随机抽取、字母串转数字，数字转字符串》
《JavaScript 算法练习》
6.2 JavaScript跨域
** 由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（来源）**
《前端跨域问题及解决方案》
《直白的话告诉你在 javascript 中如何用 jsonp 实现跨域请求》
《前端 Ajax 跨域请求方案沙里淘金》
《你所不知道的跨域资源共享(CORS)》
《带你一步一步的理解前端跨域的原理及实践》
《HTML5 跨域通信 API - window.postMessage》
《前端跨域整理》
《跨域问题，解决之道》
6.3 JavaScript设计模式
为什么要学习设计模式？ 做事情之前问个为什么总是好的。关于设计模式的好坏，我在知乎上也看过一些讨论，有知友对其提出过一些疑问，里面有一些关于设计模式的观点：
- 设计模式有何不妥，所谓的荼毒体现在哪？
- 设计模式是不是有点太玄了？
任何事物的出现都有其道理，任何语言都有其不足之处，设计模式是对语言不足的补充（Peter Norvig)。设计模式也是编程经验的总结，我想学习它对像我这样的前端新手的能力会有很大的提升。
细说说它的好处：
- 设计模式能让你用更少的词汇做更充分的沟通；
- 谈话在模式层次时，不会被压低到对象和类这种琐碎的事情上；
- 懂设计模式的团队，彼此之间对于设计的看法不容易产生误解；
- 共享词汇能帮助初级人员快速成长。
《学习设计模式前需要知道的事情》
《常用的 JavaScript 设计模式》
《JavaScript 设计模式》读后感觉很复杂
《JavaScript 设计模式》
《听飞狐聊 JavaScript 设计模式系列 13》
6.4 JavaScript函数式编程
什么是函数式编程？
- 与面向对象编程（Object-oriented programming）和过程式编程（Procedural programming）并列的编程范式。
- 最主要的特征是，函数是第一等公民。
- 强调将计算过程分解成可复用的函数，典型例子就是map方法和reduce方法组合而成 MapReduce 算法。
- 只有纯的、没有副作用的函数，才是合格的函数。
《函数式编程入门教程》
《想学函数式编程？》
《给 JavaScript 开发者讲讲函数式编程》
《前端基础进阶（七）：函数与函数式编程》
《『翻译』JavaScript 函数式编程》
《JavaScript 函数式编程》
6.5 JavaScript高阶函数
具体来说，在 JavaScript 中，我们可以将一个函数 A 作为参数传给另一个函数 B，或者，在函数 B 中将函数 A 作为返回值返回。那么这里的函数 B 就是上面所说的高阶函数。 在《javascript设计模式和开发实践》中是这样定义的。 函数可以作为参数被传递； 函数可以作为返回值输出。
《javascript 高阶函数介绍》
《程序媛学 JS 小记一笔——高阶函数》
《高阶函数对系统的 “提纯”》
《JavaScript 之闭包与高阶函数（一）》
6.6 JavaScript性能优化
天下武功，无坚不摧，唯快不破。
Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下,开发过程中零零散散地接触到许多提高代码性能的方法，整理一下平时比较常见并且容易规避的问题。
《吹毛求疵的追求优雅高性能JavaScript》
《天生就慢的 DOM 如何优化？》
《Javascript 高性能动画与页面渲染》
《一个关于 js 线程和性能优化的文档，有例子哦！》
《合理使用 IIFE 优化 JS 引擎的性能》
《高性能 JavaScript》读书笔记
6.7 JavaScript 柯里化
就像最早听到斐波拉切数列一样，第一次听到柯里化我也是懵逼的
柯里化又称部分求值，字面意思就是不会立刻求值，而是到了需要的时候再去求值。如果看的懵逼，没事，看完整篇文章再回过头来看这里你就会豁然开朗。 反柯里化的作用是，当我们调用某个方法，不用考虑这个对象在被设计时，是否拥有这个方法，只要这个方法适用于它，我们就可以对这个对象使用它。
《前端高手必备：详解 JavaScript 柯里化》
《简单理解JavaScript中的柯里化和反柯里化》
《浅谈函数式编程柯里化的魔法》
《从一道面试题谈谈函数柯里化 (Currying)》
《掌握 JavaScript 函数的柯里化》
6.8 JavaScript调试
如今 Chrome 浏览器无疑是最受前端青睐的工具，原因除了界面简洁、大量的应用插件，良好的代码规范支持、强大的 V8 解释器之外，还因为 Chrome 开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开 Chrome，是否熟练掌握 Chrome 调试技巧恐怕也会成为考量前端技术水平的标杆。 介绍 Chrome 调试技巧的文章很多，本文结合我自己的开发经验，希望从实际运用的角度为大家再一次谈一谈这些功能，也希望对大家都有所帮助和启发。 在chrome的开发者工具中，通过断点调试，我们能够非常方便的一步一步的观察JavaScript的执行过程，直观感知函数调用栈，作用域链，变量对象，闭包，this等关键信息的变化。因此，断点调试对于快速定位代码错误，快速了解代码的执行过程有着非常重要的作用，这也是我们前端开发者必不可少的一个高级技能。
《前端高手必备技能：如何在 chrome 开发者工具中观察函数调用栈、作用域链与闭包》
《比 console.log 更多－chrome 调试命令》
《JavaScript30 中文指南 - 09 Console 调试技巧指南》
《聊一聊移动端调试那些事》
《前端 chrome 浏览器调试总结》
《我的职业是前端工程师【五】: 前端工程师必会的六个调试技能》
《九个 Console 命令，让 js 调试更简单》
《再谈 Chrome 实用调试技巧》
《调试 CSS 的方法》
《前端调试效率低？试试这 10 个 Chrome 开发者工具 使用技巧》
《前端开发中的 JS 调试技巧》
6.9 前端安全
天下武功，唯快不破。算法越快，越容易破。
《如何让前端更安全？——XSS 攻击和防御详解》
《HTTPS 互联网世界的安全基础》
《关于 Web 安全，99% 的网站都忽略了这些》
《Web 前端慢加密》
6.10 技巧和效率
技巧恰似黑魔法，效率堪比加速器，都是开发过程中不可或缺的一部分，善用技巧，提高效率。
高手之所以高，很大一部分在于技巧巧妙，效率高，让人自愧不如，所以成了我们眼中的高手，其实高手也是从菜鸟过来的，由于长期的学习和经验的积累，再加上善于总结，自然一步步成长成为高手，为了加速自己成为高手，我们可以向高手取经，学习他们分享的一些技巧和解决问题思维方式。
《34 个实用的 webAPP 开发技巧分享，值得收藏》
《不造个轮子，你还真以为你会写代码了？ | 掘金技术征文》
《【译】帮助你更快学习 JavaScript 的六个思维技巧》
《提升效率黑科技》
《【译】六个漂亮的 ES6 技巧》
《【译】45种 Javascript 技巧大全》
《程序员应该掌握的 10 个搜索技巧》
《你必须『收藏』的Github技巧》
《老司机教你更好的进行 CSS 编程 70 个技巧》
《聊一聊这些常见而且实用的 css 技巧》
七、JavaScript框架篇
青，取之于蓝而青于蓝；冰水为之而寒于水。
jQuery:一年没写链式JQ了，在这个人手一个MVVM框架的年代，JQuery就不做推荐，想要了解可以自行学习。
vue.js react.js,angularjs···此处省略一万篇文章和略干文字。
关于框架的学习，最好多看看官方文档，多多实践，我这里就不多做介绍了，框架太多，我用的也不多，这里也就不献丑推荐什么的，自己对框架也一知半解，没有深入去研究底层的实现，仅仅停留在够用就行没去深究的层面，大家想学什么框架可以自己去搜索相关资料和教程。
八、HTTP和HTTPS篇（待续，下一步学习中）
九、前端工程化篇
解放双手，成就你的梦想。
十、全栈篇之Node.js（待续，正在学习中nodejs）
十一、面试篇
11.1 简历模板
简历好比人的一张脸，不能丑了别人，爽了自己。
对于开发者与设计师们，一封好的的简历会让自己的面试增色不少。本次分享的简历简介精致，而且样式多种多样。包含 INDD、IDML、PDF、PSD、DOCX 等格式，方便自由修改和学习。
《Talk is cheap, show me the code - 用 github 数据辅助你完善简历》
《27 款优质简洁的个人简历打包下载》
《10+ 优秀简洁的个人简历下载（五）》
《15 款优质实用简洁的个人简历模板打包下载 （一）》
《5 款精致简洁求职简历》
11.2 面试题
任凭风吹雨打，胜似闲庭信步。
首先我希望表达的一点，就是面试的评判跟学校里的考试完全是两回事，太多的人把面试当做考试而把注意力放在题目上。 事实上面试中未必是所有题目全都回答"正确"就一定会通过或者较高评价。面试是面试官和面试者双方"挖掘与展示才能"的过程，参考前面提到的面试过程，全部回答正确的情况很可能是因为面试官不感兴趣懒得追问。 对于面试官而言，基本评判原则就是"我要不要这个人做我的同事？"，多数情况下，这个答案会非常清楚。一些题目是充分的，也就是"回答对了说明这个人具有可以依靠的才能"，一些题目则是必要的，也就是"回答错了说明这个人无法胜任我们的工作"。
《最近遇到的前端面试题》
《大厂前端面试题汇总》
《前端面试集合》
《前端面试题精选》
《一道 JS 面试题所引发的 "血案"，透过现象寻本质，再从本质看现象》
11.3 面试技巧、经验与感悟
他山之石，可以攻玉。
经验犹如一所大学校，它能使你认识到自己是个什么样的傻瓜。
人生就是不断的推销自己，不停的面试，狭义的面试我们认为就是工作上的面试，而广义的面试就是做人的面试，到处就是展示推销自己。看看别人面试心得，取经一下，避免别人已经犯过的错误，也是一种进步。
《面试感悟：一名 3 年工作经验的程序员应该具备的技能》
《我的 web 前端面试经历 - 百度》
《1月前端面试记》
《关于前端面试》
《迟来的面试总结》
十二、资源汇总
积土成山,风雨兴焉;积水成渊,蛟龙生焉。
善于积累，善于总结，也是学习的一门功课，积累是一个循序渐进的过程，搜集总结同时也是一个费时费力的过程，看看别人的积累和总结，不禁感叹于别人的知识面和认真的态度，自己会觉得有压力从而产生动力，此时的自己会不会蠢蠢欲动，给自己所学所看来一个强势的总结呢？
《也许是史上最全的前端资源大汇总》
《JavaScript 开发者必备的资源合集》
《前端知识点大百科全书》
《100+ 超全的 web 开发工具和资源整理》
《Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集》
《GitHub 上最全的前端入门资源汇总 快速入门前端》
《前端教程 & 开发模块化 / 规范化 / 工程化 / 优化 & 工具 / 调试 & 值得关注的博客 / Git & 面试 - 资源汇总》
《送给前端的你，推荐几篇前端汇总文章。 - 学习编程 - 知乎专栏》
《前端学习资源汇总——前端收藏夹》
《最全前端资源汇集》
十三、插件
插件是我们开发时候的左膀右臂。
平时自己写插件主要有下面几个问题：
（1）开发插件需要时间，可能拖延项目工期，如果工期紧急不建议选用这种方式
（2）自己造的轮子未必有现有轮子的好用，要考虑到队友是否适用
（3）需要比较高的开发水平
这里搜集一些常用的插件供大家参考使用。
十四、工具篇
工欲善其事，必先利其器。
张三和李四都要上山砍柴，但他们的斧头都有点钝了，张三没有理会，拿着斧头就上山了，因为他的斧头不利，砍的都是比较细的树柴……李四就不同了，他拿来磨刀石，用劲地把斧头先磨好，虽然他比张三慢了起步，但是他的准备工夫做到家了，砍柴砍得很快。到太阳下山了，张三只背了小小的一捆柴下来，但是李四，背着一大捆的柴下来…… 由此可见，准备工夫做好了，可以事半功倍！
《超全面 + 最流行的「前端速查表」高清版大全》
《成为专业程序员路上用到的各种优秀资料、神器及框架》
《前端切图神器 avocode》
《2015 年末必备前端工具集》
《【译】2016 年我最喜欢的前端工》
《前端新手可以浏览的网站》
《收集非常好用的 Mac 应用程序、软件以及工具，主要面向开发者和设计师。》
《工具武装的前端开发工程师》
《一个前端程序猿的 Sublime Text3 的自我修养》
《前端工程师的工具包》
十五、鸣谢
- 感谢党和国家
- 感谢美利坚创造了互联网
- 感谢掘金这个在线同性交友的场所
- 感谢掘金CEO以及工作人员创造了这个平台
- 感谢创作和分享的广大同行码农提供了本文原始素材
- 感谢各位大神愿意含辛茹苦的花时间观看鄙人这篇随便拼凑的文章
- 最后也厚颜无耻的感谢自己能静下心整理一篇文章和大家一起分享交流进步
十六、广告
本文分享首发【掘金】，同时收录在【我的GitHub博客】，觉得本文写的不算烂的，可以点击【我的GitHub博客】顺便登录一下账号给个星星✨鼓励一下，关注最新更新动态，大家一起多交流学习，欢迎随意转载交流，不要钱，文末有福利哦?，你懂的?。
登高自卑，与君共勉。
十七、福利
文武之道，一张一弛，要劳逸结合，是不是？
老司机镇楼，投币上车。骚年，看了这么多这么累，是不是该撸一发呢?，我好想射点什么，先撸一盘LOL去了，哈哈，大家别想歪了。
待续的今后继续更新完善。
BI前端展示工具
1 参评工具
参评的工具包括：MSTR、BO、Cognos、Brio、SAS、CA
2 选择说明
对于本次选择的六类产品，除CA的BI产品外，其他五类都是在BI业界非常出名的公司的产品，从互联网上各类搜索引擎的搜索结果既可以看出。
其中：
² MSTR：全称MicroStrategy为正在开发的电信经营分析系统，以下简称MSTR。评估数据来源于开发的经验和同系统支撑商的交流；
² BO：为交流演示后，重点关注的产品，在中国有很好的市场。评估数据来源于同系统提供商的交流和互联网；
² Cognos：应用于本人实施过的电信经营分析系统，评估数据来源于本人系统研发、实施经验；
² Brio：应用于某电信经营分析系统，评估来源于本人对相关实施系统（电信领域）的调研、同维护人员的交流以及互联网；
² SAS：属于在统计分析、数据挖掘方面全球一流的SAS公司的产品。评估数据来源于互联网；
² CA：应用于某电信经营分析系统。评估数据来源于对系统的调研和互联网。
3 BI公司介绍
2003年3月，Cognos公司并购软件公司Adaytum，7月17日Business Objects 并购Crystal, 7月24日，Hyperion并购Brio，世界的BI市场正在掀起并购风。
4 产品介绍
参与评估产品的介绍
1.1. MicroStrategy公司产品
1、公司简介
MicroStrategy公司由Michael J. Saylor创建于1989年，最初主要是作为一家决策支持领域的咨询公司，随后发展过程中，在1993年推出了第一个产品包：MicroStrategyAgent，随后相继推出一系列产品：MicroStrategy Web、MicroStrategy Broadcaster、MicroStrategy Telecaster等，现最新产品包称之为MicroStrategy 7，致力于提供面向个性化的电子商务智能解决方案。
2、产品介绍
MicroStrategy Intelligence Server——整个产品中核心产品，多层体系结构下的中间应用服务器，为各种前端应用提供中间应用层能力。
MicroStrategy Web——Web体系下的应用服务器，提供基于Web体系下的查询、电算表格和多维分析能力。
MicroStrategy Agent——数据挖掘、应用开发工具，提供API接口。
MicroStrategy InfoCenter——企业级报表，门户工具。
MicroStrategy Architect——商业对象抽象层设计工具。
MicroStrategy Desktop——MicroStrategy Agent、MicroStrategy Architect和MicroStrategy Administration Utility的集成化应用环境
1.2. BO产品介绍
桌面产品包括:
BusinessObjects Explorer Reporter 查看、刷新、计划、分发和打印全客户文档，创建新查询和文档，OLAP 的旋转和切片以及钻取功能。
Designer 允许universe 设计者创建、管理和分发universes. universe 用日常商业商业术语代表数据结构，属于语义层
Supervisor 允许管理员进行权限管理
BusinessQuery Excel 加载项，使用 BusinessObjects universe, 支持关系型和多维数据库(OLAP)
BusinessMiner 发现并处理数据中的隐含关系
企业级服务器产品包括:
Infoview
WebIntelligence (Reporter 和Explorer) 是 BusinessObjects 基于WEB的决策支持系统。
Broadcast Agent 制定自动发布文档的定时机制。
1.3. Cognos的产品简介
Cognos公司的产品是由一系列的功能模块组合而成的套件，包括如下一些模块：
Powerplay Enterprise Server——是PowerPlay企业级的服务器。由应用服务器和Web 服务器组成。可在Internet、广域网和局域网上发布Cubes并作为在线分析运行平台。
Impromptu Web Report —— WEB界面的报表制作和发布的专业平台。
Scenario —— 系统提供的ETL工具。
4Thought—— 建模与预测模块，采用神经网络技术。
Impromptu—— 是企业级、交互式数据库查询和报表生成工具，提供查询、报表功能，针对关系型数据。
Powerplay—— 提供OLAP分析功能，针对多维数据PowerCube（Cognos的多维数据结构）。在Powerplay中可以钻取到Impromptu中。这是Cognos公司的集成平台。
Transformer——是一个OLAP服务器。主要用来创建模型，帮助你组织数据，将不同数据源的数据整合到PowerCube当中，形成多维数据源。
Cognos Upfont —— 网络集成的门户
Upfont Access —— 负责权限的设置与验证
1.4. Brio 产品介绍
美国Brio Technology是一家纳斯达克上市公司，其集中精力于OLAP的前端展示，不提供OLAP的数据整理和重组功能，没有OLAP分析引擎。
主要产品：
Client/Server方式的客户端
BrioQuery Designer TM ——（供开发人员、数据库管理员和系统管理员使用）查询、分析及报表制作，具有数据库管理功能、安全性、审计和共享库设置
BrioQuery Explorer TM ——（供高级用户使用）查询、分析及报表制作，直接访问数据库表和共享库
BrioQuery Navigator TM ——（供需要业务即时信息的分析人员使用）查询、分析及报表制作，访问共享库中预先定义好的数据模型和报表
Web方式的客户端
Brio.Insight TM —— 基于Web 浏览器的查询、分析及报表。根据报表信息和用户的属性而设定不同层次的报表分析功能（供活跃的分析人员和报表用户使用）。
Brio.Quickview TM —— 基于 Web 浏览器的报表查看和数据视图更新（供报表查阅者使用）。
Brio.Enterprise的服务器产品
OnDemand 服务器 —— Web 应用服务器，用户可通过Web进行查询，实现客户端零管理，提供报表级安全性及独特的可适应性报表技术
Broadcast 服务器 —— 广播服务器，可按预定时间表进行自动查询处理，通过电子邮件、网络、打印机及 Web发送报表，其执行情况可通过电子邮件反馈给用户
1.5. CA公司产品
CA也提供非常齐全的产品线：
CleverPathTM Predictive Analysis Server 数据挖掘工具
CleverPathTM OLAP OLAP分析的应用工具，是一个包括C/S和B/S网页的
CleverPathTM Forest & Trees 提供查询处理功能
CleverPathTM Aion Business Rules Expert数据组织及元数据管理
CleverPathTM Reporter C/A结构下的报表制作工具
CleverPathTM Portal 定时调度工具
CleverPathTM Enterprise Content Manager 信息分发共享工具
5 产品对比
|
项目 |
MSTR |
BO |
Brio |
Cognos |
|
|
产品功能 |
|||||
|
独立的应用服务层 |
基于组件的应用服务器Intelligence Server，功能强大，附属工具丰富 |
应用服务器为WebIntelligence 负责数据的交互，功能较简单，性能依赖于OLAP的性能 |
Brio.Enterprise OnDemand 负责数据的交互，功能较简单，性能依赖于OLAP的性能 |
PowerPlay Enterprise server 负责数据的交互，提供基础的服务器调优和负载平衡的调整，监控能力较弱 |
|
|
安装难易程度 |
客户端无任何安装； 服务端的安装全程自动化，没有专用的设置参数的输入，较容易安装。 |
安装前需要改区域设置和本地安全策略，容易安装失败，并且不支持 |
同COGNOS类似 |
安装需要经过指导，安装后的配置较烦琐，容易安装失败 |
|
|
兼容性 |
Microstrategy不能连接第三方的OlapServer （它有自己的Rolap） 生成的分析模型数据也不能被第三方工具共享，只能自己使用 |
BO5中文版不能在B/S方式下对Essbase进行自由钻取 |
brio 同震荡波补丁冲突（KB835732） 出现Shift重复字符 |
Cognos连接ESSBASE在UNIX下有版本限制，6.2以后的就不行了 Cognos不支持复合数据，不支持“多对多”关联 |
|
|
纯Web架构 |
是纯WEB架构 不过最近为了加强报表的制作，添加pdf显示功能 |
不是，需要下载OCX插件， 报表样式不丰富 QuickView：不能与数据库交互，类似离线分析，客户端需要下载插件。 Insight：能够与数据库进行交互，Server端为Ondemand Server，客户端需要下载插件。 |
不是，需要下载OCX插件， 报表样式不丰富 |
OLAP部分是，报表部分需要PDF插件。 现在新推出的ReportNe可以通过纯WEB方式来制作类似水晶报表一样的复杂格式报表，这样就形成全套的WEB解决方案 |
|
|
数据容量 |
100G以上 |
单个数据模型60～70G（ESSBASE） |
单个数据模型60～70G（ESSBASE） |
10G以下 |
|
|
应用平台的支持 |
操作系统：WIN2000SERVER; WIN2003SERVER; UNIX； 数据库系统：主流的RDBMS |
同MSTR |
同MSTR |
同MSTR |
|
|
能否钻透到详单级 |
可以， 由于时基于ROLAP架构的数据分析，在模型设计上就能直接支持详单的钻透，实现方便。但也要受到系统查询速度的限制。 直接在工具中创建查询列表对象，并且对象可以是详单也可以是有数据关联的表，实现起来较方便。 |
BO的基于桌面 的cube方式先天地受到cube中包含的数据量和在有限的数据集上进行的分析的限制。 在用户的钻取操作发生后并没有提供相应的数据限制，因此在查询详单时，数据承爆炸式的增长。 |
需要二次开发才能做到统计报表向详单的钻透，工作量较大。 |
可以，但是详单的显示数据量较小（10条左右），并且需要转到PDF格式。 |
|
|
大数据量解决方案 |
特有的ROLAP引擎，针对1G以上数据模型有专项优化，支持100GB以上的数据模型分析 支持到TB级的数据分析，对大数据量的SQL提供优化。 技术人员可以通过调整VLDB属性进一步优化 |
根据OLAP服务器的性能决定，搭配essbass时支持10G左右数据模型，无OLAP服务器时，显示效率较低。 |
根据OLAP服务器的性能决定，搭配essbass时支持10G左右数据模型 |
对大数据量的模型无法支持，最高数据量为3GB左右 |
|
|
产品线的完整程度 |
缺乏ETL和数据挖掘工具 |
缺乏数据挖掘工具，ETL工具刚开发完毕，未投入使用 |
缺乏ETL和数据挖掘工具， |
拥有全部的BI产品线，功能较丰富 |
|
|
产品集成情况 |
集成度高，提供集成的数据连接、模型制作、报表发布、权限管理的界面。 |
集成度中等，web功能同传统C/S模式差距较大 |
集成度中等，web功能同传统C/S模式差距较大 |
集成度低，每种应用都对应单独的使用界面 |
|
|
信息分发 |
信息分发由Narrowcast组件完成，功能强大，可发手机短信、邮件、传真，可以包含声音文件，需另外购买 报表分发需要二次开发 MicroStrategy Narrowcast组件可以实现信息的主动分发，将信息分发到邮件、手机、传真等平台； 内部支持报表订阅机制，用户主动订阅报表信息； 内部不支持报表发送，需要二次开发实现。 |
报表的分发的实现较为方便 也有消息分发的组件 |
有报表分发功能 有发邮件的接口 |
有报表分发功能 有发邮件的接口 |
|
|
SDK开放程度 |
开放程度很高，提供全面的sdk开发包， |
较少，功能封装在OCX中，支持纬度参数的输入等二次开发函数，尤其不提供权限接口，提供数据更新、启动服务等简单操作的命令行模式 |
有，但较少，功能封装在OCX中，支持纬度参数的输入等二次开发函数，提供数据更新、启动服务等简单操作的命令行模式 |
极少，许多功能二次开发无法实现，但提供初步的用户功能权限操作的函数，提供数据更新、启动服务等简单操作的命令行模式 所提供的web API非常有限，而且没有真正的web客户化能力，也不能嵌入到现有应用系统中。 |
|
|
易于二次开发整合 |
工作量较大，但理论上可以重新开发除了服务器和部分功能权限外的任何功能。 开发量主要集中于基本功能的应用上 |
开发量主要集中于界面的美观程度 |
开发量主要集中于界面的美观程度 |
开发量主要集中于界面的美观程度 |
|
|
多数据源的支持 |
支持多种类型的数据源。但在一个项目中只能使用一个数据源 |
BUSINESSOBJECTS 允许在同一报表中合并来自不同源的数据。比如单个excle表，支持混合显示，较强大（C/S下支持） |
部分支持（模型中只支持单一数据源） |
部分支持（模型中只支持单一数据源） |
|
|
模型快速开发（前提是经过培训并有经验） |
有相应的快速开发模板，不过数量较少 |
有丰富的快速开发参考模型，实现一般性的需求较容易 |
有丰富的开发参考模型，但模型的开发和发布工作量大 |
有较丰富的快速开发参考模型 |
|
|
快速用户新建报表的能力 |
最终用户完全可以通过web界面新建自己需要的报表。同样在Desktop中新建的报表无需任何设置就可以在前台使用。 可以按照模版创建新的报表，在现有报表上创建适合用户自己的新报表。 |
由于有获得了专利的“语义层”， 用户可以快捷地写出功能强大的财务、销售和其他含有表格、图表、超级连接和图像的报表。 |
可以制作基于分析的报表 |
可以在分析的基础上添加表头构成报表，B/S下可对分析结果作为报表保存。 |
|
|
良好的权限机制，易于整合、同步 |
提供完善的权限机制，分功能权限和数据权限，权限的二次集成度高，但开发量也大 |
提供完善的权限机制，分功能权限和数据权限，但只提供简单的用户权限操作的二次集成能力 |
提供完善的权限机制，分功能权限和数据权限， |
权限的二次开发量很小，但只能实现用户管理和单一度量数据过滤功能（实现功能同BO和Brio一样，但工作量小） |
|
|
支持的数据库和OLAP |
主流数据库 只使用自己的OLAP服务器 |
主流数据库和主流OLAP服务器（不支持cognos和MSTR） |
主流数据库和主流OLAP服务器（不支持cognos和MSTR） |
主流数据库和主流OLAP服务器 |
|
|
元数据管理 |
具有统一的元数据库。元数据通过Desktop集成界面进行管理，可以方便的实现元数据的迁移、复制等工作。 |
有元数据库存用户信息，但必须在C/S模式下制作unv文件和rep报表文件实现，在web方式下保存为wqy则可以编辑，但功能弱。 |
采用文件（bqi）方式，不易管理 |
采用文件方式，不易管理 |
|
|
操作易用性 |
报表展现方便，但OLAP操作感较差 |
由于采用OCX的插件方式，OLAP的显示方式较象excel，操作较直观，给用户的初次印象较好，但报表感较差 单一界面可以满足查询、报表和分析；通 INFOVIEW BI 接口单一进入点，BUSINESSOBJECTS 还让用户快速、简单地存取报表。 |
同BO相同 |
OLAP功能很强大，操作反应速度也是最快的，然而初次上手较难， WEB页面访问条件查询报表时操作不便。 |
|
|
旋转、切片、钻取操作 |
提供旋转、切片、钻取、自定义小计等OLAP分析。
|
都支持 |
都支持 |
都支持，WEB方式下分析功能最强大，但用户较难接受，使用熟练后可做的分析很多，支持任意角度的分析操作。 |
|
|
Web端的功能 |
分析结果就是一个初步的报表，根据SDK框架生成HTML（内嵌javascipt ），实现相关的旋转、钻取等操作，功能基本与c/s结构操作起来相当（速度较慢） |
分析和报表制作功能WEB下明显弱于C/S模式 |
同BO |
分析功能同C/S模式相当，但报表制作功能WEB下明显弱于C/S模式 |
|
|
定时更新报表数据 |
提供定时更新的工具，也提供SDK函数控制更新 提供调度机制。可以按照灵活的时间设置或者事件触发报表刷新数据。 在调度的基础上，可以实现用户订阅的功能。将用户感兴趣的内容定期发送到用户的个人报表文件夹中。 |
命令行方式更新（用第三方调度程序调度） |
命令行方式更新 |
提供定时更新的工具，也有相应的命令行程序更新 |
|
|
多种文件导出格式 |
常用的格式都支持 |
同MSTR |
同MSTR |
同MSTR |
|
|
报表展示的形式 |
支持列表、交叉表、图表（90多种） |
图表样式较少 |
图表样式较少 |
图表样式较少，OLAP模式不能制作列表 |
|
|
多文档界面的支持 |
支持多文档的同时显示，提供灵活的制作界面，可以制作真正的带分析说明的综合报表，只是对文档的制作人有一定的要求 |
多文档的制作非常方便和快捷，不过不能添加文字描述 |
图表混合需要二次开发，提供专用的编辑器 |
OLAP方式不提供（7.X不清楚） 只支持表格同图表的同步显示 ReportNet支持多文档报表 |
|
|
灵活的查询参数设置 |
通过使用提示(Prompt) 可以让用户输入不同的查询条件，可以灵活在已有的报表中增加实体，筛选 承诺在8.0加入直接构造的入口以提高查询的效率和灵活性。 参数设置较为烦琐，属于条件过滤性质，查询界面也非常不友好，这方面是需要重要的提高方面。 |
在新的6.x版本下查询时可构造较复杂的SQL语句，并且能包含动态的查询函数，但6.x还未推出中文版 |
查询通过设置传入参数的方式的到相应的结果，brio提供专用的开发界面 |
只能进行简单条件的过滤，无法进行web页面的复杂查询 |
|
|
报表Web界面的用户订制 |
界面操作较烦琐，虽然声称通过web页面的拖拉拽方式生成报表，但仍然不太好用。 |
不支持，只能通过OCX组件生成分析结果报表，生成方式较简单 灵活格式的正式报表报表必须由熟悉数据库知识的人设计，在C/S下制作。 |
同BO 所有Brio 报表必须由熟悉数据库知识的人设计。 |
在分析状态下只能生成分析结果报表，可以选择PDF和纯WEB表格两种模式。 报表的WEB制作必须切换到REPORTNET系统下定制。 |
|
|
计算列功能强大易用，丰富的统计函数 |
提供很强大的统计运算函数功能，可以用拖拉拽的方式新建计算列，也可以用写公式的方式新建计算列。用户可以开发自定义的统计函数 |
同Cognos类似 |
同Cognos类似 |
计算函数也很丰富，提供一百多个计算函数，C/S下提供拖拉拽的方式新建计算列，也可以写公式 |
|
|
根据条件进行数据凸现，比如红色代表异常数据 |
功能完善，支持异常数据自定义阀值和颜色的显示，可以以各种方式包括小图片来显示异常数据 |
一般只能针对异常数据的值进行文字显示格式的改变来达到突出显示的目的，在WEB方式下能通过二次开发设置异常数据的阀值，工作量较大 |
同BO类似 |
同BO类似，在WEB方式下不能设置异常数据的阀值 |
|
|
个性化定制 |
按虚拟的目录结构创建个人文件夹，文件夹的权限设置在BI展示工具中是最强大的：个人文件夹中的内容其他任何用户包括管理员都无法浏览。 但相应的权限操作函数公开的不完整，使得二次开发受到一些限制，并且开发量也较大。 |
处理模式同cognos类似 |
处理模式同cognos类似 |
有个人的工作空间，但是个人拥有的报表是复制的一个单独文件拷贝，维护较麻烦，不易维护。 |
|
|
是否提供建模工具（是否包含OLAP服务器） |
提供Architect作为建模工具（该工具已集成到管理和报表制作工具DESKTOP中），另外在应用服务器Intelligence Server中可以提供智能立方体，提高复杂的OLAP分析操作的效率。 不过实体（制定处理逻辑的数据纬度）会生成很多，提升了管理的难度。 |
不提供，需要单独购买OLAP |
同BO |
提供Transform作为建模和生成可分析立方体的工具，OLAP服务器为Enterprise server，制作的立方体效率很高，分析立方体的数据经过压缩，容量为同条件下的ESSBASE的4～20分之一 |
|
|
|
|
|
|
|
|
|
产品性能 |
|||||
|
报表刷新的速度 |
提供报表缓存机制以提升效率。 有缓存时访问速度在1分钟以内；无缓存时，在SQL查询时间基础上增加10～30秒（WEB处理和显示时间） |
15秒～2分钟内 |
15秒～2分钟内 |
6～60秒（10万条数据以内） |
|
|
负载平衡 |
支持多种层面的负载平衡，有Intelligence Server服务和Broad Cast的分布式负载平衡，并且提供相应的优化工具（另外付费），支持大量并发用户请求，并发数的处理效率很高高。 |
同Cognos类似 |
同Cognos类似 |
提供应用服务器的负载均衡，功能较弱 |
|
|
多处理器优化 |
支持 |
支持 |
支持 |
支持 |
|
|
OLAP分析的速度（10万条数据运算以内） |
提供报表缓存机制以提升效率。 有缓存时访问速度在1分钟以内；无缓存时，在SQL查询时间基础上增加10～30秒（WEB处理和显示时间） |
15秒～2分钟内 |
15秒～2分钟内 |
6～60秒 |
|
|
多用户并发访问的支持能力 |
单CPU可以支持50个并发操作用户 |
单CPU最多支持25个并发操作用户(64位Unix环境) |
单CPU支持5-15个并发操作用户 |
单CPU最多支持20个并发操作用户 |
|
|
整个系统可维护性 |
元数据、权限集中管理。较容易管理维护，但新的实体的制作需要专门人员 |
|
对于报表和模型的修改需要由专人进行，界面有点象SQLPlus等开发工具 相对cognos只是权限和源数据连接及报表制作集成，但数据处理过程相似，因此也有cognos的弊端 |
由于涉及到多种工具，对初学者来说维护较难入手，维护的流程制定也很烦琐，模型为文件方式，较难管理 |
|
|
对硬件的要求 |
单CPU支持50并发， 对内存的要求较低，1GMemory |
1G |
1G |
6.6以前的版本，内存越高越好，起码1G，6.61以后则1G以上 |
|
|
|
|
|
|
|
|
|
服务与支持 |
|||||
|
解决问题的时效性 |
解决方案较少，时效性较高，问题都能及时的解决，相关的管理层很重视，配合的工程师也很主动，解答问题很热心 |
BO的金牌代理有6家，对产品的支持程度参差不齐，我所联系的一家公司，人员的技术支持不够及时，厂家声称产品销售时，会有售前工程师来交流，但不提供售后的人员技术支持，打电话联系经常找不到人。 优点：由于进入国内时间较长，解决方案的积累较多 |
时效性一般，大多都是二次开发问题，需要多看帮助，不过提供不少解决问题的方案 网上有专用的论坛 |
时效性较高，问题都能及时的解决，售后工程师很热情，解答问题也很热心 数据仓库之路的专题论坛的支持程度较好 |
|
|
解决问题能力的评价 |
能够提供开发和实施的强力支持，但经验不足，有做很多探索工作 |
不少情况下需要通过网络上的论坛解决问题 |
同IBM联手，解决问题的能力有保障，不过本身的权限方面有不可克服的弱点 |
二次开发的余地较小，但问题基本上都能解决， |
|
|
支持与培训 |
对于合作伙伴提供免费的培训和支持 |
对于合作商提供初级培训，高级培训5天收费14500/人 |
一般作为IBM实施套件之一，IBM和Brio都可以提供支持，现场解决问题收费 |
对于合作伙伴提供免费的培训和电话支持，一年内免费上门解决问题一次，提供最终客户5个名额为期5天的免费培训， |
|
|
难解决的问题 |
|||||
|
|
权限控制很严，而权限接口未完整提供，有些基于权限的开发难以达到。 |
内核只是用单字节编译，中文版智能通过汉化，这样会在读数据、Web页面提交等情况下出现小的问题。 |
6．6 版：左拉窗口的后门；左上角的EIS能显示所有的窗口 8.0 版：如果在EIS的控件上加入了编程方法,比如你一个下挡框里面有程序代码,那当你在WEB方式访问报表时每触发一个事件,这个报表的WEB页面都会自动刷新一下,这个是Brio8web方式(瘦客户端)我觉得最大的缺陷,因为Brio并没有把这些代码转为HTML的javascript而是使用web表单提交的方式解决,真的好烂。 WEB方式不能提供打印功能 安全方面较差，会泄漏分析的数据内容 |
无法支持大数据量
|
|
支持博主
关于邵珠庆博客
文章标签
记事邵珠庆博客
最近文章
最近评论
- 发表在《中国翻墙网民状况调查》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
博客日历
| 一 | 二 | 三 | 四 | 五 | 六 | 日 |
|---|---|---|---|---|---|---|
| « 8月 | ||||||
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |
目录分类
文章归档
- 2022年8月 (2)
- 2022年7月 (1)
- 2022年3月 (1)
- 2021年10月 (3)
- 2021年1月 (1)
- 2020年4月 (3)
- 2020年3月 (3)
- 2020年2月 (2)
- 2020年1月 (3)
- 2019年12月 (2)
- 2019年11月 (3)
- 2019年10月 (2)
- 2019年9月 (2)
- 2019年8月 (4)
- 2019年7月 (2)
- 2019年6月 (2)
- 2019年5月 (2)
- 2019年4月 (3)
- 2019年3月 (2)
- 2019年2月 (3)
- 2019年1月 (2)
- 2018年12月 (2)
- 2018年11月 (2)
- 2018年10月 (3)
- 2018年9月 (2)
- 2018年8月 (2)
- 2018年7月 (1)
- 2018年6月 (2)
- 2018年5月 (3)
- 2018年4月 (2)
- 2018年3月 (6)
- 2018年2月 (7)
- 2018年1月 (3)
- 2017年11月 (2)
- 2017年10月 (2)
- 2017年9月 (5)
- 2017年8月 (4)
- 2017年7月 (8)
- 2017年6月 (5)
- 2017年5月 (14)
- 2017年4月 (8)
- 2017年3月 (5)
- 2017年2月 (2)
- 2017年1月 (1)
- 2016年12月 (1)
- 2016年11月 (5)
- 2016年10月 (3)
- 2016年9月 (2)
- 2016年8月 (1)
- 2016年7月 (2)
- 2016年6月 (2)
- 2016年5月 (5)
- 2016年4月 (5)
- 2016年3月 (2)
- 2016年2月 (1)
- 2016年1月 (2)
- 2015年12月 (2)
- 2015年11月 (1)
- 2015年10月 (3)
- 2015年9月 (2)
- 2015年8月 (4)
- 2015年7月 (5)
- 2015年6月 (6)
- 2015年5月 (3)
- 2015年4月 (8)
- 2015年3月 (6)
- 2015年2月 (4)
- 2015年1月 (5)
- 2014年12月 (2)
- 2014年11月 (5)
- 2014年10月 (5)
- 2014年9月 (1)
- 2014年8月 (2)
- 2014年7月 (4)
- 2014年6月 (1)
- 2014年5月 (9)
- 2014年4月 (5)
- 2014年3月 (1)
- 2014年2月 (1)
- 2014年1月 (5)
- 2013年12月 (4)
- 2013年11月 (12)
- 2013年10月 (6)
- 2013年9月 (7)
- 2013年8月 (8)
- 2013年7月 (15)
- 2013年6月 (9)
- 2013年5月 (12)
- 2013年4月 (8)
- 2013年3月 (11)
- 2013年2月 (9)
- 2013年1月 (21)
- 2012年12月 (8)
- 2012年11月 (7)
- 2012年10月 (19)
- 2012年9月 (16)
- 2012年8月 (13)
- 2012年7月 (10)
- 2012年6月 (11)
- 2012年5月 (11)
- 2012年4月 (8)
- 2012年3月 (8)
- 2012年2月 (11)
- 2012年1月 (8)
- 2011年12月 (18)
- 2011年11月 (32)
- 2011年10月 (17)
- 2011年9月 (18)
- 2011年8月 (11)
- 2011年7月 (55)
- 2011年6月 (1)
- 2011年5月 (4)
- 2011年4月 (2)
- 2011年3月 (1)
- 2011年1月 (3)
- 2010年12月 (1)
- 2010年11月 (6)
- 2010年9月 (5)
- 2010年8月 (2)
- 2010年7月 (3)
- 2010年6月 (7)
- 2010年5月 (3)
- 2010年4月 (4)
- 2010年3月 (8)
- 2010年2月 (2)
- 2010年1月 (2)
- 2009年12月 (2)
- 2009年11月 (1)
- 2009年10月 (1)
- 2009年8月 (1)
- 2009年7月 (2)
- 2009年5月 (1)
- 2009年4月 (1)
- 2009年3月 (1)
- 2009年2月 (1)
- 2009年1月 (1)
- 2008年12月 (1)
- 2008年11月 (2)
- 2008年10月 (1)
- 2008年8月 (5)
- 2008年7月 (2)
- 2008年6月 (1)
- 2008年5月 (3)
- 2008年4月 (11)
- 2008年3月 (1)
- 2008年2月 (1)
- 2008年1月 (1)
- 2007年12月 (1)
- 2007年11月 (3)
- 2007年10月 (1)
- 2007年9月 (1)
- 2007年8月 (1)
- 2007年7月 (1)
- 2007年6月 (1)
- 2007年5月 (1)
