前端面试问题及答案总结(二)

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">调用localstorge、cookies等本地存储方式
</code>

webSocket如何兼容低浏览器?

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-title" style="color: rgb(133, 153, 0);">Adobe</span> Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
</code>

线程与进程的区别

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">一个程序至少有一个进程,一个进程至少有一个线程. 
线程的划分尺度小于进程,使得多线程程序的并发性高。 
另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。 
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。 
从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">期待的解决方案包括:
 文件合并
 文件最小化/文件压缩
 使用 CDN 托管
 缓存的使用(多个域名来提供缓存)
 其他
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> 1.优化图片 
 2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方) 
 3.优化CSS(压缩合并css,如margin-top,margin-left...) 
 4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。) 
 5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。 
当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。) 

6.减少http请求(合并文件,合并图片)。
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">Profiler, JSPerf(http:<span class="hljs-comment" style="color: rgb(147, 161, 161);">//jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo</span>
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> FOUC - Flash Of Unstyled Content 文档样式闪烁
 <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">style</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/css"</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">media</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"all"</span>></span><span class="css"><span class="hljs-at_rule">@<span class="hljs-keyword" style="color: rgb(133, 153, 0);">import</span> <span class="hljs-string" style="color: rgb(42, 161, 152);">"../fouc.css"</span></span>;</span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">style</span>></span> 
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
 解决方法简单的出奇,只要在<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">head</span>></span>之间加入一个<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">link</span>></span>或者<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript">元素就可以了。
</span></code>

null和undefined的区别?

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

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>)变量被声明了,但没有赋值时,就等于<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。

(<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>) 调用函数时,应该提供的参数没有提供,该参数等于<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。

(<span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>)对象没有赋值的属性,该属性的值为<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。

(<span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>)函数没有返回值时,默认返回<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">   <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>、创建一个空对象,并且 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 变量引用该对象,同时还继承了该函数的原型。
   <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>、属性和方法被加入到 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 引用的对象中。
   <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>、新创建的对象由 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 所引用,并且最后隐式的返回 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 。

<span class="hljs-reserved">var</span> obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj); 
</code>

JSON 的了解?

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-built_in" style="color: rgb(38, 139, 210);">JSON</span>(JavaScript <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span> Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{<span class="hljs-string" style="color: rgb(42, 161, 152);">'age'</span>:<span class="hljs-string" style="color: rgb(42, 161, 152);">'12'</span>, <span class="hljs-string" style="color: rgb(42, 161, 152);">'name'</span>:<span class="hljs-string" style="color: rgb(42, 161, 152);">'back'</span>}
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">defer和<span class="hljs-keyword" style="color: rgb(133, 153, 0);">async</span>、动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)、按需异步载入js
</code>

如何解决跨域问题?

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    jsonp、 <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.domain+iframe、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.name、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.postMessage、服务器上设置代理页面

jsonp的原理是动态插入script标签
</code>

documen.write和 innerHTML的区别

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.write只能重绘整个页面

innerHTML可以重绘页面的一部分
</code>

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

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

<span class="hljs-built_in" style="color: rgb(38, 139, 210);">set</span>Timeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
</code>

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

 

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

详见:详解JavaScript函数模式

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">通过判断Global对象是否为<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>,如果不为<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>,当前脚本没有运行在浏览器中
</code>

其他问题?

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

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

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-bullet">* </span>网站重构:应用web标准进行设计(第2版)
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
</code>

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

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
  因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
  此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
  因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

