web前端面试题必看

69.Javascript的typeof返回哪些数据类型；列举3种强制类型转换和2中隐式类型转换

1）返回数据类型

undefined

string

boolean

number

symbol(ES6)

Object

Function

2）强制类型转换

Number(参数)  把任何类型转换成数值类型。

parseInt(参数1，参数2)  将字符串转换成整数

parseFloat()将字符串转换成浮点数字

string(参数)：能够将任何类型转换成字符串

Boolean()  能够将任何类型的值转换成布尔值。

3）隐式类型转换

1.四则运算

加法运算符+是双目运算符，只要其中一个是String类型，表达式的值即是一个String。

对于其余的四则运算，只有其中一个是Number类型，表达式的值即是一个Number。

对于非法字符的状况一般会返回NaN：

'1' * 'a'     // => NaN，这是由于parseInt(a)值为NaN，1 * NaN 仍是 NaN

2.判断语句

判断语句中的判断条件须要是Boolean类型，因此条件表达式会被隐式转换为Boolean。 其转换规则同Boolean的构造函数。好比：

var obj = {};if(obj){

    while(obj);}

3.Native代码调用

JavaScript宿主环境都会提供大量的对象，它们每每很多经过JavaScript来实现的。 JavaScript给这些函数传入的参数也会进行隐式转换。例如BOM提供的alert方法接受String类型的参数：

alert({a: 1});    // => [object Object]

一、  写出3个使用this的典型应用

function Thing() { }

 Thing.prototype.foo = "bar";

 Thing.prototype.logFoo = function () {

      console.log(this.foo);

 }

 Thing.prototype.setFoo = function (newFoo) {

      this.foo = newFoo;

  }

  var thing1 = new Thing();

var thing2 = new Thing();

thing1.logFoo(); //logs "bar"

 thing2.logFoo(); //logs "bar"

 thing1.setFoo("foo");

 thing1.logFoo(); //logs "foo";

thing2.logFoo(); //logs "bar";

 thing2.foo = "foobar";

 thing1.logFoo(); //logs "foo";

 thing2.logFoo(); //logs "foobar";

2.

  function Thing1() { }

  Thing1.prototype.foo = "bar";

  function Thing2() {

     this.foo = "foo";

 }

  Thing2.prototype = new Thing1();

  function Thing3() {}

Thing3.prototype = new Thing2();

var thing = new Thing3();

console.log(thing.foo); //logs "foo"

3.

  function Thing() {}

  Thing.prototype.foo = "bar";

Thing.prototype.logFoo = function () {

function doIt() {

onsole.log(this.foo);

}

 doIt.apply(this);

  }

 function doItIndirectly(method) {

method();

}

var thing = new Thing();

doItIndirectly(thing.logFoo.bind(thing)); //logs bar

对前端界面工程师这个职位是怎么样理解的？它的前景会怎样？

前端工程师属于一个比较新兴的技术，各类技术层出不穷，随着客户体验的重要性前端须要掌握的技能也愈来愈多了，对前端的要求也愈来愈多了，并且咱们离客户很近，除了掌握必要的技能还要掌握用户的心理，属于沟通。 前景：前景无疑是值得确定的，也须要咱们时刻关注最新的技术，这会是一个时刻都在学习的道路

二、  JQuery delegate函数的做用？请举例说明

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

例如点击div中的p标签 让 弹个窗口

