轩枫阁

首页 / Web前端 / 前端开发笔面试常见问题及答案解析

前端开发笔面试常见问题及答案解析

前端开发面试知识点大纲:

 

1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。 第一:每个特定的域名下最多生成20个cookie

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

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

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

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

缺点:

2.浏览器本地存储

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

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

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

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

3.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

CSS 相关问题

display:none和visibility:hidden的区别?

CSS中 link 和@import 的区别是?

position的absolute与fixed共同点与不同点

介绍一下CSS的盒子模型?

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

css定义的权重

列出display的值,说明他们的作用。position的值, relative和absolute分别是相对于谁进行定位的?

CSS3有哪些新特性?

为什么要初始化CSS样式。

对BFC规范的理解?

解释下 CSS sprites,以及你要如何在页面或网站中使用它。

html部分

说说你对语义化的理解?

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

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

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

常见兼容性问题?

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

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

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

清除浮动的几种方法:

 

IE 8以下版本的浏览器中的盒模型有什么不同

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

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

iframe的优缺点?

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

webSocket如何兼容低浏览器?

线程与进程的区别

你如何对网站的文件和资源进行优化?

请说出三种减少页面加载时间的方法。

你都使用哪些工具来测试代码的性能?

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

null和undefined的区别?

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

当声明的变量还未被初始化时,变量的默认值为undefinednull用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。

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

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

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

JSON 的了解?

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

如何解决跨域问题?

具体参见:详解js跨域问题

documen.write和 innerHTML的区别

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

作用:动态改变某个类的某个方法的运行环境。 区别参见:JavaScript学习总结(四)function函数部分

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

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

JavaScript中的作用域与变量声明提升?

详见:详解JavaScript函数模式

如何判断当前脚本运行在浏览器还是node环境中?

其他问题?

你遇到过比较难的技术问题是?你是如何解决的?

常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

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

99%的网站都需要被重构是那本书上写的?

什么叫优雅降级和渐进增强?

详见:css学习归纳总结(一)

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

对Node的优点和缺点提出了自己的看法?

除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?

你常用的开发工具是什么,为什么?

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

你在现在的团队处于什么样的角色,起到了什么明显的作用?

你认为怎样才是全端工程师(Full Stack developer)?

介绍一个你最得意的作品吧?

项目中遇到什么问题?如何解决?

你的优点是什么?缺点是什么?

如何管理前端团队?

最近在学什么?能谈谈你未来3,5年给自己的规划吗?

你有哪些性能优化的方法?

详情请看雅虎14条性能优化原则)。

http状态码有那些?分别代表是什么意思?

详情:http://segmentfault.com/blog/trigkit4/1190000000691919

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

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

平时如何管理你的项目?

说说最近最流行的一些东西吧?常去哪些网站?

javascript对象的几种创建方式

javascript继承的6种方法

详情:JavaScript继承方式详解

ajax过程

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

异步加载和延迟加载

前端安全问题?

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

javascript里面的继承怎么实现,如何避免原型链上面的对象共享

grunt, YUI compressor 和 google clojure用来进行代码压缩的用法。

详情请见:你需要掌握的前端代码性能优化工具

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

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

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

这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。 指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制?

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

什么是 “use strict”; ? 使用它的好处和坏处分别是什么?

ECMAscript 5添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

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

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

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

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

哪些地方会出现css阻塞,哪些地方会出现js阻塞?

js的阻塞特性:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

CSS怎么会阻塞加载了?CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6CSS都是阻塞加载)

CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面,就不会出现阻塞的情况了。

根本原因:因为浏览器会维持htmlcssjs的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置?

Javascript无阻塞加载具体方式

  • 将脚本放在底部。<link>还是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前。
  • 成组脚本:由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。
  • 非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码。 (1)defer属性:支持IE4和fierfox3.5更高版本浏览器 (2)动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:

此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。

闭包相关问题?

详情请见:详解js闭包

js事件处理程序问题?

详情请见:JavaScript学习总结(九)事件详解

eval是做什么的?

写一个通用的事件侦听器函数?

Node.js的适用场景?

JavaScript原型,原型链 ? 有什么特点?

页面重构怎么操作?

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

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

ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

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

js对象的深度克隆

AMD和CMD 规范的区别?

详情请见:详解JavaScript模块化开发

网站重构的理解?

如何获取UA?

js数组去重

以下是数组去重的三种方法:

参考自:http://segmentfault.com/u/trigkit4

143/470
145/470

相关阅读

文章评论

  • 知道了 不错~~~

  • 请问一下,初始化样式对 SEO 有什么影响呢?不明白耶。

  • 昨天刚发现这个网站,一下子就被吸引住了,果断收藏

  • 无意发现这个站点,第一眼被钢琴导航吸引,然后觉得内容、排版都不错,以后多支持。这篇文章也很好,收藏了。

    • 多谢支持

  • 收藏

  • 前端开发这些以前没怎么注意

  • 整理很不错

  • 这么多 = =想起前端都是很早的事情了

  • 想问下博主,在页面显示代码用什么wp插件?

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子