前端面试题

1.谈谈你对web标准的理解
网页主要由三部分组成:结构层(HTML/xhml/xml)表现层(css) 行为层(js)
结构
HTML超文本标记语言,使用HTML语言描述的文件,需要通过www浏览器显示出效果,是一种最为基础的语言。所谓超文本就是加入图片声音动画影视等内容,因为他可以从一个文件跳转到另外一个文件,与世界各地主机的文件连接。
XHTML是可扩展标识语言的缩写 ,实际上是HTML向xml的一个过渡语言,比HTML严谨性会高点,基本语言还是沿用HTML的标签,只不过废除了部分表现层的标签,同时在标准上要求高了点,比如标签的严格嵌套,标签结束等。
xml可扩展标记语言,最初的设计就是为了弥补HTML的不足,一强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述,占用的空间比二进制数据要占用更多的空间,但xml极其简单易于掌握和使用。
表现
表现语言主要是CSS层叠样式表,通过CSS样式表,W3C创建CSS标准的目的是以CSS取代HTML表格式布局,帧和其他表现语言,通过CSS样式可以使页面的结构标签更具美感。
行为
页面和用户有一定的交互,同时页面结构或者表现发生变化,标准主要包括对象模型ECMAScript并要求三部分分离。
DOM(document object model)文档对象模型的缩写, 是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件,简单来说,DOM给予设计师一个标准的方法,让他们来访问他们站点中的数据,脚本和表现层对象。

2.对W3C的认识
W3C对web标准提出了规范化的要求,也就是实际编程中的一些代码规范。
对于结构的要求
标签字母要小写,标签要闭合,标签不允许随意嵌套;
对于CSS和js的要求
尽量使用外链和js脚本,使得结构表现和行为分为三块,符合规范。同时提高页面的渲染速度,提高用户的体验。
样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性明明要做到见文知义,标签越少,加载越快,用户体验就提高,代码维护也简单,便于改版。
不需要变动页面内容,便可以提高打印版本而不需要复制内容,提高网站易用性。
以上两个问题纯属抄袭原文
3.列举HTML中至少三个实体
实体名称或者实体编号为那些不容易通过键盘键入的符号提供了表达的方法。是提名对大小写敏感。
&(&)、 () 、<(<)、>(>)、®、©
4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何
id选择器 类选择器 标签选择器 相邻选择器 子选择器 后代选择器 通配符选择器 属性选择器 伪类选择器
可继承的样式:font-size font-family color ul li dl dd dt
不可继承的样式
padding margin border width height
优先级
!important >id >class>tag
5.table-layout 和border-collapse有什么用途
table-layout设置表格是否自动调整宽高
border-collapse 表格与单元格之间的边框是否融合 在一起
6.get和post的区别
get:一般用于信息获取,使用URL传递参数,对所发送的信息的数量也有限制,一般在2000个字符之内
post:一般用于修改服务器上的资源,对所发送的信息没有限制。
get是通过地址栏来传值,但是post是通过提交表单来传值
7.iframe有哪些缺点
一个是会阻塞主页面的onload事件,搜索引擎的检索程序无法解读这种页面,不利于SEO二是iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。如果通过JavaScript动态给iframe添加src属性值,就可以避免这两个问题。
8.如何实现浏览器内多个标签页之间的通信
通过websocket sharedworker来实现
9.undefined和null有什么异同
undefined:变量被声明了,但没有赋值的时候
调用函数时,应该提供的参数没有提供,该参数就等于undefined
对象么有赋值的属性
函数没有返回值的时候
null:
作为函数的参数,表示该函数的参数不是对象
作为对象原型链的终点
null代表一个对象变量已经被初始化,但未装入对象。undefined代表未初始化变量。
10.array的join,push,splice,slice各有何用途,splice与slice有何异同
join:使用指定间隔符连接所有元素为字符串
push:在尾部添加元素并维护array实例的length
splice和slice都是截取一部分元素,但是slice返回截取后的新实例,splice在原有的array上操作
11.为验证手机号写一个正则

