十道面试题

1、请谈谈你对性能优化的认识?

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较多可以采用以下技巧。

图片显示效果如左图

减少DNS查询次数

DNS查询也消耗响应时间,如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告,引用了外部图片或脚本),那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间,所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。

缓存Ajax

Ajax可以帮助我们异步的下载网页内容,但是有些网页内容即使是异步的,用户还是在等待它的返回结果,例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作,然后通过延迟加载脚本来完成一些高级的功能。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作,然后通过延迟加载脚本来完成一些高级的功能。

2、如何避免XSS?

禁止危险脚本

IE8是第一款内置了XSS脚本拦截保护的浏览器。谷歌的Chrome也会紧随其后推出类似功能。这两款浏览器都会首先查看来自某个Web服务器的脚本是否是恶意的——如果是,就拦截它。在今年4月的黑帽欧洲2010大会上,研究专家David Lindsay和Eduardo Vela Nava却演示了一种可以破除这种拦截的办法,不过谷歌已经修复了Chrome中的这个漏洞。微软则在今年1月(补丁MS10-002)和3月(MS10-018)也已解决了大部分问题,并计划在6月修复第3个漏洞,所以在你读到这篇文章的时候,破除XSS脚本拦截的问题可能已经完全解决了。

Firefox的用户则可以利用免费的NoScrpit附加组件有选择地拦截脚本。比如说,你可以放行一段Flash视频,而同时拦截该网站上的其他脚本组件。IE和Chrome在拦截可疑脚本方面没有这么细的粒度——它们是要么全拦截,要么全不拦截。

NoScrpit也有一个问题,那就是大多数用户并不喜欢放行个别脚本的做法,因为这样会带来不便。不过拦截和放行今后可能会成为你的第二天性。你还可以对某个特定网站上的所有脚本进行认证,无论是为了一次性访问还是今后的所有访问,这样的认证如今在IE 8和chrome中也可以做了,使得防范XSS攻击实现更加可能。

3、平时如何管理项目?

所谓项目,简单地说,就是在既定的资源和要求的约束下,为实现某种目的而相互联系的一次性工作任务。一般来说,项目具有如下的基本特征:

1)明确的目标其结果只可能是一种期望的产品,也可能是一种所希望得到的服务。

2)独特的性质每一个项目都是唯一的。

3)资源成本的约束性每一项目都需要运用各种资源来实施,而资源是有限的。

4)项目实施的一次性项目不能重复。

5)项目的不确定性在项目的具体实施中,外部和内部因素总是会发生一些变化,因此项目也会出现不确定性。

4、请谈谈项目的迭代周期?

软件项目开发,一般都会采用增量、迭代、(或者叫进化、演化、演进)的软件开发模型,众多的软件开发模型大多是以经典的瀑布模型为基础进行改进、变形,改进原则是:增加客户在整个项目周期中的参与度,降低软件开发过程中的风险,增强软件项目的后期可维护性。

不同的软件开发模型,迭代周期长短也不相同,有的是一个月,有的是两周,我们一般都是根据实际情况确定,一个周期完成,将项目成果(可运行的软件)提交给用户(或进行内部评审),通过后就进入下一个迭代开发周期

5、工作中用过什么构建工具?

答:用过gulp。

第一步:安装node和npm,搭建node环境。

第二步:安装gulp

第三步:新建Gulpfile文件,运行gulp

安装依赖,提醒下,如果以上命令提示权限错误,需要添加 sudo 再次尝试。

Gruntfile维护起来那么困难,有几个原因:

配置和运行分离

程序员都知道,变量的声明和使用挨在一起,最方便理解和修改。但Gruntfile里,配置Task和调用它们的地方离得很远,极大地增加了心智负担

每个插件做的事太多

每个Task的结果必须写到磁盘文件,另一个Task再读,损害性能倒是小事,更麻烦的是让整个过程变复杂了。就像一个个小作坊,来料加工又返回给客户,这中间的沟通成本、出错机会都大大增加。配置项过多做事多了,配置项自然也多。至少输入和输出的位置得配吧。每个插件的配置规则还不尽相同。用每个插件,都得去学习一番。

6、谈谈你对模块化的理解?

什么是模块化?

?      模块化就是为了减少系统耦合度,提高高内聚,减少资源循环依赖,增强系统框架设计。

?      让开发者便于维护,同时也让逻辑相同的部分可复用

?      模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程,那么模块化的过程通俗点讲就是:

模块化的过程就是:

?      1、拆分

将整个系统按功能,格式,加载顺序,继承关系分割为一个一个单独的部分.

注意:拆分的粒度问题,可复用问题,效率问题.如何这些问题处理的不好,就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起,组成一个资源块.

将每个资源块按找需求,功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案:

1.      namespace

2.      sass,less

3.      AMD&CMD

4.      html模版

5.      grunt,gulp,webpack

6.      FIS,YUI,KISSY

7、平时都用什么第三方框架?

jQuery、Bootstrap、angularjs、vue、underscore、seajs、RequireJS…

8、请描述一下cookie,sessionStorage和localStorage的区别?

答:cookies兼容所有的浏览器,Html5提供的storage存储方式。

?      Document.cookie

?      Window.localstorage

?      Window.sessionstorage

cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

9、如何使用缓存?

可以基于http的头信息控制缓存

ajax请求对早期的IE浏览器默认就是缓存的,可以通过时间戳防止缓存

10、谈谈你对预加载的理解?

Web预加载指的是在网页全加载完成之前,在页面优先显示一些主要内容,以提高用户体验。对于一个较庞大的网站,如果没有使用预加载技术,用户界面就会长时间显示一片空白,直到资源加载完成,页面才会显示内容。

例如,可以通过js预先从服务加载图片资源(动态创建Image,设置src属性),只要浏览器把图片下载到本地,就会被缓存,再次请求相当的src时就会优先寻找浏览器缓存,提高访问速度。

你可能感兴趣的:(十道面试题)