2.6　名企真题解析

本节收集了一些各大企业往年的面试及笔试题，读者可以根据以下题目来做参考，看自己是否已经掌握了基本的知识点。

2.6.1　JavaScript放在HTML的不同位置有什么区别

【选自MT笔试题】

题面解析：这道题考查JavaScript中的引用。如果应聘者接触过项目开发，或者编写过前端代码，都可以较容易地回答此问题。

解析过程：

JavaScript代码放在HTML中不同位置的区别如下。

·　如果使用window.函数，将JavaScript代码放在其中，则放在哪里都是一样的，因为都是在body加载完再执行的。

·　如果不使用window.函数，放在head中的话，代码不会被执行，这是因为HTML执行顺序的不同，确切地说是JavaScript的执行顺序不同。HTML从开始运行到进入index.js文件，其中被function包围起来的代码将不会被运行，直接执行最后一句代码。如果HTML页面没有加载完成，所以找不到元素，就会出现报错的情况。

2.6.2　HTML 5的离线存储资源的管理和加载

【选自GG面试题】

试题题面：浏览器是怎么对HTML 5的离线存储资源进行管理和加载的？

题面解析：本题主要考查HTML 5的新特性，其中一个就是离线缓存，前面也有介绍过HTML 5新特性，应聘者可以再深入进行了解。

解析过程：

浏览器对HTML 5的离线存储资源的管理和加载如下。

·　浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问App，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

·　如果已经访问过App并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件。

·　如果文件没有发生改变，就不做任何操作；如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线情况下，浏览器就直接使用离线存储的资源。

2.6.3　封装一个isInteger()函数，用于检测传入的值是整数

【选自BD面试题】

题面解析：本题也是在大型企业的面试中最常问的问题之一，主要考查应聘者对isInteger()函数是否熟悉和了解。

解析过程：

将x转换为十进制整数，判断是否和自身相等即可。

代码片段如下所示：

2.6.4　使用CSS实现水平垂直居中

【选自TX面试题】

题面解析：本题也是经常见的问题，当然这也是一个很简单的问题，应聘者在回答时尽量回答全面即可。

解析过程：

在前端开发过程中，盒子居中是常常用到的。居中可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论实现垂直居中的方法。

首先，定义一个需要垂直居中的div元素，其宽度和高度均为300px，背景色为橙色。

代码如下所示：

2.6.5　输完网址按Enter键，在这个过程中发生了什么

【选自BD面试题】

题面解析：如果应聘者不了解整个程序运行原理的流程，可能比较难回答这道题。下面简明扼要地对其进行介绍。

解析过程：

运行项目后，在地址栏输入地址后，在这个过程中大概发生以下流程：

·　域名解析；

·　发起TCP的3次握手；

·　建立TCP连接后发起HTTP请求；

·　服务器端响应HTTP请求，浏览器得到HTML代码；

·　浏览器解析HTML代码，并请求HTML代码中的资源；

·　浏览器对页面进行渲染并呈现给用户。