function checkSubmitMobile(){
if($("#phoneNum").val() == ''"){
alert("手机号不能为空");
$("mobile").focus();
return false;
}
if(!$("#phoneNum").val().match(/^(?:13\d|15\d|18\d)\d{5}(\d{3}|*{3})$/)){
alert("手机号格式不正确");
$("phoneNum").focus();
return false;
}
return false;
}

12.cookies session
cookie是指某些网站为了辨别用户身份,进行session跟踪而储存在用户本地终端上的数据。在默认情况下,cookie是临时存在的,在一个浏览器窗口打开时,可以设置cookie,只要这个窗口没有关闭,cookie就一直有效,在有限期内,当用户发同一个web服务器的时候,浏览器就首先检查本地的cookies,并将其原样发送给web服务器。
cookie的出现,实现了HTTP的会话跟踪,cookie就是服务端发给客户端的一张通行证,并且通过这个通行证来辨别身份
session在访问Tomcat服务器的httpservletrequest的getSession的时候创建,Tomcat的managerBase类提供创建sessionid的方法:随机数+时间+jvmid
13.数组去重

Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i

14.new操作符都干了什么
创建一个空对象,并且this变量引用该对象,同时还继承了该函数的原型。
属性和方法被加入到this引用的对象中
新创建的对象被this所引用,并且最后隐式的返回this
15.call()和apply()的区别和作用
apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。
function.apply(this,[12])
call()第一个参数是上下文,后续是实例传入的参数系列
function.call(this,1,2);
16.如何获取UA(user agent)用户代理
function whatBrowser(){
document.Browser.Name.value = navigator.appName;
document.Browser.Version.value = navigator.appVersion;
document.Browser.Code.value = navigator.appCodeName;
document.Browser.Agent.value = navigator.userAgent;
}

17.同源策略
同源策略是客户端脚本的重要的安全度量标准,它最早出自Netscape navigator2.0 目的是防止某个文档或脚本从多个不同源装在。
同源策略指的是协议 域名 端口相同,是一种安全协议

18.如何使用ajax从服务器端获取数据
创建xmlHTTPrequest对象
使用XMLHTTPrequest对象的open方法(字符串 要访问的服务器的url boolean值)
ajax的回调函数,xhr.readyState==4表示请求已经结束,服务器响应完成
发送ajax请求

19.负责对标业内顶级SAAS和PAAS平台的需求研究,技术研究和实现。
SaaS是software-as-a-service(软件即服务)的简称,SaaS2.0阶段,服务运营商在提供自身核心SaaS应用的的同时,还向各类开发伙伴、行业合作伙伴开放一套具备强大定制能力的快速应用定制平台。要看SaaS产品提供使用的协议,是https://还是一般的http://,别小看这个s,这表明所有的数据在传输过程中都是加密的。如果不加密,网上可能有很多“嗅探器”软件能够轻松的获得您的数据,一个优秀的软件SaaS运营商,运营服务器和网站服务器应该完全隔离的,甚至域名也应该分开。
PaaS:提供给消费者的服务是把客户采用提供的开发语言和工具(例如Java,python, .Net等)开发的或收购的应用程序部署到供应商的云计算基础设施上去。客户不需要管理或控制底层的云基础设施,包括网络、服务器、操作系统、存储等,但客户能控制部署的应用程序,也可能控制运行应用程序的托管环境配置。

20.负责探索前端新的技术框架和边界(Vue.js ElasticSearch ReactNative)
ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口。Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

我们建立一个网站或应用程序,并要添加搜索功能,但是想要完成搜索工作的创建是非常困难的。我们希望搜索解决方案要运行速度快,我们希望能有一个零配置和一个完全免费的搜索模式,我们希望能够简单地使用JSON通过HTTP来索引数据,我们希望我们的搜索服务器始终可用,我们希望能够从一台开始并扩展到数百台,我们要实时搜索,我们要简单的多租户,我们希望建立一个云的解决方案。因此我们利用Elasticsearch来解决所有这些问题及可能出现的更多其它问题。

  1. 负责团队Scrum流程推进和优化
    scrum是迭代式增量软件开发过程,通常用于敏捷软件开发。是一个包括了一系列实践和预定义角色的过程骨架(是一种流程、计划、模式,用于有效率的开发软件)

