前端面试题

最新推荐文章于 2024-07-16 14:35:16 发布

chenzhifu86886

最新推荐文章于 2024-07-16 14:35:16 发布

阅读量195

点赞数

文章标签： xhtml json ui

原文链接：https://my.oschina.net/mayxu/blog/1592637

版权

基础知识

在制作一个网页应用或网站的过程中，如何考虑UI、安全性、高性能、SEO、可维护性以及技术因素的？

UI：

界面美观，要有个性.
考虑用户使用的逻辑要简单，用起来舒适自由。
符合大部分用户的习惯，少输入，多选择，提供搜索和提示功能

安全性：

对输入进行有效性验证,非法字符，空格，反斜杠
交互操作进行身份验证
错误处理提示不涉及一些网络环境和配置
代码注入（XSS攻击）
不安全的加密算法 MD5 、base64

高性能：

DNS负载均衡,在DNS中为多个IP地址配置同一个域名
HTTP重定向,重定向来分散和转移请求压力
分布式缓存,包括HTML、CSS 和图片等

SEO:

选好关键字，描述语言，修饰性图片换成文本，
合理使用h1-h6，对图片添加alt属性，链接添加target属性

可维护性：

代码易被理解，易被修改和增加新的功能，
当出现问题时能快速定位到问题代码

技术因素

代码命名规范以及代码的通用

代码的精简压缩等

若有5个不同的样式文件,整合进网站的最好方式?

如果是导入插件的样式表和库，通常会把它们合并在一起
如果是与应用程序相关且经常性修改的，通常会分文件引入

描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
特性检测:判断浏览器是否支持

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

文件合并来减少http请求，合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用DataURI来编码图片。
文件压缩来文件下载的体积；常用的工具是YUI Compressor。
使用 CDN （内容分发网络）来托管资源；
缓存的使用（并且多个域名来提供缓存）
GZIP 压缩你的 JS 和 CSS 文件

浏览器同一时间可以从一个域名下载多少资源？有什么例外吗？

根据浏览器不同而不同 IE7:2 IE8:6 Chrome:6 Firefox:8
例外:移动端打开会根据网络情况而有所减少

请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

减少http请求（合并文件、合并图片）
优化图片文件，减小其尺寸。
图像格式的选择
压缩Javascript、CSS代码。
服务器启用gzip压缩功能。
标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
网址后面加上“/”:对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面

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

无样式内容闪烁:使用@import方法导入CSS，由于IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，某些页面会无样式显示内容且瞬间闪烁，这现象就是文档样式短暂失效即FOUC。
避免:使用link标签导入CSS

请解释 CSS 动画和 JavaScript 动画的优缺点。

CSS3的动画的优点： 1.性能上会稍微好一些，浏览器会对CSS3的动画做一些优化 2.代码相对简单
CSS3的动画的缺点： 1.在动画控制上不够灵活 2.兼容性不好 3.部分动画功能无法实现（如滚动动画，视差滚动等）

什么是 CORS，以及其要解决的问题？

CORS:跨域资源共享,主要解决Ajax跨域请求，CORS支持所有类型的HTTP请求，而JSONP只能实现GET请求。

HTML

doctype(文档类型) 的作用是什么？

doctype类型：过渡的(Transitional)，严格的(Strict)，框架的(Frameset)
doctype：用来说明你用的XHTML或者HTML是什么版本，指出当前网页是一个遵循标准的文档,让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式，以便正确显示由doctype声明所指定的文档种类。

浏览器标准模式 (standards mode) 和怪异模式 (quirks mode) 之间的区别是什么？

标准模式: 浏览器按W3C标准解析执行代码；
怪异模式: 使用浏览器自己的方式解析执行代码.
浏览器解析时到底使用标准模式还是怪异模式，与网页中的DTD声明直接相关
忽略DTD声明,将使网页进入怪异模式
如何判定现在是标准模式还是怪异模式：

方法一：执行以下代码
    alert(window.top.document.compatMode) ;
    // BackCompat  表示怪异模式
    //CSS1Compat  表示标准模式

方法二：jquery为我们提供的方法，如下：
    alert($.boxModel)
    alert($.support.boxModel)

HTML 和 XHTML 有什么区别？

XHTML 是HTML与XML(扩展标记语言)的结合。包含所有与XML语法结合的HTML4.01元素。
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
XHTML 标签名必须用小写字母。
XHTML 文档必须拥有根元素。

如果页面使用 'application/xhtml+xml' 会有什么问题吗？

一些老的浏览器并不兼容

data-属性的作用是什么？

data-*: 用于存储页面或应用程序的私有自定义数据。
存储的数据能够被页面的 JavaScript 中利用，以创建更好的用户体验
data-* 属性包括两部分：
1. 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
2. 属性值可以是任意字符串

