前端问答

[junhey]

前端问答适用于面试提问，以评论的方式写明面试题和答案参考链接。

[junhey]

HTTP协议,HTTP请求优化问题

HTTP请求由三部分组成，分别是：请求行、消息报头、请求正文

HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

参考：http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html

[junhey]

什么是跨域?怎么解决跨域问题?ajax跨域的方式?前端安全问题?

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制,所谓同源是指，域名，协议，端口均相同.

JSONP：使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。

代理:例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

PHP端修改header（XHR2方式） 在php接口脚本中加入以下两句即可： header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

[junhey]

koa/express的区别，有啥优缺点，koa的中间价

参考:https://segmentfault.com/a/1190000009204510

[junhey]

双向绑定的原理，vue/react/angular

vue:采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq

function observe(data) { if (!data || typeof data !== 'object') { return; } // 取出所有属性遍历 Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); }); };

function defineReactive(data, key, val) { observe(val); // 监听子属性 Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { return val; }, set: function(newVal) { console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal); val = newVal; } }); }

>angular:脏值检测的方式比对数据是否有变更，angular只有在指定的事件触发时进入脏值检测大致如下：
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

>React:虚拟DOM树的更新，单纯从数据绑定来看，React虚拟DOM没有数据绑定，因为setState()不维护上一个状态（状态丢弃），谈不上绑定。从数据更新机制来看，React类似于提供数据模型的方式（必须通过state更新）

[junhey]

grpc处理过程，有什么经验总结？

[junhey]

有什么比较满意的项目，可以说说？

[junhey]

前端优化相关有什么接触吗？

参考:http://blog.csdn.net/grandpang/article/details/51329289

[junhey]

Promise解决了什么问题，为什么出现Promise?

参考:https://segmentfault.com/a/1190000007032448

[junhey]

bfc有那些特性，如何触发？ bfc格式化上下文，指一个独立的渲染区域。

bfc的特性：

• 内部的Box会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由margin决定
• bfc的区域不会与float的元素区域重叠。
• 计算bfc的高度时，浮动元素也参与计算
• bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

触发bfc的元素：

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed。

[junhey]

多个异步进程中怎么监控是否完成，怎么优化？

[junhey]

MySQL中varchar与char区别

[junhey]

一次js请求，一般会有哪些缓存处理

DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。 CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队） 浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。 服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

[junhey]

JS所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型。

1. 所有的对象都有proto属性，该属性指向对象的原型.
2. 所有的函数对象都有prototype属性，该属性的值会被赋值给该函数创建的对象
3. 对象的_proto_属性.
4. 所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数.
5. 函数对象和原型对象通过prototype和constructor属性进行相互关联.

闭包： 指有权访问另一个函数作用域中的变量的函数。

Dom操作往往是javascript程序中开销最大的部分，因为NodeList对象是动态的，意味着每次访问Nodelist对象，都会运行一次查询，所以最好的办法是尽量减少Dom操作。

[junhey]

面试主要问的问题：异步，回调，作用域，原型，web安全，排序算法，TCP握手，跨域处理，ES6

[junhey]

前端规范

• 代码规范

1. html规范
2. css规范
3. js规范

• 工程规范

1. 单元测试
2. git-flow
3. code-review
4. 静态分析工具

[junhey]

css中元素居中的几种方法

1. text-align水平居中

   span{text-align:center;}

   tip:text-align属性是针对内联元素居中的属性设置

2. margin:auto居中

   .center img{display:block;width:33%;height: auto;margin:0 auto;}

   tip:对于块级元素使用margin: 0 auto; 来控制居中

3. line-height文字居中

   .center .text{height:121px;line-height:121px;}

   tip:设置高度并设置行高

4. position定位居中

   .center{position: relative;min-height:500px;}
   .center img{width:50%;min-width:200px;height:auto;overflow:auto;position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;}

   tip:此方案在浏览器兼容方面效果较好。但是需要知道外部容器元素的高度height

5. table-cell居中

   <div class=''center-aligned">
   　　<div class="center-core">
   　　　　<img src="1.jpg" alt>
   　　</div>
   </div>

   .center-aligned{display: table;width: 100%;}
   .center-core{display: table-cell;text-align:center;vertical-align: middle;}
   .center-core img{width: 33%;height: 33%;}

   tip:该方案不需要使用table标签，而是使用display:table-cell，但是需要添加额外的元素作为外部容器

6. flex-box居中

   .center{display: flex;justify-content: center;align-item: center;}
   .center img{width: 33%;height: auto;}

   tip:对于早期版本的IE缺乏支撑，但是可以用display:table-cell作为降级方案

7. calc居中

   .center{min-height:600px;positive: relative;}
   .center img{width: 500px;height: 500px; position: absolute;left: calc(50% - 250px);top: calc(50% - 250px);}

   tip:该方案适用于当内容为固定尺寸，对于不支持IE8，且在较早版本中仍需要浏览器前缀

8. translate居中

   .center{position: relative;min-height: 500px;}
   .center img {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 30%;height: auto;}

   tip:该方案的缺陷有：css transform在部分浏览器上需要加前缀;不支持IE9以下的浏览器;外部容器需要设置height（或者其他的方式设置），因为不能获取绝对定位的高度;如果内容包含文字，现在的浏览器合成技术会使文字模糊不清

[junhey]

1. 实现一个函数fn，只有一个参数，实现参数求和功能，例如：console.log(parseInt(fn(0)(1)(2)(3)(4)(5));可以在控制台输出15。注意：函数的调用次数是未知的。 参考答案：https://segmentfault.com/q/1010000004342477

2. 使用基于组件的开发模式，开发一个转盘抽奖组件，要求组件功能可以设置旋转的圈数，组件可以复用，其他自行设计。

[junhey]

浏览器是如何渲染页面的

渲染的流程如下： 1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）； 2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式； 3.将CSS与DOM合并，构建渲染树（Render Tree）； 4.布局和绘制，重绘（repaint）和重排（reflow）；

[junhey]

https://www.cnblogs.com/wdlhao/p/8290436.html

[junhey]

https://github.com/jimuyouyou/node-interview-questions