前端面试题整理汇总

本文旨在加深对前端知识点的理解,资料来源于网络,由 trigkit4 收集整理。

一些开放性题目

position的值, relative和absolute分别是相对于谁进行定位的?

  • absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
  • fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。
  • relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
  • static 默认值。没有定位,元素出现在正常的流中
  • sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出

如何解决跨域问题

JSONP:

原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONPjson+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

CORS

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。

XMLJSON的区别?

谈谈你对webpack的看法

WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。

webpack的两大特色:

webpack 是以commonJS的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

webpack具有requireJsbrowserify的功能,但仍有很多自己的新特性:

说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处,TCP协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP不会对传送 后的情况置之不理,它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志:SYNACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”:

  • 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。
  • 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
  • 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
  • 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

TCP和UDP的区别

TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去! UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的。

创建ajax过程

渐进增强和优雅降级

渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

常见web安全及防护原理

sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。

总的来说有以下几点:

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如:攻击者在论坛中放一个

看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,

当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。

XSS防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。

首先,避免直接在cookie 中泄露用户隐私,例如email、密码等等。

其次,通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。

如果网站不需要再浏览器端对cookie 进行操作,可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie

尽量采用POST 而非GET 提交表单

XSS与CSRF有什么区别吗?

XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。

要完成一次CSRF攻击,受害者必须依次完成两个步骤:

CSRF的防御

  • 服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。
  • 通过验证码的方法

Web Worker 和webSocket

worker主线程:

WebSocketWeb应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个HTML5协议,WebSocket的连接是持久的,他通过在客户端和服务器之间保持双工连接,服务器的更新可以被及时推送给客户端,而不需要客户端以一定时间间隔去轮询。

HTTP和HTTPS

HTTP协议通常承载于TCP协议之上,在HTTPTCP之间添加一个安全协议层(SSLTSL),这个时候,就成了我们常说的HTTPS。

默认HTTP的端口号为80,HTTPS的端口号为443。

为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS,密钥在你和终点站才有。https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性

对前端模块化的认识

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD 是提前执行,CMD 是延迟执行。

AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exportsexports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

Javascript垃圾回收方法

标记清除(mark and sweep)

这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收,但BOM与DOM对象却是通过引用计数回收垃圾的, 也就是说只要涉及BOM及DOM就会出现循环引用问题。

你觉得前端工程的价值体现在哪

谈谈性能优化问题

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。

缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等

请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。

请求带宽:压缩文件,开启GZIP,

代码层面的优化

  • hash-table来优化查找
  • 少用全局变量
  • innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
  • setTimeout来避免页面失去响应
  • 缓存DOM节点查找的结果
  • 避免使用CSS Expression
  • 避免全局查询
  • 避免使用with(with会创建自己的作用域,会增加作用域链长度)
  • 多个变量声明合并
  • 避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率
  • 尽量避免写在HTML标签中写Style属性

移动端性能优化

  • 尽量使用css3动画,开启硬件加速。
  • 适当使用touch事件代替click事件。
  • 避免使用css3渐变阴影效果。
  • 可以用transform: translateZ(0)来开启硬件加速。
  • 不滥用Float。Float在渲染时计算量比较大,尽量减少使用
  • 不滥用Web字体。Web字体需要下载,解析,重绘当前页面,尽量减少使用。
  • 合理使用requestAnimationFrame动画代替setTimeout
  • CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加
  • PC端的在移动端同样适用

相关阅读:如何做到一秒渲染一个移动页面

什么是Etag?

当发送一个服务器请求时,浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。

情景一:若没有过期,则不向服务器发送请求,直接使用缓存中的结果,此时我们在浏览器控制台中可以看到 200 OK(from cache) ,此时的情况就是完全使用缓存,浏览器和服务器没有任何交互的。

情景二:若已过期,则向服务器发送请求,此时请求中会带上①中设置的文件修改时间,和Etag

然后,进行资源更新判断。服务器根据浏览器传过来的文件修改时间,判断自浏览器上一次请求之后,文件是不是没有被修改过;根据Etag,判断文件内容自上一次请求之后,有没有发生变化