如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

    <nav>, <header>,<section>,<footer>

请描述 cookies、sessionStorage 和 localStorage 的区别

sessionStorage 和 localStorage 是HTML5提供的，可以方便的在web请求之间保存数据。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据.
sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据不能超过4k，sessionStorage和localStorage可以达到5M或更大
sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效；cookie只在设置的cookie过期时间之前一直有效。
sessionStorage不在不同的浏览器窗口中共享；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

请解释 <script>、<script async> 和 <script defer> 的区别。

<script>: 浏览器会立即加载并执行指定的脚本，读到就加载并执行。
<script async>:加载和渲染后续文档将和js的加载与执行并行进行（异步）。
<script defer>:加载后续文档元素将和js的加载并行进行（异步），但是js的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成

为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道相关解释吗？

将 css 文件放到头部， css 文件可以先加载。避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁FOUC
若将 javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白

什么是渐进式渲染 (progressive rendering)？

网页图片片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)

CSS

"resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？

resetting: 直接重置所有格式，无视任何 user agent 预置样式,没有任何前提性质的。
normalizing: 重置部分格式的
建议选择使用 normalizing进行重置，保留有用的默认值，不同于许多 CSS 的重置

请解释浮动 (Floats) 及其工作原理。

规定元素以盒子的方式显示在左边或者右边，并让其以下内容流沿着它的一面显示，但他们不在文档流中，以前是垂直分布现在是水平分布。
清除浮动方法：

1.空方法：
    <div style="clear:both;"></div>

2.设置父元素的overflow属性为auto和hidden来扩大包含浮动。

3.使用伪方法，在父亲元素后面加上
 .clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

z-index和叠加上下文是如何形成的。

z - index 控制元素重叠的堆叠顺序，数字越大越在上面
z - index 适用于除了一下的一切情况 1.根元素（HTML） 2.定位不是静态且值为auto 3.透明都小于1 4.元素有旋转的属性 5.伸缩的元素值不是auto
在叠加元素中,子元素不会遵循正常的规则,定位元素高于静态元素

描述 BFC(Block Formatting Context) 及其如何工作。

BFC:块级格式化范围.是CSS对一个页面进行可视化渲染时产生的区域，在这个区域中会产生被渲染的盒子模型、以及相互影响的浮动元素.
创建BBFC： 1.根元素：html body 2.浮动元素：float:left float:right 3.绝对定位元素：position:absolute position:fixed 4.以下三种布局类型的元素：display:inline-block|table-cell|table-caption 5.溢出内容不直接显示的元素：overflow:hidden|scroll|auto

解释 CSS sprites，以及你要如何在页面或网站中实现它。

CSS sprites:图片精灵。是一种网页图片应用处理方式。将一个页面涉及到的所有零星图片都包含到一张大图中去，以减少请求次数，提高响应速度
使用position/background-position通过图片的横纵坐标来定位要使用的图片

有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？

1.display:none;缺陷是搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器会忽略被隐藏的文字。
1. visibility: hidden ;缺陷是隐藏的内容会占据他所应该占据物理空间
3.将宽度和高度设定为0，然后超过部分隐藏
4.overflow:hidden;
.texthidden {
display:block;/统一转化为块级元素/
overflow: hidden;
width: 0;
height:0;
}

过媒体查询，或针对移动端的布局/CSS 吗？

@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