要求:
1.理解RIA(因特网应用程序)
RIA(Rich Internet Application)丰富互联网程序,具有高度互动性,丰富用户体验以及功能强大的客户端。RIA是集桌面用户程序的最佳用户界面功能、web应用程序的普遍采用和快速、低成本部署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。目前web领域和桌面软件领域正逐步向RIA靠拢。
特点:丰富的数据模型RIA技术提供了多种数据模型来处理客户端复杂的数据操作,使用RIA可以将部分原本在后套程序处理的问题转移到客户端,使数据能够被缓存在客户端,从而可以实现一个比基于HTML的响应速度更快,且数据往返于服务器的次数更少的用户界面。
丰富的界面元素RIA提供了比HTML更为丰富的界面表现元素,密集、响应速度快和图形丰富的页面元素与数据模型结合在一起,给用户提供更好的使用体验。
RIA 具有的桌面应用程序的特点包括:在消息确认和格式编排方面提供互动用户界面;在无刷新页面之下提供快捷的界面响应时间;提供通用的用户界面特性如拖放式(drag and drop)以及在线和离线操作能力。客户机在RIA中的作用不仅是展示页面,它可以在幕后与用户请求异步地进行计算、传送和检索数据、显示集成的用户界面和综合使用声音和图像,这一切都可以在不依靠客户机连接的服务器或后端的情况下进行。
22.熟悉B/S架构
B/S结构,即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构。在这种结构下,用户界面完全通过WWW浏览器实现,一部分事务逻辑在前端实现,但是主要事务逻辑在服务器端实现,形成所谓3-tier结构。B/S结构,主要是利用了不断成熟的WWW浏览器技术,结合浏览器的多种Script语言(VBScript、JavaScript…)和ActiveX技术,用通用浏览器就实现了原来需要复杂专用软件才能实现的强大功能,并节约了开发成本,是一种全新的软件系统构造技术。随着Windows 98/Windows 2000将浏览器技术植入操作系统内部,这种结构更成为当今应用软件的首选体系结构。
优点:
(1)、具有分布性特点,可以随时随地进行查询、浏览等业务处理。
(2)、业务扩展简单方便,通过增加页面即可增加服务器功能。
(3)、维护简单方便,只需要改变网面,即可实现所有用户的同步更新。
(4)、共享性强

1.Git和SVN的区别
Git是分布式的,而SVN不是。
Git和SVN一样有自己集中的版本库和服务器,但是Git更倾向于被使用在分布式模式,就是每个开发人员都可以从中心版本库/服务器上check out代码后在自己的机器上克隆一个自己的版本库,这样如果遇到没有网的情况仍然能够提交文件,查看历史记录,创建项目分支等。而且对于开源软件开发的优势是明显的,只需要创建一个分支,向项目团队发送一个推请求,这让你的代码保持最新,而且不会再传输过程中丢失。
Git把内容按元数据方式存储,而SVN是按照文件存储的。
所有的资源控制系统都是把文件的元信息隐藏咋一个类似.svn,.cvs等的文件夹里,但是.git目录是处于你机器上的一个克隆版的版本库,它拥有中心版本库上所有的东西。
Git分支和SVN的分支不同。
SVN的分支就是版本库中的另外一个目录。如果你想看是否合并了分支,只要 svn propget svn:mergeinfo来确认即可。但是Git的分支处理相当简单,可以在同一个工作目录下快速的在激光分支间切换。
Git内容的完整性也要优于SVN。
Git的内容存储使用的是SHA-1哈希算法,确保代码内容的完整性。
Git没有一个全局的版本号,但是SVN有
2.jsonp的原理
json是一种轻量级的数据传输格式,被广泛应用于web中,json格式的数据编码和解析基本上都能够在主流语言中被实现,所以大部分前后端分离的架构都用json格式进行数据的传输。
主要原理是为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面,在ajax中,不允许请求非同源的URL,ajax请求受同源策略的影响,不允许跨域请求,但是script标签中src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回json格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
下面使用JSONP,将前端代码中的ajax请求去掉,添加了一个script标签,标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本




    GoJSONP







这里调用了跨域的remote.js脚本

jsonhandle({
"age":15,
"name":"john"
})

3.Iframe自适应高度
直接上代码