情形一:若两种判断的结论都是文件没有被修改过,则服务器就不给浏览器发index.html的内容了,直接告诉它,文件没有被修改过,你用你那边的缓存吧—— 304 Not Modified,此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存,浏览器和服务器之间有一次请求交互。

情形二:若修改时间和文件内容判断有任意一个没有通过,则服务器会受理此次请求,之后的操作同①

① 只有get请求会被缓存,post请求不会

Expires和Cache-Control

Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。如果max-age和Expires同时出现,则max-age有更高的优先级。

ETag应用:

Etag由服务器端生成,客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能如下:

====第一次请求===

====第二次请求===

答案是同时使用,也就是说在完全匹配If-Modified-SinceIf-None-Match即检查完修改时间和Etag之后,

服务器才能返回304.(不要陷入到底使用谁的问题怪圈)

为什么使用Etag请求头?

Etag 主要为了解决 Last-Modified 无法解决的一些问题。

栈和队列的区别?

栈和堆的区别?

快速 排序的思想并实现一个快排?

“快速排序”的思想很简单,整个排序过程只需要三步:

(1)在数据集之中,找一个基准点

(2)建立两个数组,分别存储左边和右边的数组

(3)利用递归进行下次比较

你觉得jQuery或zepto源码有哪些写的好的地方

(答案仅供参考)

jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window对象参数,可以使window对象作为局部变量使用,好处是当jquery中访问window对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window对象。同样,传入undefined参数,可以缩短查找undefined时的作用域链。

jquery将一些原型属性和方法封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法。

有一些数组或对象的方法经常能使用到,jQuery将其保存为局部变量以提高访问速度。

jquery实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高代码效率。

ES6的了解

新增模板字符串(为JavaScript提供了简单的字符串插值功能)、箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。)、for-of(用来遍历数据—例如数组中的值。)arguments对象可被不定参数和默认参数完美代替。ES6promise对象纳入规范,提供了原生的Promise对象。增加了letconst命令,用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定,var命令和function命令声明的全局变量,属于全局对象的属性;let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。。还有就是引入module模块的概念

js继承方式及其优缺点

原型链继承的缺点

借用构造函数(类式继承)

组合式继承

具体请看:JavaScript继承方式详解

关于Http 2.0 你知道多少?

HTTP/2引入了“服务端推(server push)”的概念,它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中,从而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术,允许多个消息在一个连接上同时交差。

它增加了头压缩(header compression),因此即使非常小的请求,其请求和响应的header都只会占用很小比例的带宽。

defer和async

defer并行加载js文件,会按照页面上script标签的顺序执行 async并行加载js文件,下载完成立即执行,不会按照页面上script标签的顺序执行

谈谈浮动和清除浮动

浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

如何评价AngularJS和BackboneJS

backbone具有依赖性,依赖underscore.jsBackbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.

BackboneModel没有与UI视图数据绑定,而是需要在View中自行操作DOM来更新或读取UI数据。AngularJS与此相反,Model直接与UI视图绑定,Model与UI视图的关系,通过directive封装,AngularJS内置的通用directive,就能实现大部分操作了,也就是说,基本不必关心Model与UI视图的关系,直接操作Model就行了,UI视图自动更新。

AngularJSdirective,你输入特定数据,他就能输出相应UI视图。是一个比较完善的前端MVW框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的 Angular 指令。

用过哪些设计模式?

工厂模式:

构造函数模式

使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题,该模式与工厂模式的不同之处在于:

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念

闭包有三个特性:

1.函数嵌套函数

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

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

具体请看:详解js闭包

请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。

第一:每个特定的域名下最多生成20个cookie

IEOpera 会清理近期最少使用的cookieFirefox会随机清理cookie

cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据,叫做userdata,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。

优点:极高的扩展性和可用性

缺点:

浏览器本地存储

在较高版本的浏览器中,js提供了sessionStorageglobalStorage。在HTML5中提供了localStorage来取代globalStorage

html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie

但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage

localStoragesessionStorage都具有相同的操作方法,例如setItem、getItemremoveItem

cookie 和session 的区别:

display:nonevisibility:hidden的区别?

CSS中link@import的区别是?