SVG 样式的书写

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
   <text x="250" y="150" font-family="Verdana" font-size="10px" fill="blue">Hello, out there</text>
   <defs><style type="text/css"><![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs>
   <use xlink:href="#sample1" class="sample"/>
 </svg>

优化网页的打印样式？

 <link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />
 //其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

打印样式表也应有些注意事项：

1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3、隐藏掉不必要的内容。（@print div{display:none;}）
4、打印样式表中最好少用浮动属性，因为它们会消失。

书写高效 CSS 时会有哪些问题需要考虑？

1.样式：从右向左的解析一个选择器
2.有四种类型的选择器，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
6.CSS3的效率问题（CSS3选择器（比如:nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

CSS 预处理器的优缺点有哪些？

Sass LESS Stylus
更好组织模块化代码
变量、混合、嵌套、函数、循环等
避免重复代码
必须小心,扩展太多从而增加代码

浏览器是如何判断元素是否匹配某个 CSS 选择器？

浏览器解析HTML时构造一个内部文件树代表所有要显示的元素。然后为元素指定匹配在不同的样式表,从最右边的选择器保存在一个数组,并通过移动每个选择器,丢弃不匹配规则的元素

描述伪元素 (pseudo-elements) 及其用途。

CSS 伪元素用于向某些选择器设置特殊效果.
例如：
1. :first-letter 向文本的第一个字母添加特殊样式。
2. :first-line 向文本的首行添加特殊样式。
3. :before 在元素之前添加内容。
4. :after 在元素之后添加内容。
伪类和伪元素的区别：它们是否创造了新的元素(抽象)。如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
CSS3 为了区分这两者的混淆，而特意用冒号加以区分： 1. 伪类用一个冒号表示 :first-child 2. 伪元素则使用两个冒号表示 ::first-line
使用伪元素和伪类的实例：

<p> I am the bone of my sword. Steel is my body, and fire is my blood. 
I have created over a thoustand blades. 
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. 
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p> 

//使用伪元素:first-line等价于

<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span> 
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. 
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

-----------------------------------------------------------------------------------

<ul>
<li></li>
<li></li>
</ul>

//使用:first等价于

<ul>
<li class="first-child"></li>
<li></li>
</ul>

解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

把每个元素看成一个盒子。
盒子模型根据标准可分为两类：W3C标准盒子模型和IE盒子模型 1.W3C盒子模型——属性高和属性宽这两个值不包含填充(padding)和边框(border) 2.IE盒子模型——属性高和属性宽这两个值包含填充(padding)和边框(border)
盒子模型宽高计算可分为三类：Content-box、Padding-box和Border-box 1.通过修改box-sizing属性来改变盒子模型 2.Content-box：默认属性，宽高等于内容高度，不包含margin/padding/border 3.Padding-box：默认属性，宽高等于内容高度与padding，不包含margin/border 4.Content-box：默认属性，宽高等于内容高度与padding和border，不包含margin
*{ box-sizing: border-box;} 统一所有元素均为IE盒子模型,解决浏览器不兼容问题

解释 inline 和 inline-block 的区别？

display属性为inline/inline-block均为行内元素
inline 和 inline-block的区别是：inline不可以设置width/height ,而inline-block可以

请解释 relative、fixed、absolute 和 static 元素的区别

static: 默认的定位类型。元素将遵循标准一个接着一个排列
relative:相对定位。未加任何操作时与static一样,使用top/buttom/left/right来改变显示位置但是其位置还在且底下的元素不受影响
absolute:绝对定位。实际上是移除DOM且定位基于其最近的display:relative;元素。其位置不在文档流且底下的元素向上补齐
fixed:固定定位。完全独立于其他的web页面元素。不管任何父母,固定位置元素总是会基于浏览器窗口的位置。当滚动页面是,元素保持“固定”,总是可见的。

为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？此处输入图片的描述 Responsive on top, Adaptive on bottom

你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？

当一个图像在标准设备下全屏显示时，一位图像素对应的就是一设备像素，导致一个完全保真的显示，因为一个位置像素不能进一步分裂。而当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形.因此Retina屏幕下的图片是普通屏幕的两倍像素
解决方法 1.直接加载2倍大小的图片 2.Image-set控制假如要显示的图片大小为200x300，图片应有两张：一张大小为200x300，命名为pic.png；另一张大小为400x600，命名为pic@2x.png（@2x是Retina图标的标准命名方式），然后使用以下css代码控制：

<pre> .logo { background: url(pic.png) 0 0 no-repeat; background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x); background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x); background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x); background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x); } </pre>

或者使用HTML代码控制: <img src="pic.png" srcset="pic@2x.png 2x" /> 3.使用@media控制

JavaScript

请解释事件代理 (event delegation)。

事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，利用冒泡的原理，把事件加到父级上，触发执行效果
事件代理:如果不想或不能够直接操纵目标对象，可以利用delegate创建一个代理对象来调用目标对象的方法，从而达到操纵目标对象的目的。代理对象要拥有目标对象的引用。这就是事件代理.也就是说不会直接去操纵对象.

请解释 JavaScript 中 this 是如何工作的。

this表示的是当前调用的函数或方法的所有者。对于一个全局函数而言，他表示的就是window对象，对于一个对象的方法来讲，他表示的就是该对象实例，在一个时间句柄中，他表示的就是接收到该事件的元素。

详细信息参考：http://blog.jobbole.com/67347/

请解释原型继承 (prototypal inheritance) 的原理。

prototype对象 : 所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。 详细信息参考：Javascript继承机制的设计思想

请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();要做哪些改动使它变成 IIFE?

以 function 关键字开头的语句会被解析为函数声明，而函数声明是不允许直接运行的。只有当解析器把这句话解析为函数表达式，才能够直接运行。

// 改为立即调用的函数表达式
(function foo(){
    // code..
})()

描述以下变量的区别：null，undefined 或 undeclared？该如何检测它们？