另外一种方法,当窗口改变大小的时候执行js事件,以让iframe自适应高度。那么就需要将相关的代码写成函数,并且给iframe加上onLoad="changeFrameHeight()"


js代码

function changeFrameHeight(){
var iframe = document.getElementById('myiframe');
iframe.height = document.documentElement.clientHeight;
}
window.onresize = function(){
changeFrameHeight();
}

4.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
查找浏览器缓存》DNS解析,查找域名对应的IP地址,重定向发出第二个get请求》进行HTTP协议会话》客户端发送报头》服务器回馈报头》HTML文档开始下载》文档树建立,根据标记请求所需指定mime类型的文件》文件显示
5.线程和进程的区别
进程是调度的最小单位,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。多线程的意义在于一个应用程序中,有多个执行部分可以同时执行,但是操作系统并没有将多个线程看做是朵儿独立的应用,来实现进程的调度和管理以及资源分配。
6.哪些常见操作会造成内存泄漏
内存泄漏是指任何对象在不再拥有和需要的之后仍然存在。垃圾回收器定期扫描对象,发现一个对象被引用和引用其他的数量是0,或者对该对象的唯一引用是循环的,那么就可以回收内存了。settimeout的第一个参数使用字符串而非函数的话,会引发内存泄漏。闭包、控制台日志、循环。
7.哪些可以性能优化的方法
减少http请求次数,网页GzipCDN托管 data缓存 图片服务器
减少由于HTML标签导致的带宽浪费 前端用变量保存ajax请求结果,每次操作本地变量,不用请求,减少请求次数。
用innerHTML代替DOM操作,减少DOM操作次数,优化JavaScript性能。
8.http状态码
100:continue继续,一般在发送post请求,已经发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息。
200:OK 正常返回信息
201 created请求成功并且服务器创建了新资源
202accept服务器已经接受请求,但是尚未处理
301moved permanently 请求的网页已永久移动到新位置
302found 临时性重定向
303see other 临时性重定向 且总是使用get请求新的url
400 bad request 服务器无法理解请求的格式 客户端不应该再次尝试使用相同的内容发起请求
401请求没有授权
403禁止访问
404找不到如何与URL相匹配的资源
500internal server error最常见的服务器端错误
503 服务器端暂时无法处理请求
9.你知道jQuery插件吗?你了解jQuery执行原理和插件机制吗?你都用过哪些jQuery插件?
原理是扩展jQuery本身及其核心函数的原型实现,可以调用其extend实现对它的扩展。
jQuery插件很多,jQueryUI jQuery-cookie jQuery-timer
10.如何获取一个元素的实际位置
使用position()offset()都可以
绝对位置坐标

$('elem').offset().top
$('elem').offset.left

相对父元素的位置坐标

$('elem').position().top
$('elem').position().left

11.如何使用从服务器获取一个复杂的数据
通常将这个数据转换为通用的数据交换格式,如XML或者json,由于xml解析麻烦,一般使用json,在jQuery中有专门的获取服务器json数据的方法,在回调中,jQuery会自动将json转换为JavaScript对象。
如何向页面插入节点
调用append方法,将新节点作为参数

12.列举JavaScript中typeof操作符的可能结果,如何区分:{}和[]类型?
可能结果有:number string boolean object function symbol undefined
区分类型就可以用instanceof
{} instanceof Array //报错
[] instanceof Array//true

附加一个判断一个变量是不是数组的方法
首先typeof是不行的,他会判断array是一个object类型。
用instanceof方法是可行的,如上述
除了instanceof,每个对象还有constructor属性,利用他也可以进行array的判断
arr.constrctor === Array //true
以上两种放大在多个iframe中来回穿梭的时候,检测方法就失效了。下面提供两种方法,无懈可击。
object.prototype.toString

function isArrayFn (o) { 
return Object.prototype.toString.call(o) === '[object Array]'; 
} 
var arr = [1,2,3,1]; 
alert(isArrayFn(arr));// true 

还有一个ECMAScript5将Array.isArray()正式引入JavaScript,目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。