$(‘div’).delegate(‘p’, ‘click’, function(){  alert();}

三、  Eval函数的做用

eval能够将字符串生成语句执行，通常执行动态的js语句。
eval的使用场合：有时候咱们预先不知道要执行什么语句，只有当条件和参数给时才知道执行什么语句，这时候eval就派上用场了。

四、  标签上title与alt属性的区别是什么

title 是鼠标放上去的额外信息 alt 是不能正常显示的信息

五、  对WEB标准以及w3c的理解与认识？

Web标准就是将页面的解构、表现和行为各自独立实现，w3c对标注提出了规范化的要求1.对结构的要求：（标签规范能够提升搜索引擎对页面的抓取效率，对SEO颇有帮助）

1）标签字母要小写；

2）标签要闭合；

3）标签不容许随意嵌套。

2.对css和js的要求：

1）尽可能使用外联css样式表和js脚本，使结构、表现和行为分红三块，符合规范，同时提升页面渲染速度，提升用户体验；

2）样式尽可能少用行间样式表，使结构与表现分离，标签的id和class命名要作到见文知义，标签越少，加载越快，用户体验更高，代码维护更简单，便于改版；

3）不须要变更页面内容，即可提供打印版本而不须要复制内容，提升网站易用性

六、  Css选择符有哪些？哪些属性能够继承？优先级算法如何计算？

ID 和 CLASS ；Class 可继承 ；伪类A标签能够继承；列表 UL LI DL DD DT 可继承

；优先级就近原则，样式定义最近者为准；载入样式以最后载入的定位为准

优先级为

!important > [ id > class > tag ]  

Important 比 内联优先级高

七、  请戳出ie6/7下特有的cssbug

一：li边距“无端” 增长

设置ul的显示形式为*display:inline-block;便可，前面加*是只 针对IE6/IE7有效

二：IE6 不支持min-height属性，但它却认为height就是最小高度

使用ie6不支持但其他浏览器支持的属性!important。

三:Overflow:

在IE6/7中，overflow没法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

四：border：none 在IE6不起做用： 写成border：0 就能够了，

五:100%高度

在IE6下，若是要给元素定义100%高度，必需要明肯定义它的父级元素的高度，若是你须要给元素定义满屏的高度，就得先给html和body定义 height:100%;。

六:双边距 Bug

当元素浮动时，IE6会错误的的把浮动方式的margin值双倍计算，给float的元素添加一个display：inline

七：躲猫猫bug

些定义了:hover的连接，当鼠标移到那些连接上时，在IE6下就会触发躲猫猫。
1.在（那个未浮动的）内容以后添加一个<span style=”clear: both;”></span>
2.触发包含了这些连接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

八:IE6 绝对定位的元素1px 间距bug

当绝对定位的父元素或宽度为奇数时，bottom和right会多出现1px，

解决方案，针对IE6进行hack处理

八、  如何将一个元素600毫秒的速度缓慢向上滑动显示？

若是须要在父元素底部向上，能够利用margin-top 把子元素，挤下去，同事父元素设置隐藏，而后改变margintop的值也能够利用定来作，把子元素定位最下边

(function(){

              var oDiv = document.createElement('div');

              oDiv.style.width = '100px';

              oDiv.style.height = '100px';

              oDiv.style.backgroundColor = 'red';

              oDiv.style.position = 'absolute';

              oDiv.style.marginTop = 100 + 'px';

              document.body.appendChild(oDiv);

              var timer = setInterval(function(){

                     var m = parseInt(oDiv.style.marginTop);

                     if (m == 0 ) {

                            clearInterval(timer);

                            return;

                     }

                     oDiv.style.marginTop = parseInt(oDiv.style.marginTop) - 1 + 'px';

              },600);

       })();

九、  写一个获取非行间样式的函数

Function getStyle(obj, attr){

       If(obj.currentStyle){

              return obj.currentStyle[attr];

}else{

              return getComputedStyle(obj,false)[attr];

}

}

十、 请用正则表达式验证数字

^[0-9]*$ 

十一、 为何利用多个域名来提供网站资源会更有效？

1、        突破浏览器的并发限制（浏览器同一域名最大的并发请求数量为6个，ie6为2个）

2、        节约cookie带宽

3、        CDN缓存更方便

4、        防止没必要要的安全问题（尤为是cookie的隔离尤其重要）

5、        节约主机域名链接数，优化页面响应速度

十二、 你如何从浏览器的URL中获取参数信息

浏览器宿主环境中，有一个location对象，同时这个对象也是window对象和document对象的属性。

       location对象中提供了与当前窗口加载的文档有关的的信息，即URL信息。

如 https://www.baidu.com/api/sousu?search=baidu&id=123#2

        location.href: 完整URL

        location.protocol: 返回协议（https:）

        location.host: 返回服务器名称和端口号（www.baidu.com）

location.hostname: 返回服务器名称（www.baidu.com）

location.port:返回服务器端口号（http默认80，https默认443）

location.pathname:返回URL中的目录和文件名（api/sousu）

location.search:返回查询字符串（?search=baidu&id=123#2）

location.hash:返回hash值（#2）

1三、 手机端文字大小用什么单位

对于只须要适配少部分手机设备，且分辨率对页面影响不大的，使用px便可

对于须要适配各类移动设备，使用rem，例如只须要适配iPhone和iPad等分辨率差异比较挺大的设备

1四、 是否作过有上百图层的psd切图？ps隐藏其余图层，只显示其中一个图层的快捷键

Alt + 当前图层前眼睛

1五、 浏览器标准模式和怀疑模式之间的区别是什么？

这是个历史遗留问题，W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，所以在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了可以兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。

       具体表现：

1.在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在怪异模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2）能够设置行内元素的高宽

    在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。

3）可设置百分比的高度

    在标准模式下，一个元素的高度是由其包含的内容来决定的，若是父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在标准模式下可使元素水平居中，但在怪异模式下却会失效, 怪异模式下的解决办法，用text-align属性:

   body{text-align:center};#content{text-align:left}

5）怪异模式下设置图片的padding会失效

6）怪异模式下Table中的字体属性不能继承上层的设置

7）怪异模式下white-space:pre会失效

1六、 Javascript的同源策略

同源策略是Javascript重要的安全度量标准。它最先出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不一样源装载。所谓的同源就是同协议，同主机名，同端口号。

它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被容许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

1七、 你所作的WEB移动端项目中，有遇到哪些兼容?

给你们推荐个网址：

http://www.jb51.net/article/84973.htm

1八、 有了解响应式布局吗？请大致说一说

响应式布局概念：Responsive design，意在实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

设计步骤：

1. 设置meta标签
2. 根据媒体查询设置样式
3. 设置多种视图宽度

注意点：

1. 宽度使用百分比
2. 处理图片缩放问题

1九、 身为觉得web前端工程师，你确定知道如今最流行的前端技

术吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

20、 请简述为何要使用数据库的事务

数据库事务(Database Transaction) ，是指做为单个逻辑工做单元执行的一系列操做，要么彻底地执行，要么彻底地不执行。

原子性（Atomic）（Atomicity)
　　事务必须是原子工做单元；对于其数据修改，要么全都执行，要么全都不执行。一般，与某个事务关联的操做具备共同的目标，而且是相互依赖的。若是系统只执行这些操做的一个子集，则可能会破坏事务的整体目标。原子性消除了系统处理操做子集的可能性。
　　一致性（Consistent）(Consistency)
　　事务在完成时，必须使全部的数据都保持一致状态。在相关数据库中，全部规则都必须应用于事务的修改，以保持全部数据的完整性。事务结束时，全部的内部数据结构（如 B 树索引或双向链表）都必须是正确的。某些维护一致性的责任由应用程序开发人员承担，他们必须确保应用程序已强制全部已知的完整性约束。例如，当开发用于转账的应用程序时，应避免在转账过程当中任意移动小数点。
　　隔离性（Insulation）(Isolation)
　　由并发事务所做的修改必须与任何其它并发事务所做的修改隔离。事务查看数据时数据所处的状态，要么是另外一并发事务修改它以前的状态，要么是另外一事务修改它以后的状态，事务不会查看中间状态的数据。这称为隔离性，由于它可以从新装载起始数据，而且重播一系列事务，以使数据结束时的状态与原始事务执行的状态相同。当事务可序列化时将得到最高的隔离级别。在此级别上，从一组可并行执行的事务得到的结果与经过连续运行每一个事务所得到的结果相同。因为高度隔离会限制可并行执行的事务数，因此一些应用程序下降隔离级别以换取更大的吞吐量。
　　持久性（Duration）(Durability） 　　事务完成以后，它对于系统的影响是永久性的。该修改即便出现致命的系统故障也将一直保持2017-03-082017-03-08