position:absolutefloat属性的异同

  • 共同点:对内联元素设置floatabsolute属性,可以让元素脱离文档流,并且可以设置其宽高。
  • 不同点:float仍会占据位置,absolute会覆盖文档流中的其他元素。

介绍一下box-sizing属性?

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

  • content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高
  • border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例:

CSS3有哪些新特性?

CSS3中新增了一种盒模型计算方式:box-sizing。盒模型默认的值是content-box, 新增的值是padding-boxborder-box,几种盒模型计算元素宽高的区别如下:

content-box(默认)

布局所占宽度Width:

布局所占高度Height:

padding-box

布局所占宽度Width:

布局所占高度Height:

border-box

布局所占宽度Width:

布局所占高度Height:

对BFC规范的理解?

说说你对语义化的理解?

Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型?

HTML与XHTML——二者有什么区别

常见兼容性问题?

上下margin重合问题

解释下浮动和它的工作原理?清除浮动的技巧

浮动元素引起的问题和解决办法?

解决方法:

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

清除浮动的几种方法:

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1)创建新节点

2)添加、移除、替换、插入

3)查找

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

移除的元素

支持HTML5新标签:

如何实现浏览器内多个标签页之间的通信?

什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

null和undefined的区别?

null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN

当声明的变量还未被初始化时,变量的默认值为undefined

null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:

null表示”没有对象”,即该处不应该有值。典型用法是:

new操作符具体干了什么呢?

js延迟加载的方式有哪些?

call()apply() 的区别和作用?

作用:动态改变某个类的某个方法的运行环境(执行上下文)。

区别参见:JavaScript学习总结(四)function函数部分

哪些操作会造成内存泄漏?

详见:详解js变量、作用域及内存

列举IE 与其他浏览器不一样的特性?

  • IE支持currentStyle,FIrefox使用getComputStyle
  • IE 使用innerText,Firefox使用textContent
  • 滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num
  • 事件方面:IE:attachEvent:火狐是addEventListener
  • 鼠标位置:IE是event.clientX;火狐是event.pageX
  • IE使用event.srcElement;Firefox使用event.target
  • IE中消除list的原点仅需margin:0即可达到最终效果;FIrefox需要设置margin:0;padding:0以及list-style:none
  • CSS圆角:ie7以下不支持圆角

WEB应用从服务器主动推送Data到客户端有那些方式?

Javascript数据推送

  • Commet:基于HTTP长连接的服务器推送技术
  • 基于WebSocket的推送方案
  • SSE(Server-Send Event):服务器推送数据新方式

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

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

详情:从输入 URL 到浏览器接收的过程中发生了什么事情?

javascript对象的几种创建方式

javascript继承的6种方法

详情:JavaScript继承方式详解

创建ajax的过程

详情:JavaScript学习总结(七)Ajax和Http状态字

异步加载和延迟加载

ie各版本和chrome可以并行下载多少个资源

FlashAjax各自的优缺点,在使用中如何取舍?

  • Flash适合处理多媒体、矢量图形、访问机器;对CSS、处理文本上不足,不容易被搜索。

AjaxCSS、文本支持很好,支持搜索;多媒体、矢量图形、机器访问不足。

  • 共同点:与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制?

我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

缺点:

现在网站的JS 都会进行压缩,一些文件用了严格模式,而另一些没有。这时这些本来是严格模式的文件,被 merge 后,这个串就到了文件的中间,不仅没有指示严格模式,反而在压缩后浪费了字节。

GET和POST的区别,何时使用POST?

事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?

ajax的缺点和在IE下的问题?

详情请见:JavaScript学习总结(七)Ajax和Http状态字

ajax的缺点

IE缓存问题

在IE浏览器下,如果请求的方法是GET,并且请求的URL不变,那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的URL,只要URL改变,就不会被缓存,可以通过在URL末尾添加上随机的时间戳参数('t'= + new Date().getTime())

或者:

Ajax请求的页面历史记录状态问题

可以通过锚点来记录状态,location.hash。让浏览器记录Ajax请求时页面状态的变化。

还可以通过HTML5history.pushState,来实现浏览器地址栏的无刷新改变

谈谈你对重构的理解

网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化, 在扩展的同时保持一致的UI。

HTTP状态码