*(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
  而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
</code>

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

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
    1、实现界面交互
    2、提升用户体验
    3、有了Node.js,前端可以实现服务端的一些事情


前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,

 参与项目,快速高质量完成实现效果图,精确到1px;

 与团队成员,UI设计,产品经理的沟通;

 做好的页面结构,页面重构和用户体验;

 处理hack,兼容、写出优美的代码格式;

 针对服务器的优化、拥抱最新前端技术。
</code>

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

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

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

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

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

如何管理前端团队?

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

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

 

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">  (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

  (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

  (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

  (4) 当需要设置的样式很多时设置className而不是直接操作style。

  (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

  (7) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。
</code>

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

code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">100-199 用于指定客户端应相应的某些动作。 
200-299 用于表示请求成功。 
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。400    1、语义有误,当前请求无法被服务器理解。401   当前请求需要用户验证 403  服务器已经理解请求,但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
</code>

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    分为4个步骤:
    (1),当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
    (2), 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
    (3),一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。
    (4),此时,Web服务器提供资源服务,客户端开始下载资源。

请求返回后,便进入了我们关注的前端模块
简单来说,浏览器会解析HTML生成DOM Tree,其次会根据CSS生成CSS Rule Tree,而javascript又可以根据DOM API操作DOM
</code>

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

平时如何管理你的项目?

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;

        编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);

        标注样式编写人,各模块都及时标注(标注关键样式调用的地方);

        页面进行标注(例如 页面 模块 开始和结束);

        CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);

        JS 分文件夹存放 命名以该JS功能为准的英文翻译。

        图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理 
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">Node.js、Mongodb、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">npm</span>、MVVM、MEAN、three.js,React 。
网站:w3cfuns,sf,hacknews,CSDN,慕课,博客园,InfoQ,w3cplus等
</code>

javascript对象的几种创建方式

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1,工厂模式
2,构造函数模式
3,原型模式
4,混合构造函数和原型模式
5,动态原型模式
6,寄生构造函数模式
7,稳妥构造函数模式
</code>

javascript继承的6种方法

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1,原型链继承
2,借用构造函数继承
3,组合继承(原型+借用构造)
4,原型式继承
5,寄生式继承
6,寄生组合式继承
</code>

详情:JavaScript继承方式详解

ajax过程

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.
</code>

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

异步加载和延迟加载

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>异步加载的方案: 动态插入script标签
<span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>通过ajax去获取js代码,然后通过eval执行
<span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>script标签上添加defer或者<span class="hljs-keyword" style="color: rgb(133, 153, 0);">async</span>属性
<span class="hljs-number" style="color: rgb(42, 161, 152);">4.</span>创建并插入iframe,让它异步执行js
<span class="hljs-number" style="color: rgb(42, 161, 152);">5.</span>延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。
</code>

前端安全问题?

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-code">    (XSS,sql注入,CSRF)</span>
CSRF:是跨站请求伪造,很明显根据刚刚的解释,他的核心也就是请求伪造,通过伪造身份提交POST和GET请求来进行跨域的攻击。

<span class="hljs-strong">**完成CSRF需要两个步骤:**</span>

1.登陆受信任的网站A,在本地生成COOKIE

2.在不登出A的情况下,或者本地COOKIE没有过期的情况下,访问危险网站B。
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-title" style="color: rgb(133, 153, 0);">IE6</span> 两个并发,iE7升级之后的<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个并发,之后版本也是<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个

Firefox,chrome也是<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">用构造函数和原型链的混合模式去实现继承,避免对象共享可以参考经典的extend()函数,很多前端框架都有封装的,就是用一个空函数当做中间变量
</code>

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。

使用方法:

<span class="hljs-comment" style="color: rgb(147, 161, 161);">//压缩JS</span>
java -jar yuicompressor-<span class="hljs-number" style="color: rgb(42, 161, 152);">2.4</span><span class="hljs-number" style="color: rgb(42, 161, 152);">.2</span>.jar --type js --charset utf-<span class="hljs-number" style="color: rgb(42, 161, 152);">8</span> -v src.js > packed.js
<span class="hljs-comment" style="color: rgb(147, 161, 161);">//压缩CSS</span>
java -jar yuicompressor-<span class="hljs-number" style="color: rgb(42, 161, 152);">2.4</span><span class="hljs-number" style="color: rgb(42, 161, 152);">.2</span>.jar --type css --charset utf-<span class="hljs-number" style="color: rgb(42, 161, 152);">8</span> -v src.css > packed.css
</code>

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1、Flash ajax对比
Flash适合处理多媒体、矢量图形、访问机器;对CSS、处理文本上不足,不容易被搜索。
Ajax对CSS、文本支持很好,支持搜索;多媒体、矢量图形、机器访问不足。
共同点:与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
</code>

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

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

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

为什么要有同源限制?

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

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

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

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

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;</span>
<span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 消除代码运行的一些不安全之处,保证代码运行的安全;</span>
<span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 提高编译器效率,增加运行速度;</span>
<span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 为未来新版本的Javascript做好铺垫。</span>
</code>

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值