前端面试笔试题 异步获取数据是什么？异步获取数据怎么理解？怎么实现的？
异步获取数据是什么？异步获取数据怎么理解？怎么实现的呢？
你妈妈烧饭的时候让你去打酱油，你出去打酱油的时候，你妈妈等着，啥事儿也不做，这个叫同步。
如果你打酱油的时候，你妈妈做别的事情了，这个叫异步。
就是说一件事做完了再做另一件事，叫同步。几件事同时做，叫异步。类似物理电学的串联并联。
串联（同步）
并联（异步）。
你到后台去获取数据是需要时间的，在数据返回来之前，你可以干别的事情。这个就是异步获取数据，如果你同步获取数据，在后台数据返回来之前，页面就是卡住的。
一个问题一个问题解决。学习是按部就班做数学各门科目的作业书。讲义。
前端面试题
转
高级前端面试题
面试题目一
- 跨域的基本概念和解决方法，在项目中的实际应用。
- JS事件循环和Node事件循环，两者有何区别。
- BFC，块级格式化上下文。
- 强缓存和协商缓存，缓存的应用，如何用在页面性能优化上。
- ES6新增特性。
- async await如何利用generator实现。参考
- 移动端点击穿透问题。
- Vue2.0与Vue3.0双向绑定，proxy实现。
- 爬虫方面问题，反爬如何实现，针对反爬的实现(IP代理等）。
- 图片懒加载具体实现方案和思路。
- 实习难点，收获。
- code review需要注意的点，你做code reivew的话，会重点查看哪里，怎么写出高内聚，低耦合的代码，以实习中遇到的一个通用组件实现举例。
- 未来规划，如何学习前端的，自己感兴趣的前端方向是什么。
面试题目二
- 常见攻击，CSRF是什么，如何防范，token产生策略。
- React Fiber原理。有什么优势。
- React生命周期，React16.3版本后变化，为什么要这样做。（结合React Fiber)，有哪些不安全的生命周期。
- JS事件循环。
- 两列布局实现。
- 函数防抖，节流实现，不同方案实现。
- 二面主要在扯实习的事情，问了Redux原理，实习难点啥的，编程题实现一个EventBus和手写一个深拷贝。
面试题目三
- 弱网环境下页面首屏如何快速加载
- 方案：1.缓存的使用 2.SSR使用 3.骨架屏使用
- 跨域问题和解决方案
- 宏任务和微任务区别。
- node是IO密集型体现在哪里。
- 从node异步的角度来回答这个问题。
- 参考点这里➡️ https://www.jianshu.com/p/c28219029c65
- http2 http3优化点在哪 https建立连接过程
- 函数式编程思想的体现。
- 25匹马、5个赛道,怎么用最少的次数决出前三名
- CSRF攻击问题。
- 目中遇到的问题，重点说了下爬虫遇到的问题，如何解决反爬的。
- 实习遇到的问题，如何沟通，解决。
- 个人规划。
面试题目四
- js实现继承。
- 闭包。
- js事件循环。
- vue双向绑定实现原理。
- vue中指令的使用。
- vue中nextTick的原理。
- 虚拟dom以及diff算法。
- 错误监控方法。
- 页面加载会触发哪些事件。
- babel源码。
- setState原理。
- 实现一个EventEmitter类，支持事件的on,off,emit,once,setMaxListeners。
- document.ready和window.onload的区别。
- webpack loader和plugin区别。
- 打包gulp.webpack,rollup一些区别。
- webpack中循环引用问题，a里面引用了b，b里面引用了a.
- 解决方案 ⬇️
- https://blog.csdn.net/gaoqiang1112/article/details/105412329
- CICD,如何实现一个自动化部署工具，结合github中的webhook机制。
- 全排列算法的实现。
- 斐波那契算法。
- 实习遇到的困难。实习期间干的事情。
面试题目五
- 1px问题。
- 浮动解决的方案。
- js基础类型，如何判断，有什么方法。
- 闭包问题。
- node事件循环。
- 进程和线程区别。
- cpu调度算法。
- 2台计算机底层之间如何通信 socket IO通信实现。
- 计算机网络中，http地址，在7层协议中，如何一步步向下解析，从应用层到最底层的物理层，每一层处理的事情。
- 位图和矢量图的区别。
- cookie中常见的字段。
- 同源策略。
- http中一些常见的响应头和请求头，有什么应用。
- 简单请求和非简单请求区别。
- 函数式编程思想。
- 如何自己实现一个单点登录系统。
- ts自己的看法，和应用。
- react fiber原理。
- http2.0 http3.0分别改进了什么
- 手写diff。
- 手写Promise.All()
- 算法题：版本号比较
- https://leetcode-cn.com/problems/compare-version-numbers/
- IP地址复原
- https://leetcode-cn.com/problems/restore-ip-addresses/
文章就分享到这，欢迎关注“前端大神之路”
技术大神 转
RequireJS入门指导 （转）
最近在百度实习做的一个项目用到了 Require JS 这个库，之前从来没有了解过，经过一番大概的搜索后找到一篇非常不错的文章，看完后能够让你对 Require JS 的运行机制、使用方法以及为什么使用 Require JS 有一个基础的认识。下面我就对这篇文章进行一个简单的翻译，如果有错漏的地方希望指正。
原文链接：http://undefinedblog.com/primer-for-require-js/
谁适合读这篇文章
对 JavaScript 有一定的了解，写过一定规模的 JavaScript 代码，尤其能够掌握 JavaScript 匿名函数、回调等概念，并希望了解 Require JS 的用法、概念、意义等。
一些基本信息
Require JS(官网) 是一个 JavaScript 文件或模块的加载器，它可以根据不同页面对不同模块的需求，按照你的设置依次加载并执行所有的 JavaScript 文件。使用 Require JS 主要有两个目的：
- 解耦代码，方便代码重用和管理
- 加速页面加载，内置优化引擎（需服务器支持），自动异步加载依赖项，将所有需要加载的文件自动合并为一个文件，减少 HTTP 请求
Require JS 同时支持整合 jQuery、CommonJS、Node JS 等，而且对浏览器有不错的兼容性（IE 6+，你懂的）。
没有 Require JS 的时候
下面我们将以一个没有使用 Require JS 的模块开始，讲讲如何将你的代码解耦并使用 Require JS 来加载：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phase 1</title>
</head>
<body>
<div>
<h1>Modular Demo 1</h1>
</div>
<div id="messagebox"></div>
<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var baseUrl = '/api/messenger/';
function ShowMessage(id) {
$.ajax({
url: baseUrl + id,
type: 'GET',
dataType: 'json',
success: function(data) {
$("#messagebox").html(data);
}
});
}
var id = 55;
ShowMessage(id);
</script>
</body>
</html>
以上是一个很简单而且很常见的 ajax 请求页面，可以看到这个页面里的代码虽然简单，但是耦合度很高，下面我们将其中的 JavaScript 代码解耦，把不同的模块独立出来。
//模块1，全局设置模块
var config = (function() {
var baseUrl = '/api/messenger/';
return {
baseUrl: baseUrl
};
})();
//模块2，请求数据模块
var dataservice = (function($, config) {
var callApi = function (url, type, callback) {
$.ajax({
url: url,
type: type,
dataType: 'json',
success: function (data) {
callback(data);
}
});
},
getMessage = function (id, callback) {
url = config.baseUrl + id;
callApi(url, 'GET', callback);
};
return {
getMessage: getMessage
};
})($, config);
//模块3，封装的一个 messenger 模块，显示 ajax 放回的数据
var messenger = (function ($, dataservice) {
var showMessage = function(id) {
dataservice.getMessage(id, function(message) {
$("#messagebox").html(message);
});
};
return {
showMessage: showMessage
};
})($, dataservice);
//模块4，匿名函数，传 id, 调用 messenger 的showMessage() 方法 （直接执行）
(function (messenger) {
var id = 55;
messenger.showMessage(id);
})(messenger);
将这些代码放到原来的、没有重构前的页面中去，将实现同样的效果。但是我们将这些功能独立出来后，就可以很好的重复利用部分代码。
下面假设我们将这 4 个模块放到 4 个独立的 js 文件中：
- 模块1：config.js
- 模块2：dataservice.js
- 模块3：messenger.js
- 模块4：main.js
这样，在我们的 html 页面中，我们需要依次加载这 4 个模块：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phase 1</title>
</head>
<body>
<div>
<h1>Modular Demo 1</h1>
</div>
<div id="messagebox"></div>
<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
<script src="dataservice.js" type="text/javascript"></script>
<script src="messenger.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
这个时候，代码一样可以工作的非常顺利，没有任何问题。但是需要考虑一个问题：js 文件的加载顺序。当一个模块2需要依赖模块1中的功能时，必须要求模块1加载完成后再执行模块2中的代码。对于简单的代码（如本文涉及的仅4个模块）还好考虑，若有数十个模块需要加载，那么依赖的顺序一旦处理出错，很可能就会报 xxx is undefined 错误。
这个时候就是 Require JS 需要大显身手的时候。
Require JS 的基础操作
定义模块
define(['jquery'],
function ($) {
var text = 'I am a module',
showMessage = function() {
$("#messagebox").html(text);
};
return {
showMessage: showMessage
};
}
);
可以看到，一个 JavaScript 模块（如上面提到的 config、dataservice、messenger 等），都被一个 define() 函数包起来。
其中 define() 函数接受 3 个参数：
- 模块名
- 依赖项，以数组形式传递
- 模块内容
但是注意，上面的模块定义中，我们并没有传 模块名 这个参数，理由如下：
Require JS 会自动根据文件名（不含后缀名，即不含 ".js"）来给定义的模块命名，这样在最后优化（将所有的 js 文件合并为一个）时就能自动调用所有的文件。如果你显示的给定义的一个模块命名了，那么在日后进行修改时（比如改动了文件名或模块名），Require JS 将无法自动加载。因此最佳实践是：不要显式的定义模块名，让文件名成为默认的模块名，方便 Require JS 管理。
说完了第一个参数，再看看第二个参数 依赖项。依赖项我们传递的是一个字符串数组，每个字符串均代表要实现本模块的功能，需要预先加载的其他模块的模块名。如上例中我们的依赖项就是 jquery。
最后一个参数就是我们需要定义的模块内容。在上例中，我们的模块是一个 function，其中函数的形参即为对依赖项的引用。比如我们的模块有两个依赖项：
define(['moduleA','moduleB'],function(a,b){
//a.blabla(); b.blabla = ooxx;
});
就可以在模块中分别使用形参来调用我们依赖的模块。需要注意的一点是，依赖项的书写顺序和在模块定义的函数中的形参顺序要一致。
另外，Require JS 定义的模块并不一定是 function，也可以是普通的对象，详见 Require JS 文档。
将解耦后的代码改写为 Require JS 模块
我们在上面把一个简单的 ajax 调用解耦成 4 个独立的模块，下面我们就把这 4 个模块根据 Require JS 定义模块的风格进行改写。
//config.js
define([],
function () {
var baseUrl = '/api/messenger/';
return {
baseUrl: baseUrl
};
}
);
//dataservice.js
define(['jquery', 'config'],
function ($, config) {
var
callApi = function (url, type, callback) {
$.ajax({
url: url,
type: type,
dataType: 'json',
success: function (data) {
callback(data);
}
});
},
getMessage = function (id, callback) {
url = config.baseUrl + id;
callApi(url, 'GET', callback);
};
return {
getMessage: getMessage
};
}
);
//messenger.js
define(['jquery', 'dataservice'],
function ($, dataservice) {
var showMessage = function (id) {
dataservice.getMessage(id, function (message) {
$("#messagebox").html(message);
});
};
return {
showMessage: showMessage
};
}
);
//main.js
(function() {
requirejs.config(
{
paths: {
'jquery': '../Scripts/jquery-1.8.2.min'
}
}
);
require(
['messenger'],
function(messenger) {
var id = 55;
messenger.showMessage(id);
}
);
})();
你可能注意到了 main.js 中定义模块的方式似乎不同于其它 3 个模块。没错，因为严格意义上来说，main.js 是调用了其它 3 个模块的功能并最终获得数据。因此下面就要引出怎么在定义了 Require JS 模块后最终设置和调用的问题。
设置和调用模块
Require JS 对于模块的设置和调用提供了两种方式：
1、定义一个 script 标签，并增加 data-main 属性，指向我们的设置文件；同时添加 src 属性，指向 require-js.js 文件（即主库）
<script data-main="main.js" src="require-js.js"></script>
2、先引入 Require JS 库，再显式的设置
<script src="require-js.js"></script>
<script>
require({
baseUrl : 'scripts', //设置查找所有模块的根目录
paths:'',//如果在 baseUrl 下没有找到相应的模块，则加上 paths 继续查找
shim:{},//加载依赖项，传对象
});
require(['dataservice.js']); //加载完上述所有依赖项后，再加载自己编写的模块
</script>
详细参数见 Require JS 文档。
以上就是 Require JS 的一些简单使用方法和实践，话再说回 iOS 开发……很快回归！
我始终相信努力奋斗的意义
圈子里很多朋友如今都会笑着说：“鸡汤，还不就那样，今天激动了，冲动两三天，后面，该吃吃该喝喝，原来那样如今依旧那样。”
类似这种情况，很多人提起努力这个词的时候，总是以一种过来人的姿态，嗤之以鼻。
或许努力很久很久，也才只有百分之一的可能会获得自己想要的那个结果，但是，扪心自问，你真的努力了吗？
我指的努力，不是你嘴上喊着努力，却依旧熬夜追剧看漫画。其实，只有你自己清楚你到底有没有在努力。
身边一直有人每天都喊着要学ps，要学网页制作，要学视频剪辑......
一个月过去了，两个月过去了，貌似什么变化都没有，依旧睡着懒觉，玩着游戏，追着韩剧。
简单的说，我认为努力的第一要素，就是过得不舒服。
大概大部分人依旧记得自己高考时的状态吧，我高三的那一年，记忆特别清楚，在当时，我觉得那个时候特别辛苦，有时候自己背书背得会哭起来，是真真正正地哭出来。在深夜两三点，不断地重复记忆那些似乎枯燥的，没意思的历史事件，历史书上，有着各种各样的扩充知识点，蓝红黑三种颜色的记号笔把整本历史书填充的密密麻麻。
身边朋友考研，图书馆开门他就去了，图书馆关门他才回来，不带手机，不带电脑，带着的只有一本又一本厚厚的笔记本，陪着他的也只是那些极其枯燥无味，在生活中可能一辈子都用不到的理论。
顶着寒风去早读，自然没有躺在被窝里睡懒觉舒服；
看那些枯燥无味的理论，自然没有追韩剧，玩游戏舒服；
在图书馆呆一天，自然不会比在宿舍玩手机，看小说舒服；
跟着网上视频学习自己从来没有接触过的ps，视频剪辑，一定没有刷刷微博，看看段子舒服；
你问问自己，是不是因为过得太舒服了，所以才喜欢一路安逸地走下去。
早上睡到八九点，去上两节课，然后吃饭，回来玩电脑，打打游戏，时间富裕，再找个妹子谈谈恋爱，逛街吃饭看电影。
不满足现状，内心隐隐不安，觉得自己什么都不会，也没什么特长，却又喜欢现在的安逸，不用操心什么，每天吃吃喝喝就过去了。
古人说，生于忧患死于安乐，当然是有道理的，生活太安逸，太轻松，一定是会消磨你的斗志的。
第二，大概是要找到自己喜欢的东西了
说句实话，无论如何，这漫长一生总是会过去的，但是我希望，趁着还有时间，精力的时候，去做那些喜欢的事情。
热爱这个东西，真的有意想不到的力量。因为喜欢本身就把所有不舒服的事情变得有意思了。
我本人最讨厌熬夜，但是最开始接触音频剪辑的时候，简直没日没夜地剪，一天可以只睡四五个小时，每天都熬夜到两三点，但是第二天依然精神奕奕。
身边朋友喜欢写东西，接触到网文的时候，泡到电脑上，一天能码字上万。
因为在做喜欢的事情，所以熬夜，早起都不算什么了。
在你努力做自己喜欢的事情中，就已经感到开心了，最后得到的成果，反倒是意外之喜了。
但是我想很多人，恐怕连自己喜欢的事情都没有找到吧？
没关系，没有喜欢的事情，就去找自己感兴趣的事情，不了解，没接触过都不要怕，正是因为不了解，所以才有趣啊。
在这未知的世界，努力去做那些喜欢的事情，不要闲下来，把所有的时间都用到自己喜欢的事情上，不要怕没结果，不要怕没成功，最怕你一生碌碌无为，还安慰自己平凡可贵。
认真，努力的做某件事情的时候，最后无论结果如何，但你一定真真正正喜欢那种充实感。
为了梦想，为了喜欢，拼命去做，那都是相当的可爱。
第三，大概你如果不想为自己努力，但是有想过身边的人吗？
并不是每个人生下来，就有数不清的人脉圈子，铺好了前进的路，其实我们都清楚，我们只是这个世界上，最普普通通的一个人，不是富二代，也不是官二代，每走一步都要用血和泪去换，有时候或许还没走，就开始倒退。
很多人走几步，就不想动了，因为觉得特别累，如果你只是一个人，你当然可以不努力，但是，我们不是一个人，我们还有身边的人。
去年春节放假，心里想着要给老妈带点东西，在街上逛着的时候，下狠心买了一件略贵的衣服，拿给老妈的时候，忘记把吊牌撕了。
整整被老妈念叨了三四天，总说要拿去退，太贵了。我一脸鄙视的样子，说不能退，让她穿着。
整个春节，那件衣服老妈就穿了一次，还是大姨小姨全家来我们家拜年的时候，她们都说衣服好看。老妈则是一脸喜气地说，是我买的，我的眼光好，说这话的时候，眉角止不住地上扬。
那时候，不知道为什么，我感觉挺心酸的。
放假结束，刚刚回公司，手机短信就提示汇款5000块到账，看见那条短信，我就知道是我妈把钱打给我了。
过了一会，我妈的短信就发过来了“在外面上班都挺不容易，别老给我乱花钱了，我在家挺好的，吃得好，喝的好。”
国庆回家，发现那件衣服挂进衣柜里，就像没穿过的一样。
当时莫名难过了很久，突然就想到小时候，家里挺穷的，爸妈都特别省，我印象里，老妈都没买过新衣服，大姨小姨有时候会拿些旧衣服过来，老妈高兴得和捡了宝一样。
这么多年，老妈依旧特别的省，但是对我，却特别舍得用钱，凡是我想要的小玩意，小零食，她总会尽可能给我最好的。
不努力奋斗，我又拿什么给她最好的呢？
无论最后结果怎样，我都始终相信努力奋斗的意义。
你努力了，你就不愧对自己的热血；
你努力了，你就不愧对你曾经经受的坚苦日子；
你努力了，你就不愧对身边的人。
就怕你加班熬夜一次，就嚷嚷着黑心老板，出头无望。
就怕你失败一次，就嚷嚷着自己是金子却无处发光。
就怕你应酬喝酒吐了几次，就嚷嚷着社会黑暗，没钱没权，就想放弃。
世界纷纷扰扰，你过得舒服吗？你真的在为自己喜欢的事情努力吗？
如果你被生活磨掉了棱角，你被现实打败了，希望你同样相信努力奋斗的意义，不要辜负自己，更不要辜负身边的人，岂能竟如人意，但求无愧于心。
Yika丶J
探寻如何优雅的做一名FE
记拿到鹅厂前端开发暑期实习offer的经历
想起来时的路
在真正拿到腾讯实习offer之前，也是看过不少人的面经，心生向往。很早在入前端坑之前，我就想着大四的时候有机会要尝试去腾讯里实习。
大一入门语言就是C++，这让我很无奈，所以我很快的就抛下忘记了，留下的只是一堆基本编程和它的面向对象的概念。那会儿我喜欢听摇滚乐，民谣，组乐队，玩音乐。其实玩音乐的人理想才是最让人崇拜的，那种自由，那种对生活的追求。可是我知道自己并不能上道，于是学会了吉他和一丢丢的架子鼓，就开始回到了编程学习。选前端真是无意中的，我只是随手买了一本HTML5的书，然后觉得CSS也不错，最后才知道有Javascript这个东西。后来随着逐步的深入，已经开始心生喜欢。
我知道有很多书都是骗钱的，于是我去豆瓣，去亚马逊认认真真比较。买了我第一本最重要的书《Javascript高级程序设计》。接下来的整个暑假，我在没有网络的新家里，每日每夜琢磨书上的知识点，因为它真的很奇葩。后来接触到知乎，自己的前端水平的深度和广度的视野也就跟着上来了，就开始知道前端这水非常深。你现在还可以在百度贴吧，看到一堆人求各种JQuery插件，或者一堆问怎么学有没有前途，却始终不肯开始行动的人。我开始知道了前端要解决各种以前从来不会有的问题和各式各样的新技术。例如：
- 自动化工程
- 模块化加载
- Node.js
- MV*框架
- 预处理器
- 还有程序员的各种学科素养，计算机网络，数据结构等
还要学会看书，很多人自学就只能接受看视频。其实也很简单，因为你并不热爱它，所以看书对你来说实在太无聊了。我到现在为止买了很多本书，大部分都是图灵的动物书，很多书我都认真看过，有的还看不懂。图灵有一句话：站在巨人的肩膀上。这是真的，他们留下来很好的经验和最佳实践都在书里，不看就真的是莫大的损失。其实这些都需要你的热情，因为没有热情的人，很难适应前端变化这么快的环境。
我个人是不畏惧新技术的，因为新技术会让我觉得很酷，那种感觉就是你可以和老外的那帮极客一起玩新的东西，不会让我觉得落伍。我也可以和很多还一直认为前台美工是混在一起的"井底之蛙"们，普及一下最新的技术和未来的发展趋势。特别是听到大学老师也逐步开始推荐大家要去尝试了解Javascript，这让我不断坚定自己的想法，做一个很酷的前端。
于是我开始不断开拓自己的视野，不局限前端于酷炫的页面效果。因为学校团队大部分还是以安卓和开发网站为主，他们其实并不能提供我想要的实践项目和前端专业指导。我只能在我闲暇之余，做一些自己想象的App。我用的Node的express框架，从Backbone玩到Angular，不断积累总结踩坑。一路上挺孤独的，因为身边的大部分都是java的程序员，他们很难知道Javascript有怎样的变化。
腾讯面试
一直到现在，我都觉得不可思议。可能因为确实来的比其他人轻松幸运。在4.7号那会儿，一位腾讯的老师说想和我单独聊聊，看看我有没有能力走内推。或许是因为我简历写的很多前端比较前沿的东西，又或者是看到了我在cnblogs里的大半年的积累，还是github里一些自己写的小项目。他给了我第一轮的电话面试，问了很多东西，都是前端我感兴趣也接触过的东西，所以我能发表自己体验经历的感受。比如各个MV*框架，前端模板引擎，自动化工具。但是到最后，问到了web安全方面，关于XSS和CSRF我是不甚了解的。只知道很多特殊的符号要通过转义显示出来，来防止恶意的代码嵌入。基本上是一问三不知～T.T。但是面试官很好人，他说让我好好写一份简历，应该是交给二轮面试官。
我之前知道二轮面试一般来说，都是技术面，如果遇到很苛刻的人，可能会劈头盖脸一堆算法和脑筋急转弯的题目。我也是揪心了很久，看了很多之前写的递归算法和排序算法。可是幸运的是，二轮面试官yg老师并不是这样的，他希望听到我对前端开发的见解，他想知道我是否喜欢并了解这个岗位。他和我说：“实习生，我更希望他们会思考”。后来yg老师出了个任务给我，让我尝试一下，一个多人web聊天室搭建的整个过程。我需要一个人，前端后台数据库的全栈开发。我当时其实心里，只是大概知道该用什么技术来做这个webApp。但是我和他说，简陋的聊天室，我需要用一个星期的时间。后来想想，这个简直是我在逼我自己
后来我选用了meteor框架搭建，我并没有用过它，但是因为它是基于Node.js架构的，MongoDB做数据库，是一个有socket.io的实时平台，所以我打算借此机会练练手。我推掉了团队一个星期的工作，一边上课，一边抽时间专研meteor。至于学习meteor的过程我就忽略不说了，基本上就是百度，stack overflow，这样子下来的。因为之前做过Backbone，对Meteor的View上的数据渲染和事件绑定都是比较清楚的。搭过express，对路由和模板渲染，Mongo数据库的使用也是挺清楚的。唯一让我花费了很多时间去理解的，便是本地数据库与远程数据库之间的关系。有兴趣学Meteor的同学，也可以关注一下，绝对大开眼界。
总之，我之前自己做的小玩意儿，自己踩过的各种小坑，这一会儿都多多少少派的上用场。后来用了4天的时间，我就做完了最基本的需求，登陆用户，单人会话，发起多人群聊。后来我给我女朋友看的时候，她对我说这个和微信差不多啊，没什么特别的，哈哈哈。在这个期间，每天向面试官报告进度的时候，面试官也是挺满意的～我知道自己已经离机会不远了。
后来的Hr电话面试也是在轻松愉快的氛围中结束的，过了一个星期，我就接到了电子offer。正式宣布我靠我的运气和一丢丢的实力，拿到了腾讯暑期实习的offer。
接下来的安排
我找回第一轮的面试官，田老师。我说感谢他给了个机会我。他就开始分配实习前的任务给我，主要是关于Node.js的。
- 熟悉Node.js
- 掌握异步编程，了解并区别async，promise，Generator
- 看实现Generator迭代的库co的源代码
我听到之后，非常开心，因为确实也只有非常好的平台才会给我机会去实践这些Js前沿技术。我现在也在不断学习中，希望到时候暑期实习时，可以得到更多更宝贵的东西。
后记
不得不说，运气也是一种实力。
谢谢4月份走运的我。
我需要更努力来证明自己并不仅仅是因为运气，哈哈。
腾讯2018日常实习一面（电话面试）
以此文纪念笔者人生中的第一次面试，也就是腾讯日常实习的远程面试。说实话，是真的紧张，到现在都还有点懵。
回过神来，决定记录下这次面试的过程，以便日后的回顾。
首先，我是在腾讯招聘官网投递的简历。简历状态变更，到给我发消息约定面试时间这个过程大概过了五天左右。
面试时间是询问我后，约定在次日的晚上九点。由于在笔者的学校这里没有腾讯的面试点，所以是远程面试。而也如前辈们的经验一样，远程面试的一面一般都是电话面试。
在晚上八点五十左右，笔者找了一间空教室，坐等面试官的电话。我大概等了十几分钟，九点十分左右接到了面试官的电话。（等的时候慌得一匹。。）
下面进入正题，即面试问了什么
1.首先面试官让我介绍了一下学过什么内容，这里就自己回答自己会的，而且比较有把握的方向。（因为后面的面试问题基本上都是围绕你所回答的这些东西来问的）这里笔者回答了基础的HTML、CSS、JS之外就说了node.js、Vue、和Bootstrap。
2.在回答了这个问题后，面试官的问题是“请你介绍一下你对html5，和css3这些新的内容的了解。”笔者就回答了htlm5的script标签上的crossorigin属性，并大概解释了一下这个属性是干嘛的。然后又说css3的动画，子类选择器等（nth）。
3.面试官又接着问：“那你对Js的新规范有所了解吗？比如ES6、ES7等”我说了解过一些，就举了箭头函数和promise，我说了promise过后面试官就问我是怎么处理promise的嵌套的，我说用.then的方式（这里感觉应该是回答错方向了），面试官又问那你怎么处理promise中的if,else 我当时有点慌，因为我对promise的理解不是很深，做过的项目中也基本没用到这个（汗颜）他一深问，我就有点慌。再加上确实也不太了解，思索了一会过后我就只能说确实不太了解，在遇到这种情况的时候一般都不是用promise解决的，都是用递归判断情况这样子。面试官哦了一下，说了解了。（就是从这里笔者开始慌了，感觉后面回答的问题逻辑性都不是很强，目测会凉凉）
4.然后面试官的下一个问题是“你做过移动端的项目吗？是怎么调试的。”这个问题很尴尬的又快要涉及到笔者的知识盲区了，我只能说没怎么做过，但是我做PC端响应式的时候，是用浏览器的模拟器调试的，然后他又问“如果你发现一个页面，在移动设备上的展示效果和模拟器的效果不一致，这个时候你又是怎么调试的？”我是真没做过移动端，然后只能尴尬的说我不太了解这方面。
5.在上面那个尴尬的问题后，面试官接着问“你平时开发中，是怎么调试代码的？”这里笔者脑子有点短路，他问的时候强调了开发过程中，我就没有说下意识想回答的浏览器调试工具，我以为他想问的是怎么捕获页面上的错误等。我就说用一些错误捕获机制，将页面上的错误上传到服务器，然后我再去看服务器的日志这样子。虽然我回答偏了，但是面试官这个时候没有说我回答偏了，而是在这个基础上继续深问。“那你是用什么方式捕获页面上的错误的？”我就说用window.onerror,try catch 捕获js运行时错误，然后用object.onerrer，performance.entriec捕获资源加载错误。这里回答过后，面试官才接着问“你平时难道写代码都不用控制台的吗？”这个时候笔者才意识到刚才的回答跑题了，然后才说用啊，列举了一些基本的功能过后。面试官又问“那怎么在调试工具中，查看内存占用等信息？”我告诉他在哪里看后，他似乎问了个内存方面的问题，我说我对这个了解的不深，只在一次写排序算法的时候内存溢出，才知道内存在哪看来着。他表示明白过后就进入了下一个问题。
6.这一次面试官问我“你了解一些提升页面性能的方法吗？”我说了解，并且回答说在不花钱的情况下，我认为提升页面性能最好的方式是资源压缩，并且向面试官说明了原因。然后又说除此之外还可以JS异步加载，使用浏览器缓存，dns加速。这里停了一下，歇了口气时。面试官又问还有吗？我就说还有的就是要花钱的cdn加速了。然后面试官又问那你觉得那种方式提升最大，我回答的是cdn加速。在页面性能这个问题上，应该还是回答的比较完善了（个人感觉）
7.这里回答了页面性能后，面试官问的就是跟项目相关的一些问题了，比如用什么检测代码逻辑异常等（JSlint）我当时知道，但一着急忘了，硬是没想起。然后问了Vue的数据绑定是怎么实现的我说了是用object的definepropertise()中的get和set。然后面试官又问，还有其他的实现方法吗？我就说了个angular的脏检测，因为我也不是很了解，当他再问还有没有时，我就说应该还有只是实现起来应该没有这两种这么方便。然后他问我知不知道有个代理的方法，我说是不是proxy，他说是你知道怎么用吗？我这是真的不知道，因为这个函数我是在翻文档时看到过，能记得有这个东西就不错了，谁还记得这个东西应该怎么使用。。。。
8.然后最后的问题是关于我的上一个实习的，我就老实说了。问了一些比如遇到问题怎么解决啊之类的。我回答的是查文档，查博客如果两个都找不到就只能自己尝试。面试官似乎对这个回答不太满意，一直追问有没有其他解决方式。我是真的没想到，然后憋了一个如果身边有知道的就问身边的人这样。
这次面试到这里就结束了，大概40分钟的样子。我个人感觉不太好，写这篇文章的时候还没收到消息，感觉凉凉，虽然说感觉不好但没收到确切结果之前。心里还是有点小期待的。
总的来说，个人感觉就一句话 不要紧张！不要紧张！！不要紧张！！！（重要的事情说三遍）
实习生4面美团Java岗，已拿offer！（框架+多线程+集合+JVM）
Ajax的技术原理
昨天问道ajax是。我回答到不就是jquery框架提供的一个异步通信方法么。当再问原理时我傻逼了。ajax技术其实我只在实习时用到了。感到很方便的东西它不需要每次更新都刷新页面。可以异步请求服务器。利用回调函数进行处理程序。
在jquery API文档中我们可以看到一个简单的demo
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
可以看到这个代码的意思大概是利用post请求some.php这个方法。传入参数是用 name=John&location=Boston这么写的。data参数也能用{foo:["bar1", "bar2"]}这样的表现形式。但在发送时会自动转换成前面的样子。
那么这样一个ajax请求用js怎么做到的呢？
这里时利用了XMLHttpRequest对象进行实现的。但不同的浏览器获取这个对象和该对象的方法不同。
可以看到这里有open方法啊、send方法啊。还有个onreadystatechange这个属性。这个属性其实就是让你设置回调函数的。你可以写匿名函数也可以写函数名。如果要向服务器发参数可以用setRequestHeader方法设置key value。回调函数中我们也能获取到状态码、信息等等。例如success的状态码是200.重定向是302.失败是404之类的。利用这些东西我们就能写一个简单的实现。
function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
}
function Ustbwuyi() {
var data = document.getElementById("username").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST", url, false);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if (xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
这里引用的是网上的代码。我们简单分析一下。首先我们获取到了XMLHttpRequest对象。这里判断了一下是什么浏览器。用了几个if else。然后我们设置请求方式、url、传输方式。false是同步、true是异步。然后我们写了个回调函数。告诉这个回调函数。我们只有在交互完成状态为4时候才做以下代码。这里面我们又判断了一下返回状态码。说只有success时候我们才执行以下代码。这里貌似忘记用xmlhttp.setRequestHander("username",data);设置请求时候的key-value了。
2017年6月百度前端实习生面试问题
主题: 百度前端实习生面试
面试时间: 2017年6月
一面：问基础
当时我正在与我的工作流技术(大三的一门很坑很坑的课)决一死战，结果突然就打电话过来面试，我当时整个人都蒙了而且最坑的是我的外卖刚跟我说到楼下了，然后就来面试了。。结果，我的外卖被偷了！！！！重点了一份。
问的问题如下:
- css动画有哪些以及区别(animation,transition)
- 实现一个loading动画
- 如果动画卡顿了怎么办(使用translate)
- 要放置一个200X200的图片，图片大小最好要多大
- 实现一个三列布局，左边固定大小，其他两列占据剩余空间的50%(使用flex或者使用float)
- DOM事件模型
- js继承的几种方式
- 异步编程的几种方式
- 问我项目，有一个登录注册功能，问我过程，以及是否安全(https)
- 有过什么模块化工具(我答nodejs的commonjs,打包工具用webpack,对AMD了解一点点，然后他居然就不问下去了！居然就不问了！我还想着要扯一些CMD是同步加载，ADM是异步加载的什么鬼东西呢)
- 性能优化
然后一面就到此为止了，当时面试完就赶紧下去拿外卖，得知外卖被偷之后，就默默重点了外卖，然后开始新的复习之旅。
二面:问项目(2017/6/26 15:38)
- 自我介绍
- 根据我项目问问题,比如
2.1 你用过angularjs是吧，那你当时是为什么选择angular的呢？只是因为它是最流行的框架吗?
2.2 你有用过vue吗，那你说说vuejs和angular的差别
2.3 你觉得angularjs的controller是干嘛的
2.4 一个HTTP有哪些常见的状态码
2.5 发起一个HTTP请求，从客户端到服务器，会有延迟吗？有的话，在哪里出现？
答:
2.5.1 我首先想到的是DNS解析所用的时间，因为你输入一个域名之后，首先是需要DNS解析器来将域名 转换为IP地址
2.5.2 发起HTTP请求，就涉及到包之间的传输了，从HTTP应用层到物理层，就有一个封装以及加上头部的过程(比如加上TCP头部，IP头部)，之后将包发送出去，就会分发到不同的路由器，并且经过漫长的路程最终到达服务器。由于在传输过程中需要时间，所以传输时间是肯定必不可少的。如果当时网络情况不好的话，还可能有丢包情况，需要重发。
2.5.3 TCP/IP 建立连接首先需要三次握手。握手成功后才能发出请求。
2.6 你做的某某项目后，让你觉得最难的地方是哪里？ - 我的问题就到哪里~你有什么想问的吗？
当时就主要了问了我去了的话，主要是做什么的。以及百度前端架构体系是怎样的。
然后二面就结束了二面总共用了17分钟，问的问题我觉得还是挺有意思的，而且也是挺符合实际的，比如你项目的框架选型，你总不能随随便便就说这个流行就用吧。以及框架之间的对比，还问到了计网方面的知识，这让我想起了当时面试今日头条的时候，也问到了很多计网方面的东西当时问的好像主要是网络阻塞：如果发生丢包了的话，当前网络特别阻塞，有什么好的策略去解决它(TCP有一个 拥塞避免机制，然后就说了一下它的一些相关机制)
以上，就是此次百度前端面试中，我记得的所有内容(应该大多数都在上面)
2017年6月百度前端实习生面试问题
转载于http://www.cnblogs.com/chenjg/p/7081214.html
主题: 百度前端实习生面试
面试时间: 2017年6月
一面：问基础
当时我正在与我的工作流技术(大三的一门很坑很坑的课)决一死战，结果突然就打电话过来面试，我当时整个人都蒙了~而且最坑的是~我的外卖刚跟我说到楼下了，然后就来面试了。。结果，我的外卖被偷了！！！！重点了一份。
问的问题如下:
- css动画有哪些以及区别(animation,transition)
- 实现一个loading动画
- 如果动画卡顿了怎么办(使用translate)
- 要放置一个200X200的图片，图片大小最好要多大
- 实现一个三列布局，左边固定大小，其他两列占据剩余空间的50%(使用flex或者使用float)
- DOM事件模型
- js继承的几种方式
- 异步编程的几种方式
- 问我项目，有一个登录注册功能，问我过程，以及是否安全(https)
- 有过什么模块化工具(我答nodejs的commonjs,打包工具用webpack,对AMD了解一点点，然后他居然就不问下去了！居然就不问了！我还想着要扯一些CMD是同步加载，ADM是异步加载的什么鬼东西呢)
- 性能优化
然后一面就到此为止了，当时面试完就赶紧下去拿外卖，得知外卖被偷之后，就默默重点了外卖，然后开始新的复习之旅。
二面:问项目(2017/6/26 15:38)
- 自我介绍
- 根据我项目问问题,比如
2.1 你用过angularjs是吧，那你当时是为什么选择angular的呢？只是因为它是最流行的框架吗?
2.2 你有用过vue吗，那你说说vuejs和angular的差别
2.3 你觉得angularjs的controller是干嘛的
2.4 一个HTTP有哪些常见的状态码
2.5 发起一个HTTP请求，从客户端到服务器，会有延迟吗？有的话，在哪里出现？
答:
2.5.1 我首先想到的是DNS解析所用的时间，因为你输入一个域名之后，首先是需要DNS解析器来将域名 转换为IP地址
2.5.2 发起HTTP请求，就涉及到包之间的传输了，从HTTP应用层到物理层，就有一个封装以及加上头部的过程(比如加上TCP头部，IP头部)，之后将包发送出去，就会分发到不同的路由器，并且经过漫长的路程最终到达服务器。由于在传输过程中需要时间，所以传输时间是肯定必不可少的。如果当时网络情况不好的话，还可能有丢包情况，需要重发。
2.5.3 TCP/IP 建立连接首先需要三次握手。握手成功后才能发出请求。
2.6 你做的某某项目后，让你觉得最难的地方是哪里？ - 我的问题就到哪里~你有什么想问的吗？
当时就主要了问了我去了的话，主要是做什么的。以及百度前端架构体系是怎样的。
然后二面就结束了~二面总共用了17分钟，问的问题我觉得还是挺有意思的，而且也是挺符合实际的，比如你项目的框架选型，你总不能随随便便就说这个流行就用吧。以及框架之间的对比，还问到了计网方面的知识，这让我想起了当时面试今日头条的时候，也问到了很多计网方面的东西~当时问的好像主要是网络阻塞：如果发生丢包了的话，当前网络特别阻塞，有什么好的策略去解决它(TCP有一个 拥塞避免机制，然后就说了一下它的一些相关机制)
以上，就是此次百度前端面试中，我记得的所有内容(应该大多数都在上面)
自己想要的要自己给自己。这是一个独立的人的思维。
转
答寒冬winter面试题
讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。
谈谈你对Web前端组件化的理解，Web Component会带来怎样的影响
谈谈你对前端资源下载性能优化的经验和思考
现在有很多的MV*框架，你对它们有什么看法
iOS体验好在哪里，Web能赶上么？
网页游戏怎么做？
Hybrid技术应当如何应用？
你最爱的前端框架是什么，为什么？
讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。
输完网址到看到网页，首先浏览器会解析url，浏览器会分别通过浏览器缓存、系统缓存、DNS服务器缓存、DNS服务器找到url对应的唯一IP地址，并解析IP地址搜索服务器并发送请求，服务器根据请求返回编译后的HTML字符串，浏览器开始进行解析。
浏览器通过“状态机”对HTML进行解析，生成DOM Tree。
解析HTML的过程中遇到CSS和JS资源的标签会立即开始请求资源或执行，这里提一下出于JS脚本可能会有样式操作的考虑，CSS文件的下载会阻塞JS文件的加载，由于开发者希望JS脚本能在引用的地方立即执行，JS文件的加载和执行会阻塞HTML的解析。所以一般建议优先或者异步加载CSS，在body底部再加载js.
CSS下载好会生成CSS Rule Tree，代表CSS的映射规则， CSS Rule Tree会比照HTML DOM Tree生成Render Tree。
Render Tree生成好后，变开始了浏览器的渲染过程。主要是以下4个步骤：
样式计算：计算每个渲染对象的样式属性
布局：基于流的模型对元素进行布局，简单说就是计算宽度和位置
绘制：基于以上两个步骤的结果将元素显示到屏幕上
层级组合：根据z坐标将不同层级组合起来，z-index或translate3d可以改变元素的层级，也就是z坐标，z坐标越小的元素越优先绘制。
此外对于有动画效果的页面，被改变的CSS属性不同，触发的渲染步骤也不同(参照)，尽量触发靠后的渲染步骤或者缩小受影响的元素可以减少页面性能消耗。合理利用translate3d分层可以减小受影响的元素并利用GPU加速，尽量用translate代替left和top进行位置变换进行也是同理。
Web前端组件化
在前端开发中会有很多相同的组件需求，例如我们经常用到的input、select，这些是浏览器原生的组件。可是浏览器提供的组件十分有限，大部分时候无法满足我们的需求，需要我们自己开发这些功能，比如幻灯片、手机上的滚动条、日历等功能，都是很常用的功能。。于是我们就把这些常用的功能提取出来，作为组件，这些组件抽象封装后就是我们所谓的插件，插件有一些弊端：大多数插件的接口和调用方式并不兼容，当我们想替换插件的时候有学习成本，有时候甚至需要修改代码逻辑
插件内外并没有隔离，插件存在可能会被页面其他部分影响（如样式属性），也有影响页面其他部分的可能。
Web Components提出了组件定义方式的规范化。目前包括四个部分，template、Shadow Dom、Custom Element、Import。
template是指我们可以通过<template>元素导入HTML模板（之前一般是用js），并且这段模板不会在Dom结构中出现，也不会预先加载其中所需的img之类的资源。
Shadow Dom是指我们可以在DOM中生成一块隐藏的DOM，它不会显示到正常的DOM结构中，同时也会和它外面的Dom元素隔离，不受彼此的影响。新版的chrome实现了这个，提供createShadowRoot这个方法创建Shadow Dom。
以上方法看着很酷炫，可是我们使用的时候还没有到完全声明化，还是需要通过传统的id或class方式筛选到组件寄生的dom，这个时候Custom Element就登场了， 它允许我们自定义元素（要求是继承HTMLElement），并提供createdCallback接口，让我们可以定义HTML解析到这个元素时调用的回调函数。也就是塞数据和注册Shadow Dom可以在callback里面完成，我们只需要在Dom中插入自己Custom Element就Ok了。
到这里我们就要考虑了，如何实现复用呢？ 没错，这就是import的作用了，它是link的一个rel属性，允许我们像链接css那样链接一个HTML文件。
目前走在前面的是Chrome，polymer官网上的标语welcome to the future很让人心动。组件化一定程度上解决了前端重复造轮子的问题，实现了“一个备胎，车车能用”，未来某天某个开发者将开发好的组件分享到云上，大家都能拿来使，这也许就是传说中的， 云备胎。。。。。
谈谈你对前端资源下载性能优化的经验和思考
前端的资源主要是css，js文件和图片。
目前我们的优化方法：
css、js压缩(减小文件体积)
css sprite(减少图片资源的请求次数)
前文提到的，优先加载css，将js文件置底
通过打包工具将文件合并(文件请求占加载的大头，减少文件请求数)
合理选择js、css文件的加载方式：内嵌 / 外部引用(选择内嵌，是为了减少文件请求数。而将更新较少，不同页面都公用的文件提取出来，做为外链加载，是为了利用缓存，减少它的请求次数，且减少需要多次请求的HTML文件大小)
配置离线存储
上线前使用打包工具进行项目优化，减少无用代码。
现在有很多的MV*框架，你对它们有什么看法
MV*框架的目的简单来说是为了实现代码分工，增加模块的重用，让业务逻辑和界面交互解耦。前端框架，实习中接触过Ractivejs和AngularJs，都是MVVM的框架
前端框架给我带来的好处在于它引导了我做项目的流程。要求我们在项目开动前就得先构思好这个项目的分级，每层的结构，在写之前要求我们对项目有一个大概的把握，有更清晰的思路。
RactiveJS相比起来就简单多了，我们可以按需选择数据更新的时间，正是因为小很多地方要自己实现，自定义的程度更高。
浙公网安备 33010602011771号