13.js中call,apply,bind的方法的区别和使用场景
所有的函数在被调用的时候都默认传入两个参数,一个是this,还有一个是arguments。在默认的情况下this都是指向当前调用函数的对象,但是有的时候需要改变this的指向,就是说使函数可以被其他对象来调用,这个时候就可以用call apply bind方法了。
call apply bind都是function原型中的方法,所有的函数都是function的实例
他们在功能上是没有区别的,都是改变this的指向,区别在于放放的实现形式和参数传递上的不同。
函数.call(对象,arg1,arg2...)
函数.apply(对象,[arg1,arg2,...])
var ss = 函数.bind(对象,arg1,arg2,....)

14.设计一个算法,将两个有序数组合并为一个数组(不用concat和sort方法)

function merge(left,right){
var result = [],
il = 0;
ir = 0;
while(il < left.length&& ir

15.data-xxx属性的作用是什么
data-xxx属性用于存储页面或者应用程序的私有自定义数据。
data-xxx属性赋予了我们在所有HTML元素上嵌入自定义data属性的能力。存储的数据能够被页面的JavaScript利用,以创建更好的用户体验(不进行ajax调用或服务器端数据库查询)
data-xxx属性包括:
属性名不应该包含任何大写字母,并且在前缀“data-”之后必须有至少一个字符
属性值可以是任意字符串
16.JavaScript中引用数据类型和基本数据类型的区别
基本数据类型有stirng number boolean null undefined是存储在栈内存中的,基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。
引用数据类型有Array object function , 是保存在堆内存中的对象,你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。所以,引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。
17.valueof()和toString()的区别
valueOf()会把数据类型转换成原始类型,也就是说原来是什么类型,转换后还是什么类型,日期类型除外
toString()会把数据类型转换成string类型,也就是说不管原来是什么类型,转换后一律是string类型
在强制数字的情况下优先调用valueof(),valueof偏向于运算,tostring偏向于显示,当调用valueof方法后无法运算还是调用tostring()方法。
18.关于absolute定位的问题
参考
或者这个
19.JavaScript中==和===的区别
=== 表示恒等,首先比较两边的变量数据类型是否相等,其次比较两边的变量的数值是否相等;== 表示相等即仅仅比较两边变量的数值是否相等。
===类型不一样,则不相等
===类型一样,数值不一样,也不相等
null === undefined //false
null === null //true
NaN和谁都不等
20.XSS
跨站脚本攻击,是发生在目标用户的浏览器的层面上的,当渲染DOM树的过程发生了不在预期内执行的JS代码时,就发生了XSS攻击。大多数的XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码,实际上是在目标网站的作用域下执行了这段JS代码。
反射型XSS,也叫非持久性XSS,首先是出现在URL中,然后作为参数提交给服务器,服务器端解析并响应,响应结果包含XSS代码,最后需要浏览器解析之后XSS才能攻击。
存储型xss,就是持久性的XSS,主要是将XSS代码发送到服务器,然后在下次请求页面的时候就不用戴上XSS代码了。最典型的是留言板XSS,用户提交了一条包含XSS代码的留言到数据库,当目标用户查询留言的时候,那些留言的内容会从服务器解析之后加载出来,浏览器发现XSS代码,就当做正常的HTML和JS解析执行,XSS攻击就发生了。
DOM XSS代码不需要服务器端的解析响应的直接参与,而是通过浏览器端的DOM解析。完全是客户端的事情。这种攻击可能发生在我们编写JS代码造成们知道eval语句有一个作用是将一段字符串转换为真正的JS语句,因此在JS中使用eval是很危险的事情,容易造成XSS攻击。避免使用eval语句。
解决方法如下

对cookie的保护

对重要的cookie设置httpOnly, 防止客户端通过document.cookie读取cookie。服务端可以设置此字段。
对用户输入数据的处理

编码:不能对用户输入的内容都保持原样,对用户输入的数据进行字符实体编码。对于字符实体的概念可以参考文章底部给出的参考链接。
解码:原样显示内容的时候必须解码,不然显示不到内容了。
过滤:把输入的一些不合法的东西都过滤掉,从而保证安全性。如移除用户上传的DOM属性,如onerror,移除用户上传的Style节点,iframe, script节点等。

你可能感兴趣的:(前端面试题)