阿里前端笔试题目

有以下 HTML片段

(Name)

我们要实现当输入框 focus 时，label 的颜色变成 #666 , 不考虑 blur 后的效果。以下代码可以达到这个目的的有：页面中减少请求数的方法有哪些？

代码内联

使用 css3 实现一些小 icon

异步加载

使用 data 嵌入较小图片

把 js 资源放到页面底部加载

随着 HTTPS 的普及，越来越多的网站升级到了 HTTPS。假设你的网站已经支持了 HTTPS，现在需要在 nginx 配置文件中将所有的 HTTP 请求重定向到 HTTPS，同时你知道你的网站有为其它第三方网站提供 HTTP 接口服务（POST 请求方式），这些网站可能还没来得及将它们代码中写死的 http://你的网站 改掉，那么你在重定向时应该选用哪种状态码：

301

302

303

307

#form input:focus~label {

color: #666;

}document.getElementById('name-input').addEventListener('focus', function(ev){  document.querySelector('label').style.color = '#666';})document.getElementById('form').addEventListener('focus', function(ev){  if(ev.target.id === 'name-input'){    document.querySelector('label').style.color = '#666';  }}, true);document.getElementById('form').addEventListener('focus', function(ev){  if(ev.target.id === 'name-input'){    document.querySelector('label').style.color = '#666';  }}, false);document.getElementById('form').addEventListener('focusin', function(ev){  if(ev.target.id === 'name-input'){    document.querySelector('label').style.color = '#666';  }}, true);document.getElementById('form').addEventListener('focusin', function(ev){  if(ev.target.id === 'name-input'){    document.querySelector('label').style.color = '#666';  }}, false);ES6 中引入了多种新类型的函数，比如箭头函数、类、生成器函数等。现有一个生成器函数 gen，执行 gen() 后返回一个生成器对象 g，那么 g 的原型链长度是几，也就是问，g 有几个祖先原型：const gen = function*(){};const g = gen(); // 求 g 的原型链长度1234以下对于HTTP/2的说法错误的是？HTTP/2支持Server Push，可以在发送页面HTML时主动推送其它资源，如CSS、JSHTTP/2支持请求头压缩，而HTTP/1.1不支持HTTP/2支持响应体压缩，而HTTP/1.1不支持生产环境中要使用HTTP/2必须部署HTTPS目前并不是所有浏览器都支持HTTP/2，生产环境仍然不能使用HTTP/2支持多路复用，同域名下所有请求都可以在单个连接上完成当你在浏览器地址栏上输入一个网址后，浏览器是怎么知道下载回来的文件是什么格式，从而进行下一步的动作呢？是按网页文件来渲染，还是按图片文件来展示，还是按视频文件来播放，甚至直接跳出下载对话框让你下载呢？下列说法正确的有：看 URL 尾部的扩展名，没有扩展名的话都按 HTML 文件对待直接嗅探文件内容的前 1000 个字符，从中分析出文件的格式，扩展名在 Web 上没有任何意义看 Content-Type 响应头指定的 MIME 类型，如果没有指定，浏览器可能会进行 MIME 嗅探可以通过 document.contentType 属性查看到浏览器最终确定的 MIME 类型关于前端构建工具，以下说法最正确的是：Browserify 是运行时动态加载模块的解决方案Browserify 和 Webpack 可以将一些 npm 模块打包成能在浏览器中执行的代码Grunt 是基于流的自动化构建工具Webpack 可通过不同的 loader 去加载不同类型的文件gulpfile 中必须要有一个名为 default 的 task能将下面的DOM片段中c的位置移到b之前但是保持层级关系不变的操作方法有哪些？a.insertBefore(c, b)a.prepend(c)a.insertAdjacentElement('beforeBegin', c)c.append(b)下列CSS中样式中，可被继承的有:font, letter-spacing, line-heighttext-transform, white-space, text-shadowtext-align, text-indent, displaywidth, padding, box-shadow, floatpointer-events, height, font-weightcolor, list-style-image, font-family下面关于 jQuery 的说法，描述有误的是？我们可以通过修改 jQuery.fn 来扩展 jQuery 对象的原型方法我们可以使用 typeof obj === 'jQuery' 来判断一个对象是否为 jQuery 对象$(document).ready() 在浏览器中都是通过监听 DOMContentLoaded 实现的$.ajax() 会返回一个类似于 promise 的对象，这个对象支持调用 .then() .done() .fail() .always() 等方法来绑定对应的回调函数请根据以下描述实现一个简单的数据双向绑定，不允许使用第三方lib。现在有一个输入框：和一个对象：var obj = {  name: ''}希望你写一段程序，实现输入框input和对象obj的关联：input的值发生变化，会同步反映到obj中；反之，obj的变化，也会反应到input中。不考虑浏览器兼容性。已首屏时间是指在屏幕可视范围内的所有元素都加载完成的时间，一般来说图片和iframe的加载是最耗时的。在不考虑iframe的情况下，请写一个函数，可以计算出页面的首屏加载时间，只需要兼容高级浏览器。代码模板如下：var firstScreen = function () {    // 内容    // 提示：获取图片位置可以使用getBoundingClientRect，    // 获取屏幕高度可以用window.pageYOffset    // }    // 以及把firstScreen函数关联到页面事件中____.addEventListener(___, firstScreen, false);// 或者____.addEventListener(___, firstScreen(), false);在单页应用(Single Page Application)中，前端路由组件扮演着非常重要的作用，比如react-router、vue-router等。请根据你对前端路由的了解，回答以下问题：1. 请分析在项目中使用前端路由会有哪些不足?2. 请尝试利用原生JS实现一种前端路由方案，可以使用伪代码的形式来阐述思路和关键实现，不可以引用第三方库