常见的web前端工程师面试题整理

HTML

1、对Web标准的理解

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。

在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器。

2、浏览器内核理解和差异

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。

JS引擎:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等

Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]

Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

3、HTML5

HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

绘画 canvas;

用于媒介回放的 video 和 audio 元素;

本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

sessionStorage 的数据在浏览器关闭后自动删除;

语意化更好的内容元素,比如 article、footer、header、nav、section;

表单控件,calendar、date、time、email、url、search;

新的技术webworker, websocket, Geolocation。

兼容性:

IE8/IE7/IE6支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,

浏览器支持新标签后,还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim;

<!‐‐[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]‐‐>



CSS

1、选择器

1.id选择器( # myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = "external"])

9.伪类选择器(a:hover, li:nth‐child)

2、兼容性

* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式,从总体中逐渐排除局部。

* IE下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性。

解决方法:统一通过getAttribute()获取自定义属性。

* IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

* 解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 ‐webkit‐text‐size‐adjust: none; 解决。

*超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L‐V‐H‐A : a:link {} a:visited {} a:hover {} a:active {}

background‐color:#f1ee18;/*所有识别*/

.background‐color:#00deff\9; /*IE6、7、8识别*/

+background‐color:#a200ff;/*IE6、7识别*/

_background‐color:#1e0bd1;/*IE6识别*/

3、动画

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms=16.7ms

尽量使用css3动画,开启硬件加速。合理使用requestAnimationFrame动画代替setTimeout。

4、CSS3有哪些新特性?

新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)

圆角 (border‐radius:8px)

多列布局 (multi‐column layout)

阴影和反射 (Shadow\Reflect)

文字特效 (text‐shadow、)

文字渲染 (Text‐decoration)

线性渐变 (gradient)

旋转 (transform)

增加了旋转,缩放,定位,倾斜,动画,多背景

transform:\scale(0.85,0.90)\ translate(0px,‐30px)\ skew(‐9deg,0deg)\Animation:

5、盒模型


JavaScript

1、 JavaScript原型,原型链

每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,

于是就这样一直找下去,也就是我们平时所说的原型链的概念。

关系:instance.constructor.prototype = instance.__proto__

JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会被修改。

当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。

2、 Javascript如何实现继承

1、构造继承

2、原型继承

3、实例继承

4、拷贝继承

原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式。

function Parent(){

this.name = 'wang';

}

function Child(){

this.age = 28;

}

Child.prototype = new Parent();//继承了Parent,通过原型

var demo = new Child();

alert(demo.age);

alert(demo.name);//得到被继承的属性

}

3、 Javascript作用链域

全局函数无法查看局部函数的内部细节,但局部函数可以查看其上层的函数细节,直至全局细节。当需要从局部函数查找某一属性或方法时,如果当前作用域没有找到,就会上溯到上层作用域查找,直至全局函数,这种组织形式就是作用域链。

4、 什么是闭包(closure)

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包的特性:

1.函数内再嵌套函数

2.内部函数可以引用外层的参数和变量

3.参数和变量不会被垃圾回收机制回收

5、 Ajax 是什么

ajax的全称:Asynchronous Javascript And XML。

异步传输+js+xml。

所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整﴾通过阻塞,唤醒等方式﴿.

同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。

异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。

6、 如何解决跨域问题

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

7、 AMD(Modules/Asynchronous‐Definition)、CMD(Common Module Definition)规范区别

Asynchronous Module Definition,异步模块定义,所有的模块将被异步加载,模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

区别:

1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。

2. CMD 推崇依赖就近,AMD 推崇依赖前置。

看代码:

// CMD

define(function(require, exports, module) {

var a = require('./a')

a.doSomething()

// 此处略去 100 行

var b = require('./b') // 依赖可以就近书写

b.doSomething()

// ...

})

// AMD 默认推荐

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好

a.doSomething()

// 此处略去 100 行

b.doSomething()

// ...

})

8、 面向对象

其他

1、 一个页面从输入 URL 到页面加载显示完成这个过程

浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);

浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);

载入解析到的资源文件,渲染页面,完成。

2、 http状态码有那些

100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求,但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后,请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

3、 前端性能优化的方法

(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

(4) 当需要设置的样式很多时设置className而不是直接操作style。

(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

4、Node的优点和缺点

*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,

因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。

此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,

因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

*(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,

而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子



  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值