null 表示"没有对象"，即该处不应该有值。
undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义
undeclared 是未声明也未赋值的变量，JavaScript访问会报错。
undefined 和 null 在 if 语句中，都会被自动转为 false
null 是一个表示"无"的对象，转为数值时为0；
undefined 是一个表示"无"的原始值，转为数值时为 NaN。
null 典型用法是：（1）作为函数的参数，表示该函数的参数不是对象。（2）作为对象原型链的终点。
undefined 典型用法是：（1）变量被声明了，但没有赋值时，就等于 undefined。（2) 调用函数时，应该提供的参数没有提供，该参数等于 undefined 。（3）对象没有赋值的属性，该属性的值为 undefined。（4）函数没有返回值时，默认返回 undefined。
检测方法：

typeof undefined  //undefined
typeof null  //object

什么是闭包 (closure)，如何使用它，为什么要使用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的用途闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
使用闭包的注意点: 1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

请举出一个匿名函数的典型用例？

$(function(){})

请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？

原生对象: 独立于宿主环境的ECMAScript实现提供的对象。包含：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。
内置对象:由 ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。ECMA-262 只定义了两个内置对象，即 Global 和 Math。内置对象是本地对象的一种。
宿主对象: 所有非本地对象都是宿主对象（hostobject），即由ECMAScript实现的宿主环境提供的对象。所有的BOM和DOM都是宿主对象。

请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

function Person(){} 声明一个函数 Person()。
var person = Person() 将函数 Person() 的结果返回给变量 person ，如果没有返回值则 person 为 undefined。
var person = new Person() new一个 Person 的实例对象。

.call 和 .apply 的区别是什么？

.call 和 .apply 都是用来改变函数体内this对象的值。
区别是第二个参数不一样: apply() 的第二个参数是一个类数组对象 arguments ，参数都是以数组的形式传入，而 call()，传递给他的是一系列参数

Math.max.call(null, 参数1, 参数2, 参数3, 参数4);
Math.max.apply(null, [参数1, 参数2, 参数3, 参数4]);

请解释 Function.prototype.bind？

Function.prototype.bind方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数

详细信息参考：http://blog.jobbole.com/58032/

请尽可能详尽的解释 AJAX 的工作原理。

详细信息参考：http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。

JSONP 的工作原理: 动态创建一个script标签，利用script标签src属性访问没有限制，实现跨域。web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去。允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据这样客户端就可以随意定制自己的函数来自动处理返回数据
Ajax和jsonp的区别: 1.实质不同:ajax的核心是通过xmlHttpRequest获取非本页内容,jsonp的核心是动态添加script标签调用服务器提供的js脚本（后缀.json) 2.jsonp是一种方式或者说非强制性的协议,ajax也不一定非要用json格式来传递数据　 3.jsonp只支持get请求，ajax支持get和post请求

你使用过 JavaScript 模板系统吗？

淘宝的kissy template，腾讯的artTemplate，百度的baiduTemplate

请解释变量声明提升 (hoisting)。

函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。

请描述事件冒泡机制 (event bubbling)。

事件会从最内层的元素开始发生，一直向上传播，直到document对象。因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

"attribute" 和 "property" 的区别是什么？

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

详细信息参考：http://web.jobbole.com/83129/

请指出 document load 和 document ready 两个事件的区别。

document load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
document ready是当DOM文档树加载完成后执行一个函数（不包含图片，css等）

请解释 JavaScript 的同源策略 (same-origin policy)。

协议相同
域名相同
端口相同

// 1、
var foo = 10 + '20'; => "1020"

// 2、
var add = function(x,r) {
    if(arguments.length == 1){
        return function(y) { return x + y; };
    }else{
        return x+r;
    }
};
add(2, 5); => 7
add(2)(5); => 7

// 3、
"i'm a lasagna hog".split("").reverse().join(""); => "goh angasal a m'i"

// 4、
( window.foo || ( window.foo = "bar" ) ); => "bar"

// 5、
var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);
=> "Hello World"
=> Uncaught ReferenceError: bar is not defined

// 6、  
var foo = [];
foo.push(1);
foo.push(2);
foo.length => 2

// 7、
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
console.info(foo.x); => {n: 2}

// 8、
console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

=> 'one'
=> 'three'
=> 'two'

转载于:https://my.oschina.net/mayxu/blog/1592637

chenzhifu86886

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

基础知识在制作一个网页应用或网站的过程中，如何考虑UI、安全性、高性能、SEO、可维护性以及技术因素的？UI：界面美观，要有个性.考虑用户使用的逻辑要简单，用起来舒适自由。符合大部分用户的习惯，少输入，多选择，提供搜索和提示功能安全性：对输入进行有效性验证,非法字符，空格...
复制链接

扫一扫