一次经历一次笔试

September 08, 2018

一次凉凉的阿里笔试

周三下午和周四没有任务，在酒店里收到了之前沧海乱投的“一粟”。（其实也有其他面试，但都错过了，心累）

下面 po 一下题目。（先列出知识点，然后继续努力）

下列哪一项不是 Hybrid 应用架构的优势：

能够带来更好的 Web 页面渲染性能能够利用操作系统的原生能力能够突破浏览器的缓存限制，扩展更强的缓存功能开发成本较低，可以跨平台可以比较自由的更新代码针对开发新手，非常地友好，易于上手

知识点：Hybrid，缓存

关于 Cookie 以下说法错误的是：

如果仅是为了缓存数据，采用 localStorage 比 Cookie 更好二级域名的页面请求时，同时会携带主域名的 Cookie 对 Cookie 进行加密，可以降低 cookie 被截获后窃取服务端数据的风险客户端可以设置 Cookie 服务端可以设置 Cookie Cookie 的值是有大小限制的

知识点：Cookie，Web Storage

关于 HTTP 请求的 Status Code，正确的是：

判断请求成功仅需判断 status === 200 未登录错误为 302 403 一般是由于用户登录但权限不够造成的 307 可以完全用 301 代替实现 404 错误不会被缓存相比 301，302 对搜索引擎更友好

知识点：HTTP status codes

参考链接：Wikipedia – List of HTTP status codes

下面关于 React 和 Vue 的说法正确的是：

Vue 的性能非常好，不可能将原生 JavaScript 代码优化到 Vue 的性能 Vue 体积比 React 小，所以运行性能全面好于 React React16 引入新的生命周期可以捕获 Component 的错误 Vue 的服务端渲染非常快，比字符串模版渲染还要快 React 没有办法从子组件向父组件传递值 Vue1 和 Vue2 都不支持服务器渲染

知识点：React，Vue，渲染机制，组件化，生命周期

盒模型不包含以下哪一个属性？

Padding Content Border Margin Width Height Position

知识点：CSS，盒模型

参考链接：Wikipedia – CSS box model

以下关于 JavaScript 的堆栈的描述正确的是：

JavaScript 的 String、Array 类型的数据都是放在栈内存里的 JavaScript 的引用类型是放在堆内存里的栈的读取顺序是先进先出的堆的读取顺序是先进后出的栈内存会由系统自动分配释放堆内存是大小固定的

知识点：数据结构，堆，栈

关于跨域，以下说法正确的是：

jsonp 可以跨域 fetch 可以跨域 ajax 可以跨域 postMessage 可以跨域为了防止跨域请求攻击，服务端需要判断 cookie 信息采用 token 机制跨域防止跨域攻击

知识点：跨域，JSONP，Fetch，AJAX，postMessage，Cookie，token机制

下面哪些功能 Service Worker 可以完成：

Mock 数据请求主动拉取资源文件，并将其缓存当请求数据时候服务器 404，自动降级成兜底数据将离线时的打点数据存起来，等到联网后再传输直接对DOM进行操作浏览器关闭后，依然常驻

知识点：Service Worker，模拟请求，缓存机制，请求，DOM

下面关于性能优化正确的是：

PNG 图片永远比 JPG 图片小，所以应当尽量使用 PNG CSS 不能放在 <body> 底部，因为会导致页面重新渲染尽量不要使用 with，因为 with 内的代码执行效率会变低 PNG 图片压缩是没用的，因为其算法和 gzip 算法都是无损压缩，所以并不能减少图片大小浏览器创建和维持 HTTP链接是需要性能消耗的，所以应当尽量减少同时存在 HTTP 链接的数量只能通过服务器检验来确定浏览器是否支持 WebP，JavaScript 没办法检验浏览器是否支持

知识点：图片压缩，WebP，gzip，HTTP，CSS

以下哪些关于 npm 安装包的说法错误的：

使用 npm install -g my-pkg 可以将包安装到全局 npm install [email protected]可以安装1.0以上版本 npm I my-pkg也可以安装 npm install @latest/my-pkg是错误的写法 npm install git://github.com/npm/npm.git是正确的用法 npm install my-pkg –latest可以安装包的最新版本

知识点：Node.js，NPM包管理器

请根据描述使用 JavaScript 实现函数 _bind 模拟原生 bind 方法，并通过测试用例：

Function func(x){
    Console.log(x, this.y)
}

//your code here

//测试用例
Func._bind({y: ‘foo’})() //undefined “foo”
Func._bind()() //undefined undefined
Func._bind({y: ‘bar’}, ‘foo’)() //”foo” “bar”

知识点：原型链

题解（通过 Node.js 验证，但不一定是最好写法）

异步请求逻辑注入

工作中我们需要对异步请求的请求信息打印日志，但是又不能耦合在业务代码中打印。请设计一个方法injectBeforeAsyncSend，能够实现如下功能：在发起异步请求之前打印出请求的类型、URL、method、body、timestamp 等信息。

/**
 * injectBeforeAsyncSend.js
 * @param {function(asynConfig)} beforeSend
 */
const injectBeforeAsyncSend = function(beforeSend) {
  // 请在这里补充你的代码实现，在实现代码中请调用 beforeSend 方法进行日志打印
};

injectBeforeAsyncSend((asynConfig) => {
    console.log(asynConfig);
});

export default injectBeforeAsyncSend;

测试用例：

// 引入任意想使用的前端异步请求框架
import $ from 'jquery';
import injectBeforeAsyncSend from './injectBeforeAsyncSend';

// jquery 发起 get 请求
$.get('/user');
// 打印 {"asyncType":"ajax by XMLHttpRequest","method":"GET","url":"/user","body":null,"timestamp":1522143037821}

// jquery 发起带参数 post 请求
$.ajax('/user',
  {
    type: 'POST',
    data: { username: 'jone' }
  });
// 打印 {"asyncType":"ajax by XMLHttpRequest","method":"POST","url":"/user","body":"username=jone","timestamp":1522143037828}

// jquery 发起 jsonp 请求
$.ajax('https://www.alibaba.com/user.jsonp',
  {
    dataType: 'jsonp'
  });
// 打印 {"asyncType":"jsonp by script","method":"get","url":"https://www.alibaba.com/user.jsonp?callback=jQuery331047025307012584316_1522143037811&_=1522143037812","timestamp":1522143037832}

// fetch 请求
fetch('/user');
// 打印 {"asyncType":"ajax by XMLHttpRequest","method":"GET","url":"/user","body":null,"timestamp":1522143037838}

菜鸡，没做出来。

实现一个网页版的聊天室（类似于钉钉群），请列出关键的技术方案及要点。需求如下：

高实时性、高性能
你发的每条消息可以看到有多少人已读
当信息中含有“@某人”时，被@的人的界面上会显示“有人@你”的提醒字样
刷新页面或断网状态下，历史聊天记录不会消失

开放型试题，自认为答得一般，就没脸秀自己写啥了。

最近忙什么