前端面试题
$HTML, HTTP,web综合问题
1、前端需要注意哪些SEO?
- 合理的title、description、keywords、语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前,重要内容不要用js输出:爬虫不会执行js获取内容
- 少用iframe:搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度
2、<img>的title和alt有什么区别?
- title是global attributes之一,用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
- alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
3、HTTP的几种请求方法用途?
OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法。或利用向Web服务器发送‘*‘的请求来测试服务器的功能性。
HEAD:向服务器索要与GET请求相一致的响应,响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应消息头中的元信息。
GET:向特定的资源发出请求。
POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
PUT:向指定资源位置上传其最新内容。
DELETE:请求服务器删除Request-URI所标识的资源。
TRACE:回显服务器收到的请求,主要用于测试或诊断。
CONNECT:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。虽
4、从浏览器地址栏输入url到显示页面的步骤
- 查看缓存
- 解析url:协议、网络地址、资源路径
- 服务器接受请求并处理请求
- 检查HTTP请求头是否包含缓存验证信息,是否返回304
- 服务器封装一个HTTP响应报文
- 3XX重定向响应
- 解码(gzip)
- 解析html文档,增量构建DOM树,下载资源,构建CSSOM,执行js脚本
- 根据DOM树和CSSOM树,构建RenderTree(渲染树)
- Layout计算需要渲染的节点的大小和位置
节点位置和大小是基于viewport计算的。
在移动端通常将viewport设为浏览器推荐的理想视口,以保证字体显示大小易于阅读
旋转屏幕、修改浏览器窗口大小,修改位置大小相关的CSS属性,都可能触发Layout - Paint绘制像素点
根据background, border, box-shadow等样式,将Layout生成的区域填充为最终将显示在屏幕上的像素
5、如何进行网站性能优化
尽可能减少HTTP请求:图片合并 (css sprites),Js脚本文件合并、css文件合并、减少DNS查询、将css放在页面最上面,将js放在页面最下面、压缩js和css、把js和css提取出来放在外部文件中、避免重定向7、移除重复脚本、配置实体标签Etag、使用ajax缓存、使用Gzip压缩、使用CDN(内容分发网络)、在css中避免expression表达式、添加expire/cache-control头。
6、HTTP状态码及其含义
成功2×× 成功处理了请求的状态码。
200 服务器已成功处理了请求并提供了请求的网页。
204 服务器成功处理了请求,但没有返回任何内容。
重定向3×× 每次请求中使用重定向不要超过 5 次。
301 请求的网页已永久移动到新位置。当URLs发生变化时,使用301代码。搜索引擎索引中保存新的URL。
302 请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。
304 如果网页自请求者上次请求后没有更新,则用304代码告诉搜索引擎机器人,可节省带宽和开销。
客户端错误4×× 表示请求可能出错,妨碍了服务器的处理。
400 服务器不理解请求的语法。
403 服务器拒绝请求。
404 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。
410 请求的资源永久删除后,服务器返回此响应。该代码与 404(未找到)代码相似,但在资源以前存在而现在不存在的情况下,有时用来替代404 代码。如果资源已永久删除,应当使用 301 指定资源的新位置。
服务器错误5×× 表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。
500 服务器遇到错误,无法完成请求。
503 服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。
7、语义化的理解
HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。
8、介绍一下你对浏览器内核的理解
浏览器的内核是分为两个部分的,一是渲染引擎,另一个是JS引擎。现在JS引擎比较独立,内核更加倾向于说渲染引擎。
1、Trident内核:代表作品是IE,因IE捆绑在Windows中,所以占有极高的份额,又称为IE内核或MSHTML,此内核只能用于Windows平台。
代表作品还有腾讯、Maxthon(遨游)、360浏览器等。
存在很多的兼容性问题。
2、Gecko内核:代表作品是Firefox,即火狐浏览器。
3、Webkit内核:代表作品是Safari、曾经的Chrome。
4、Presto内核:代表作品是Opera,Presto是由Opera Software开发的浏览器排版引擎,它是世界公认最快的渲染速度的引擎。在13年之后,Opera宣布加入谷歌阵营,弃用了Presto
5、Blink内核:由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎,V8,使JS运行速度极大地提高了
9、html5有哪些新特性、移除了那些元素?
*HTML5 现在已经不是SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
*绘画canvas
用于媒介回放的video 和audio 元素
本地离线存储localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
新的技术webworker,websockt, Geolocation
*移除的元素
纯表现的元素:basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
*IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式:
*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
10、HTML5的离线储存怎么使用,工作原理能不能解释一下?
原理:HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
方法:
1.在index.html里加上<html manifest="test.manifest">
2.manifest清单格式如下:
CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
3.manifest文件的mime-type必须是 text/cache-manifest类型。
11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。
12、请描述一下 cookies,sessionStorage 和 localStorage 的区别
cookie 是网站为了标识用户信息而存储在本地(client side)上的数据,一般会加密
cookie数据始终在同源请求中传递,即在浏览器和服务器之间来回传递
seesionstorage 和 localstorage 不会把数据发到服务器,仅在本地保存
存储大小,cookie的大小不能超过4k
sessionstorage 和 localstorage 的大小一般在5M以上,比cookie大的多
有效时间不同
localstorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
sessionstorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期之前一直有效,即使窗口或者浏览器关闭
13、iframe有那些缺点?
1.会产生很多页面,不容易管理。
2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。 分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。
14、WEB标准以及W3C标准是什么?
Web标准是W3C组织和其它标准化组织制定的一套规范集合,包含了一系列标准:HTML、XHTML、Javascript以及CSS等。
15、xhtml和html有什么区别?
所有标签都必须小写
标签必须成双成对
标签顺序必须正确
所有属性都必须使用双引号
不允许使用target="_blank"
16、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
(1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
(2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
17、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?
块级元素:
<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
行内元素:
<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>
空元素(void):
<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>
18、HTML全局属性(global attribute)有哪些
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名(引用样式表中的类)。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
$CSS部分
1、css sprite是什么,有什么优缺点
CSS Sprite技术所白了就是图片拼合技术,使用这个技术的优点就是减少页面加载时的瞬间HTTP请求并发数,提高了加载速度
缺点是这些被整合到一张图片的各种小图案后期维护修改比较麻烦,修改任意一个小图案都需要修改这张整图,同时还需要注意小图片在这个整图上的位置不能改变
2、display: none;与visibility: hidden;的区别
display:none 不为被隐藏的对象保留其物理空间 visibility:hidden 为被隐藏的对象保留其物理空间
也就是display:;当他的值变成block 的时候,它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了,因为他的值为hidden的时候,它所占的空间还在。
3、link与@import的区别
Link属于html标签,而@import是CSS中提供的
在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS
@import只有在ie5以上才可以被识别,而link是html标签,不存在浏览器兼容性问题
Link引入样式的权重大于@import的引用(@import是将引用的样式导入到当前的页面中)
4、什么是FOUC?如何避免
如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,
这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.
5、如何创建块级格式化上下文(block formatting context),BFC有什么用
float的值不为”none” (如:float:left/right)
overflow的值不为”visible”(如:overflow:hidden)
display的值为“table-cell”,“table-caption”, or “inline-block”中的任何一个
position的值不为“static”或 “relative”中的任何一个(如:position:absolute)等
作用: 1.包含浮动元素
2.不被浮动元素覆盖
7、清除浮动的几种方式,各自的优缺点
父级div定义height,优点:简单,代码少,容易掌握,缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
结尾处加空div标签clear:both,优点:简单,代码少,浏览器支持好,不容易出现怪问题,缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽。
父级div定义伪类:after和zoom,优点:浏览器支持好,不容易出现怪问题,缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
父级div定义overflow:hidden,优点:简单,代码少,容易掌握,缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
父级div定义overflow:auto,优点:简单,代码少,浏览器支持好,缺点:内部宽高超过父级div时,会出现滚动条。
父级div也一起浮动,缺点:会产生新的浮动问题。
父级div定义display:table缺点:会产生新的未知问题
结尾处加br标签clear:both,不建议使用
8、为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小,字体设置。
9、css3有哪些新特性
1. CSS3实现圆角(border-radius),阴影(box-shadow),边框图片border-image
2. 对文字加特效(text-shadow、),强制文本换行(word-wrap),线性渐变(linear-gradient)
3.旋转,缩放,定位,倾斜:transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
4. 增加了更多的CSS选择器、多背景、rgba();
5. 在CSS3中唯一引入的伪元素是 ::selection ;
6. 媒体查询(@media),多栏布局(flex)
10、display有哪些值?说明他们的作用
11、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
IE 的content部分包含了 border 和 pading;
标准 W3C 盒子模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
12、CSS优先级算法如何计算?
!important > id > class > tag
13、对BFC规范的理解?
BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
14、谈谈浮动和清除浮动
15、position的值, relative和absolute`定位原点是
relative(相对定位):定位原点是元素本身所在位置;
absolute(绝对定位):定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
16、display:inline-block 什么时候不会显示间隙?(携程)
父加上样式 font-size:0;
17、PNG,GIF,JPG的区别及如何选
GIF
- 8 位像素, 256 色
- 无损压缩
- 支持简单动画
- 支持 boolean 透明
- 适合简单动画
JPEG
- 颜色限于 256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
PNG
- 有 PNG8 和 truecolor PNG
- PNG8 类似 GIF 颜色上限为 256 ,文件小,支持 alpha 透明度,无动画
- 适合图标、背景、按钮
$JavaScript
1、闭包
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
优点:封装性,方便调用。可以简单理解成“定义在一个函数内部的函数“。
所以,在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
缺点:在IE浏览器下会造成内存泄漏问题,其他浏览器容易引起内存浪费问题。滥用闭包,会造成网页的性能问题。
特性:
- 函数内再嵌套函数
- 内部函数可以引用外层的参数和变量
- 参数和变量不会被垃圾回收机制回收
2、说说你对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到 window 对象即被终止,作用域链向下访问变量是不被允许的
简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期
3、JavaScript原型,原型链 ? 有什么特点?
每个对象都会在其内部初始化一个属性,就是 prototype (原型),当我们访问一个对象的属性时
如果这个对象内部不存在这个属性,那么他就会去 prototype 里找这个属性,这 个prototype 又会有自己的 prototype ,于是就这样一直找下去,也就是我们平时所说的原型链的概念
关系: instance.constructor.prototype = instance.__proto__
特点:
JavaScript 对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变
当我们需要一个属性的时, Javascript 引擎会先看当前对象中是否有这个属性, 如果没有的
就会查找他的 Prototype 对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象
4、请解释什么是事件代理
- 事件代理( Event Delegation ),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
- 可以大量节省内存占用,减少事件注册,比如在 table 上代理所有 td 的 click 事件就非常棒
- 可以实现当新增子对象时无需再次对其绑定
5、Javascript如何实现继承?
- 构造继承
- 原型继承
- 实例继承
- 拷贝继承
原型 prototype 机制或 apply 和 call 方法去实现较简单,建议使用构造函数与原型混合方式
functionParent(){
this.name = 'wang';
}
functionChild(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent,通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
}
6、谈谈This对象的理解
- this 总是指向函数的直接调用者(而非间接调用者)
- 如果有 new 关键字, this 指向 new 出来的那个对象
- 在事件中,this 指向触发这个事件的对象,特殊的是, IE 中的 attachEvent 中的 this总是指向全局对象 Window
- 冒泡型事件:当你使用事件冒泡时,子级元素先触发,父级元素后触发
- 捕获型事件:当你使用事件捕获时,父级元素先触发,子级元素后触发
- DOM 事件流:同时支持两种事件模型:捕获型事件和冒泡型事件
- 阻止冒泡:在 W3c 中,使用 stopPropagation() 方法;在IE下设置 cancelBubble = true
- 阻止捕获:阻止事件的默认行为,例如 click - <a> 后的跳转。在 W3c 中,使用 preventDefault() 方法,在 IE 下设置 window.event.returnValue = false
- 创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型
- 属性和方法被加入到 this 引用的对象中
- 新创建的对象由 this 所引用,并且最后隐式的返回 this
7、事件模型
8、new操作符具体干了什么呢?
9、Ajax原理
Ajax 的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎),通过 XmlHttpRequest 对象来向服务器发异步请求,从服务器获得数据,然后用 javascrip t来操作 DOM 而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据
Ajax 的过程只涉及JavaScript 、XMLHttpRequest 和 DOM 。
XMLHttpRequest 是 aja x的核心机制
// 1. 创建连接
var xhr = null;
xhr = new XMLHttpRequest()
// 2. 连接服务器
xhr.open('get', url, true)
// 3. 发送请求
xhr.send(null);
// 4. 接受请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else { // fail
fail && fail(xhr.status);
}
}
}
10、如何解决跨域问题?
- jsonp 、 iframe 、 window.name 、 window.postMessage 、服务器上设置代理页面
- 立即执行函数,不暴露私有成员
11、模块化开发怎么做?
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
12、异步加载JS的方式有哪些?
- defer,只支持 IE
- async :
- 创建 script ,插入到 DOM 中,加载完毕后 callBack
- 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
- setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏
- 闭包使用不当
13、那些操作会造成内存泄漏?
14、XML和JSON的区别?
数据体积方面
JSON 相对 于XML 来讲,数据的体积小,传递的速度更快些。
数据交互方面
JSON 与 JavaScript 的交互更加方便,更容易解析处理,更好的数据交互
数据描述方面
JSON 对数据的描述性比 XML 较差
传输速度方面
JSON 的速度要远远快于 XML
15、谈谈你对webpack的看法
- WebPack 是一个模块打包工具,你可以使用 WebPack 管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包 Web 开发中所用到的 HTML 、 Javascript 、 CSS 以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源, webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源
- CommonJS 是服务器端模块的规范, Node.js 采用了这个规范。 CommonJS 规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。 AMD 规范则是非同步加载模块,允许指定回调函数
- AMD 推荐的风格通过返回一个对象做为模块对象, CommonJS 的风格通过对 module.exports或 exports 的属性赋值来达到暴露模块对象的目的
16、说说你对AMD和Commonjs的理解
17、常见web安全及防护原理
sql 注入原理
就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令
总的来说有以下几点
永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双 "-" 进行转换等
永远不要使用动态拼装SQL,可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取
永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接
不要把机密信息明文存放,请加密或者 hash 掉密码和敏感的信息
XSS原理及防范
- Xss(cross-site scripting) 攻击指的是攻击者往 Web 页面里插入恶意 html 标签或者 javascript 代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取 cookie 中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点
- 首先代码里对用户输入的地方和变量都需要仔细检查长度和对 ”<”,”>”,”;”,”’” 等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把 html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击
XSS防范方法
XSS与CSRF有什么区别吗?
XSS 是获取信息,不需要提前知道其他用户页面的代码和数据包。 CSRF 是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。要完成一次 CSRF 攻击,受害者必须依次完成两个步骤
登录受信任网站 A ,并在本地生成 Cookie
- 在不登出 A 的情况下,访问危险网站 B
- 服务端的 CSRF 方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数
- 通过验证码的方法
CSRF的防御
18、用过哪些设计模式?
工厂模式:
工厂模式解决了重复实例化的问题,但还有一个问题,那就是识别问题,因为根本无法
主要好处就是可以消除对象间的耦合,通过使用工程方法而不是 new 关键字
构造函数模式
使用构造函数的方法,即解决了重复实例化的问题,又解决了对象识别的问题,该模式与工厂模式的不同之处在于
直接将属性和方法赋值给 this 对象;
19、为什么要有同源限制?
- 同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议
- 举例说明:比如一个黑客程序,他利用 Iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容,这样用户名,密码就轻松到手了。
- offsetWidth/offsetHeight 返回值包含 content + padding + border ,效果与e.getBoundingClientRect()相同
- clientWidth/clientHeight 返回值只包含 content + padding ,如果有滚动条,也 不包含滚动条
- scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
- 对象字面量: var obj = {};
- 构造函数: var obj = new Object();
- Object.create(): var obj = Object.create(Object.prototype);
20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
21、javascript有哪些方法定义对象
22、常见兼容性问题?
png24 位的图片在iE6浏览器上出现背景,解决方案是做成 PNG8
浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin:0;padding:0;} 来统一,,但是全局效率很低,一般是如下这样解决:
body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
IE 下, event 对象有 x , y 属性,但是没有 pageX , pageY 属性
Firefox 下, event 对象有 pageX , pageY 属性,但是没有 x,y 属性.
22、说说你对promise的了解
依照 Promise/A+ 的定义, Promise 有四种状态:
pending: 初始状态, 非 fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失败的操作.
settled: Promise 已被 fulfilled 或 rejected ,且不是 pending
另外, fulfilled 与 rejected 一起合称 settled
Promise 对象用来进行延迟( deferred ) 和异步( asynchronous ) 计算
Promise 的构造函数
构造一个 Promise ,最基本的用法如下:
var promise = new Promise(function(resolve, reject){
if (...) { // succeed
resolve(result);
} else { // fails
reject(Error(errMessage));
}
});
Promise 实例拥有 then 方法(具有 then 方法的对象,通常被称为 thenable )。它的使用方法如下:
promise.then(onFulfilled, onRejected)
接收两个函数作为参数,一个在 fulfilled 的时候被调用,一个在 rejected 的时候被调用,接收参数就是 future , onFulfilled 对应 resolve , onRejected 对应 reject
23、你觉得jQuery源码有哪些写的好的地方
jquery 源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入 window 对象参数,可以使 window 对象作为局部变量使用,好处是当 jquery 中访问 window 对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window对象。同样,传入 undefined 参数,可以缩短查找 undefined 时的作用域链
jquery 将一些原型属性和方法封装在了 jquery.prototype 中,为了缩短名称,又赋值给了jquery.fn ,这是很形象的写法
有一些数组或对象的方法经常能使用到, jQuery 将其保存为局部变量以提高访问速度
jquery 实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高代码效率
24、vue、react、angular
Vue.js
一个用于创建 web 交互界面的库,是一个精简的 MVVM 。它通过双向数据绑定把 View 层和Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters
AngularJS
是一个比较完善的前端 MVVM 框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,自带了丰富的 Angular 指令
react
React 仅仅是 VIEW 层是 facebook 公司。推出的一个用于构建 UI 的一个库,能够实现服务器端的渲染。用了 virtual dom ,所以性能很好。
25、Node的应用场景
特点:
1、它是一个 Javascript 运行环境
2、依赖于 Chrome V8 引擎进行代码解释
3、事件驱动
4、非阻塞 I/O
5、单进程,单线程
优点:
高并发(最重要的优点)
缺点:
1、只支持单 核CPU ,不能充分利用 CPU
2、可靠性低,一旦代码某个环节崩溃,整个系统都崩溃
26、谈谈你对AMD、CMD的理解
CommonJS 是服务器端模块的规范, Node.js 采用了这个规范。 CommonJS 规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。 AMD 规范则是非同步加载模块,允许指定回调函数
AMD 推荐的风格通过返回一个对象做为模块对象, CommonJS 的风格通过对 module.exports或 exports 的属性赋值来达到暴露模块对象的目的
27、那些操作会造成内存泄漏?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
28、web开发中会话跟踪的方法有哪些
cookie
session
url 重写
隐藏 input
ip 地址
29、介绍js的基本数据类型
Undefined 、 Null 、 Boolean 、 Number 、 String
30、介绍js有哪些内置对象?
Object 是 JavaScript 中所有对象的父对象
数据封装类对象: Object 、 Array 、 Boolean 、 Number 和 String
其他对象: Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error
31、说几条写JavaScript的基本规范?
不要在同一行声明多个变量
请使用 ===/!== 来比较 true/false 或者数值
使用对象字面量替代 new Array 这种形式
不要使用全局函数
Switch 语句必须带有 default 分支
If 语句必须使用大括号
for-in 循环中的变量 应该使用 var 关键字明确限定作用域,从而避免作用域污
32、JavaScript有几种类型的值?,你能画一下他们的内存图吗?
栈:原始数据类型( Undefined , Null , Boolean , Numbe r、 String )
堆:引用数据类型(对象、数组和函数)
两种类型的区别是:存储位置不同;
原始数据类型直接存储在栈( stack )中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;
引用数据类型存储在堆( heap )中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其
在栈中的地址,取得地址后从堆中获得实体
33、javascript创建对象的几种方式?
javascript 创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用 JSON ;但写法有很多种,也能混合使用
对象字面量的方式
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
用 function 来模拟无参的构造函数
functionPerson(){}
var person=new Person();//定义一个function,如果使用new"实例化",该function可以看作是一个Class
person.name="Mark";
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();
用 function 来模拟参构造函数来实现(用 this 关键字定义构造的上下文属性)
functionPet(name,age,hobby){
this.name=name;//this作用域:当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
}
}
var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
maidou.eat();//调用eat方法
用工厂方式来创建(内置对象)
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
用原型方式来创建
function Dog(){
}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
用混合方式来创建
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+",我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
34、eval是做什么的?
它的功能是把对应的字符串解析成 JS 代码并运行
应该避免使用 eval ,不安全,非常耗性能( 2 次,一次解析成 js 语句,一次执行)
由 JSON 字符串转换为JSON对象的时候可以用 eval,var obj =eval('('+ str +')')
35、null,undefined 的区别?
undefined 表示不存在这个值。
undefined :是一个表示”无”的原始值或者说表示”缺少值”,就是此处应该有一个值,但是还没有定义。当尝试读取时会返回 undefined
例如变量被声明了,但没有赋值时,就等于 undefined
null 表示一个对象被定义了,值为“空值”
null : 是一个对象(空对象, 没有任何属性和方法)
例如作为函数的参数,表示该函数的参数不是对象;
在验证 null 时,一定要使用 === ,因为 == 无法分别 null 和 undefined
36、[“1”, “2”, “3”].map(parseInt) 答案是多少?
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) ,其中 radix 表示解析时用的基数。
map 传了 3 个 (element, index, array) ,对应的 radix 不合法导致解析失败。
37、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?
use strict 是一种 ECMAscript 5 添加的(严格)运行模式,这种模式使得 Javascript 在更严格的条件下运行,使 JS 编码更加规范化的模式,消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为
38、JSON 的了解?**
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
它是基于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小
JSON 字符串转换为JSON对象:
var obj =eval('('+ str +')');var obj = str.parseJSON();var obj = JSON.parse(str);
JSON 对象转换为JSON字符串:
var last=obj.toJSONString();var last=JSON.stringify(obj);
39、js延迟加载的方式有哪些?
defer 和 async 、动态创建 DOM 方式(用得最多)、按需异步载入 js
40、同步和异步的区别?
同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作
异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容
41、渐进增强和优雅降级
渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
42、defer和async
defer 并行加载 js 文件,会按照页面上 script 标签的顺序执行
async 并行加载 js 文件,下载完成立即执行,不会按照页面上 script 标签的顺序执行
43、说说严格模式的限制
- 变量必须声明后再使用
- 函数的参数不能有同名属性,否则报错
- 不能使用 with 语句
- 禁止 this 指向全局对象
44、attribute和property的区别是什么?
attribute 是 dom 元素在文档中作为 html 标签拥有的属性;
property 就是 dom 元素在 js 中作为对象拥有的属性。
对于 html 的标准属性来说, attribute 和 property 是同步的,是会自动更新的
但是对于自定义的属性来说,他们是不同步的
45、谈谈你对ES6的理解
- 新增模板字符串(为 JavaScript 提供了简单的字符串插值功能)
- 箭头函数
- for-of (用来遍历数据—例如数组中的值。)
- arguments 对象可被不定参数和默认参数完美代替。
- ES6 将p romise 对象纳入规范,提供了原生的 Promise 对象。
- 增加了 let 和 const 命令,用来声明变量。
- 增加了块级作用域。
- let 命令实际上就增加了块级作用域。
- 还有就是引入 module 模块的概念
$编程题
1、写一个通用的事件侦听器函数
// event(事件)工具集,来源:github.com/markyun
markyun.Event = {
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler){
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function(){
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
stopPropagation : function(ev){
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event){
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event){
return event.target || event.srcElement;
}
2、如何判断一个对象是否为数组
functionisArray(arg){
if (typeof arg === 'object') {
return Object.prototype.toString.call(arg) === '[object Array]';
}
return false;
}
3、冒泡排序
每次比较相邻的两个数,如果后一个比前一个小,换位置
var arr = [3, 1, 4, 6, 5, 7, 2];
functionbubbleSort(arr){for (var i = 0; i < arr.length - 1; i++) {
for(var j = 0; j < arr.length - 1; j++) {
if(arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}return arr;
}
console.log(bubbleSort(arr));
4、快速排序
- 采用二分法,取出中间数,数组每次和中间数比较,小的放到左边,大的放到右边
var arr = [3, 1, 4, 6, 5, 7, 2];
functionquickSort(arr){
if(arr.length == 0) {
return []; // 返回空数组
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
} else {
r.push(arr[i]);
}
}
return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
5、编写一个方法 求一个字符串的字节长度
假设:一个英文字符占用一个字节,一个中文字符占用两个字节
functionGetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(GetBytes("你好,as"));
$其他
1、谈谈你对重构的理解
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化, 在扩展的同时保持一致的UI
对于传统的网站来说重构通常是:
表格( table )布局改为 DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的 CSS 、如对IE6有效的)
对于移动平台的优化
针对于 SEO 进行优化
2、什么样的前端代码是好的
- 高复用低耦合,这样文件小,好维护,而且好扩展。
3、对前端工程师这个职位是怎么样理解的?它的前景会怎么样?
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近
实现界面交互
提升用户体验
有了Node.js,前端可以实现服务端的一些事情
前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,与团队成员, UI 设计,产品经理的沟通;
做好的页面结构,页面重构和用户体验;
4、你觉得前端工程的价值体现在哪
为简化用户使用提供技术支持(交互部分)
为多个浏览器兼容性提供支持
为提高用户浏览速度(浏览器性能)提供支持
为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
为展示数据提供支持(数据接口)
5、平时如何管理你的项目?
先期团队必须确定好全局样式( globe.css ),编码模式( utf-8 ) 等;
编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面 模块 开始和结束);
CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css );
JS 分文件夹存放 命名以该 JS 功能为准的英文翻译。
图片采用整合的 images.png png8 格式文件使用 - 尽量整合在一起使用方便将来的管理;