说说你对Promise的理解

依照 Promise/A+ 的定义,Promise 有四种状态:

另外, fulfilledrejected 一起合称 settled

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。

Promise 的构造函数

构造一个 Promise,最基本的用法如下:

Promise 实例拥有 then 方法(具有 then 方法的对象,通常被称为 thenable)。它的使用方法如下:

接收两个函数作为参数,一个在 fulfilled 的时候被调用,一个在 rejected 的时候被调用,接收参数就是 future,onFulfilled 对应 resolve, onRejected 对应 reject

说说你对前端架构师的理解

负责前端团队的管理及与其他团队的协调工作,提升团队成员能力和整体效率; 带领团队完成研发工具及平台前端部分的设计、研发和维护; 带领团队进行前端领域前沿技术研究及新技术调研,保证团队的技术领先 负责前端开发规范制定、功能模块化设计、公共组件搭建等工作,并组织培训。

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

说说严格模式的限制

严格模式主要有以下限制:

设立”严格模式”的目的,主要有以下几个:

  • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的Javascript做好铺垫。

注:经过测试IE6,7,8,9均不支持严格模式。

如何删除一个cookie

1.将时间设为当前时间往前一点。

setDate()方法用于设置一个月的某一天。

2.expires的设置

<strong><em><b><i>标签

说说你对AMD和Commonjs的理解

CommonJS是服务器端模块的规范,Node.js采用了这个规范。CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。

AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exportsexports的属性赋值来达到暴露模块对象的目的。

详情:也谈webpack及其开发模式

document.write()的用法

document.write()方法可以用在两个方面:页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。

document.write只能重绘整个页面。innerHTML可以重绘页面的一部分

编写一个方法 求一个字符串的字节长度

假设:一个英文字符占用一个字节,一个中文字符占用两个字节

git fetch和git pull的区别

说说你对MVC和MVVM的理解

MVC

所有通信都是单向的。

Angular它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

请解释什么是事件代理

事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。

attribute和property的区别是什么?

attributedom元素在文档中作为html标签拥有的属性;

property就是dom元素在js中作为对象拥有的属性。

所以:

对于html的标准属性来说,attributeproperty是同步的,是会自动更新的,

但是对于自定义的属性来说,他们是不同步的,

说说网络分层里七层模型是哪七层

  • 应用层:应用层、表示层、会话层(从上往下)(HTTP、FTP、SMTP、DNS
  • 传输层(TCPUDP
  • 网络层(IP
  • 物理和数据链路层(以太网)

每一层的作用如下:

各种协议

ICMP协议: 因特网控制报文协议。它是TCP/IP协议族的一个子协议,用于在IP主机、路由器之间传递控制消息。 TFTP协议: 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂、开销不大的文件传输服务。 HTTP协议: 超文本传输协议,是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。DHCP协议: 动态主机配置协议,是一种让系统得以连接到网络上,并获取所需要的配置参数手段。

说说mongoDB和MySQL的区别

MySQL是传统的关系型数据库,MongoDB则是非关系型数据库

mongodbBSON结构(二进制)进行存储,对海量数据存储有着很明显的优势。

对比传统关系型数据库,NoSQL有着非常显著的性能和扩展性优势,与关系型数据库相比,MongoDB的优点有: ①弱一致性(最终一致),更能保证用户的访问速度: ②文档结构的存储方式,能够更便捷的获取数据。

讲讲304缓存的原理

服务器首先产生ETag,服务器可在稍后使用它来判断页面是否已经被修改。本质上,客户端通过将该记号传回服务器要求服务器验证其(客户端)缓存。

304是HTTP状态码,服务器用来标识这个文件没修改,不返回内容,浏览器在接收到个状态码后,会使用浏览器已缓存的文件

客户端请求一个页面(A)。 服务器返回页面A,并在给A加上一个ETag。 客户端展现该页面,并将页面连同ETag一起缓存。 客户再次请求页面A,并将上次请求时服务器返回的ETag一起传递给服务器。 服务器检查该ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304(未修改——Not Modified)和一个空的响应体。

什么样的前端代码是好的

高复用低耦合,这样文件小,好维护,而且好扩展。

代码题

3 42 收藏 2 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部