b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
2.8、html5有哪些新特性、移除了那些元素?
a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签(header,nav,footer,aside,article,section)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件,calendar、date、time、email、url、search
移除的元素:
a. 纯表现的元素:basefont,big,center, s,strike,tt,u;
b. 对可用性产生负面影响的元素:frame,frameset,noframes;
2.9、iframe的优缺点?
优点:
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点:
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 影响浏览器中的并行资源下载,iframe和父页面不能共享下载
d. script脚本标签写在了iframe之前,iframe中的资源会被阻塞
参考《iframe的一些记录》《实践一下前端性能分析》
2.10、Quirks模式是什么?它和Standards模式有什么区别?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
分享一款实用面试助手 web前端面试助手
2.11、请阐述table的缺点
a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e. table需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。
f. 不够语义
参考《为什么说table表格布局不好?》
2.12、简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
三、CSS
3.1、谈谈你对CSS布局的理解
3.2、请列举几种可以清除浮动的方法(至少两种)
浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)。
a. 添加额外标签,例如
b. 使用br标签和其自身的html属性,例如
c. 父元素设置 overflow:hidden;在IE6中还需要触发hasLayout,例如zoom:1;
d. 父元素设置 overflow:auto 属性;同样IE6需要触发hasLayout
e. 父元素也设置浮动
f. 父元素设置display:table
g. 使用:after 伪元素;由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
在CSS2.1里面有一个很重要的概念,那就是 Block formatting contexts (块级格式化上下文),简称 BFC。
创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,同时BFC仍然属于文档中的普通流。
IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念。
参考《那些年我们一起清除过的浮动》
3.3、请列举几种隐藏元素的方法
a. visibility: hidden;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。
b. opacity: 0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。与visibility相比,它可以被transition和animate
c. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。
d. display: none;元素会变得不可见,并且不会再占用文档的空间。
e. transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。
f. HTML5 hidden attribute;hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态
g. height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。
h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。
参考《使用CSS隐藏HTML元素的4种常用方法》《通过HTML和CSS隐藏和显示元素的4种方法》
3.4、如何让一段文本中的所有英文单词的首字母大写
none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )
分享一款实用面试助手 web前端面试助手
3.5、请简述CSS样式表继承
CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:参考《CSS样式表继承详解》
文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color
列表相关:list-style-image,list-style-position,list-style-type, list-style
3.6、请简述CSS的选择器
元素选择器:* 、E、 E#id、 E.class
关系选择器:E、F、E>F、E+F、E~F
属性选择器:E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]
伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
参考《选择符列表》
分享一款实用面试助手 web前端面试助手
3.7、CSS伪类与CSS伪对象的区别
CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
根本区别在于:它们是否创造了新的元素(抽象)
伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
3.8、请简述CSS的权重规则
一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。
关系选择器将拆分为两个选择器再计算。参考《CSS权重》
3.9、请写出多种等高布局
a. 假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像
b. 给容器div使用单独的背景色(固定布局)(流体布局):用
c. 创建带边框的两列等高布局:用border-left来做,只能使用两列。
d. 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出背景切掉
e. 使用边框和定位模拟列等高:但不能使用在多列
f. 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行
3.10、在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?
px是相对长度单位,相对于显示器屏幕分辨率而言的。
em是相对长度单位,相对于当前对象内文本的字体尺寸。
px定义的字体,无法用浏览器字体放大功能。
em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。
3.11、CSS中 link 和@import 的区别是什么?
a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS
b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题
d. link方式的样式的权重 高于@import的权重
e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制
3.12、position的absolute与fixed共同点与不同点
相同:
a. 改变行内元素的呈现方式,display被置为block
b. 让元素脱离普通流,不占据空间
c. 默认会覆盖到非定位元素上
区别:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
3.13、position的值, relative和absolute分别是相对于谁进行定位的?
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。 (IE6不支持)
relative:生成相对定位的元素,相对于其在普通流中的位置进行定位
static:默认值。没有定位,元素出现在正常的流中
3.14、CSS3有哪些新特性?
CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)
增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局
参考《CSS3中的动画效果记录》、《CSS3中border-radius、box-shadow与gradient那点事儿》
分享一款实用面试助手 web前端面试助手
3.15、为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
3.16、解释下 CSS sprites原理,优缺点
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,
再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,
background-position可以用数字精确的定位出背景图片的位置。
优点:
a. 减少网页的http请求
b. 减少图片的字节
c. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
d. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。
缺点:
a. 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂
b. CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片
3.17、解释下浮动和它的工作原理?
a. 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。
3.18、浮动元素引起的问题
a. 父元素的高度无法被撑开,影响与父元素同级的元素
b. 与浮动元素同级的非浮动元素会跟随其后
c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
3.19、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:使用LINK标签将样式表放在文档HEAD中。
3.20、line-height三种赋值方式有何区别?(带单位、纯数字、百分比)
带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高
纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px
百分比:将计算后的值传递给后代
参考《line-height的理解》、《浅析line-height和vertical》,查看在线源码。
3.21、:link、:visited、:hover、:active的执行顺序是怎么样的?
L-V-H-A,l(link)ov(visited)e h(hover)a(active)te,即用喜欢和讨厌两个词来概括
3.22、经常遇到的浏览器兼容性有哪些?如何解决?
a. 浏览器默认的margin和padding不同
b. IE6双边距bug
c. 在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用 opacity:0.6
f. input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效
3.23、有哪项方式可以对一个DOM设置它的CSS样式?
a. 外部样式表:通过标签引入一个外部css文件
b. 内部样式表:将css代码放在
c. 内联样式:将css样式直接定义在 HTML 元素内部
3.24、什么是外边距重叠?重叠的结果是什么?
外边距重叠就是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
a. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
b. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
c. 两个外边距一正一负时,折叠结果是两者的相加的和。
3.25、rgba()和opacity的透明效果有什么不同?
a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继承透明效果!
3.26、css属性content有什么作用?有什么应用?
css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。
可以配合自定义字体显示特殊符号。
分享一款实用面试助手 web前端面试助手
四、JavaScript
4.1、请解释一下什么是闭包
当函数可以记住并访问所在的作用域时,就产生了闭包,即使函数是在当前作用域之外执行。闭包有如下特性:
a. JavaScript允许你使用在当前函数以外定义的变量
b. 即使外部函数已经返回,当前函数仍然可以引用在外部函数所定义的变量
c. 闭包可以更新外部变量的值
d. 用闭包模拟私有方法
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题。
在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers或者任何其他的异步(或者同步)任务中,只要使用了回调函数,实际上就是在使用闭包!
4.2、call 和 apply 的区别是什么?
call 和 apply 就是为了改变函数体内部 this 的指向。
区别是从第二个参数起,call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。
当参数明确时用call与apply都行, 当参数不明确时可用apply给合arguments
4.3、如何使用原生 Javascript 代码深度克隆一个对象(注意区分对象类型)
在网上找了个函数,用递归的方式做复制。传入的参数必须得是Array或Object。
并且用到了JSON.stringify和JSON.parse。查看在线代码。参考《JavaScript中的对象克隆》
4.4、 jQuery中 ( ′ . c l a s s ′ ) 和 (′.class′)和 (′.class′)和(‘div.class’) 哪个效率更高?
jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.class,
第二个会直接过滤出div标签,而第一个就不会过滤了,将所有相关标签都列出。参考《jQuery最佳实践》
4.5、实现输出document对象中所有成员的名称和类型
用一个for in方式循环document,然后在将内容console出来,
就是看到篇文章还会判断document.hasOwnProperty,然后再做打印,我测试了下这样的话打印不出来。
分享一款实用面试助手 web前端面试助手
4.6、获得一个DOM元素的绝对位置
offsetTop:返回当前元素相对于其 offsetParent 元素的顶部的距离
offsetLeft:返回当前元素相对于其 offsetParent 元素的左边的距离
getBoundingClientRect()"):返回值是一个DOMRect对象,它包含了一组用于描述边框的只读属性——left、top、right和bottom,属性单位为像素
参考《JavaScript中尺寸、坐标》,查看在线代码。
4.7、如何利用JS生成一个table?
首先是用createElement创建一个table,再用setAttribute设置table的属性,
然后用for循环设置tr和td的内容,用appendChild拼接内容,设置td的时候还用到innerHTML和style.padding。
查看在线代码。参考《JavaScript要点归档:DOM表格》《JavaScript要点归档:DOM》
4.8、实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px,宽度为50px
先new Image()获取一个图片对象,然后在图片对象的onload中设置宽度和高度。查看在线代码。
4.9、假设有一个4行tr的table,将table里面tr顺序颠倒
先是通过table.tBodies[0].rows获取到当前tbody中的行,接下来是两种方法处理。获取到的行没有reverse这个方法。
第一种是将这些行push到另外一个数组中
第二种是用Array.prototype.slice.call()将那些行变成数组,
接着用reverse倒叙,table再appendChild。查看在线代码。
这里我有个疑问,就是在appendChild的时候,并不是在最后把列加上,而是做了替换操作?
4.10、模拟一个HashTable类,一个类上注册四个方法:包含有add、remove、contains、length方法
先是在构造函数中定义一个数组,然后用push模拟add,splice模拟remove。
4.11、Ajax读取一个XML文档并进行解析的实例
a. 初始化一个HTTP请求,IE以ActiveX对象引入。 后来标准浏览器提供了XMLHttpRequest类,它支持ActiveX对象所提供的方法和属性
b. 发送请求,可以调用HTTP请求类的open()和send()方法
c. 处理服务器的响应,通过http_request.onreadystatechange = nameOfTheFunction。来指定函数
4.12、JS如何实现面向对象和继承机制?
创建对象方法:
a. 利用json创建对象
b. 使用JavaScript中的Object类型
c. 通过创建函数来生成对象
继承机制:
a. 构造函数绑定,使用call或apply方法,将父对象的构造函数绑定在子对象上
b. prototype模式,继承new函数的模式
c. 直接继承函数的prototype属性,对b的一种改进
d. 利用空对象作为中介
e. 在ECMAScript5中定义了一个新方法Object.create()"),用于创建一个新方法
f. 拷贝继承,把父对象的所有属性和方法,拷贝进子对象,实现继承。参考《JavaScript中的对象克隆》
参考《Javascript继承机制的设计思想》《构造函数的继承》,查看在线代码。
分享一款实用面试助手 web前端面试助手
4.13、JS模块的封装方法,比如怎样实现私有变量,不能直接赋值,只能通过公有方法
a. 通过json生成对象的原始模式,多写几个就会非常麻烦,也不能反映出它们是同一个原型对象的实例
b. 原始模式的改进,可以写一个函数,解决代码重复的问题。同样不能反映出它们是同一个原型对象的实例
c. 构造函数模式,就是一个普通函数,不过内部使用了this变量,但是存在一个浪费内存的问题。
d. Prototype模式,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承,可以把那些不变的属性和方法,直接定义在prototype对象上。Prototype模式的验证方法:isPrototypeOf()“)、hasOwnProperty()”)和in运算符。
4.14、对this指针的理解,可以列举几种使用情况?
this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。
this指的是:调用函数的那个对象。
a. 纯粹的函数调用,属于全局性调用,因此this就代表全局对象Global。
b. 作为对象方法的调用,这时this就指这个上级对象。
c. 作为构造函数调用,就是通过这个函数new一个新对象(object)。这时,this就指这个新对象。
d. apply与call的调用,它们的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。
参考《Javascript的this用法》《this》,查看在线代码。
4.15、在JavaScript中,常用的绑定事件的方法有哪些?
a. 在DOM元素中直接绑定,DOM元素,可以理解为HTML标签,onXXX=“JavaScript Code”,查看事件列表。
b. 在JavaScript代码中绑定,elementObject.onXXX=function(){},通称为DOM0事件系统。
c. 绑定事件监听函数,标准浏览器使用 addEventListener()“) ,IE11以下版本attachEvent()”) 来绑定事件监听函数,通称为DOM2事件系统。
参考《JavaScript绑定事件的方法》《JavaScript中事件处理》
4.16、解释下javascript的冒泡和捕获
<div id="click1">
<div id="click2">
<div id="click3">事件</div>
</div>
</div>
a. Netscape主张元素1的事件首先发生,这种事件发生顺序被称为捕获型
b. 微软则保持元素3具有优先权,这种事件顺序被称为冒泡型
c. W3C选择了一个择中的方案。任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段
事件监听函数addEventListener()")的第三个参数就是控制方法是捕获还是冒泡
参考《事件》、《javascript的冒泡和捕获》,查看在线代码。
4.17、jQuery的特点
a. 一款轻量级的js库
b. 丰富快速的DOM选择器
c. 链式表达式
d. 事件、样式、动画等特效支持
e. Ajax操作封装,支持跨域
f. 跨浏览器兼容
g. 插件扩展开发
4.18、Ajax有哪些好处和弊端?
优点:
a. 无刷新更新数据
b. 异步与服务器通信
c. 前端和后端负载平衡
d. 基于标准被广泛支持
e. 界面与应用分离
缺点:
a. AJAX干掉了Back和History功能,即对浏览器机制的破坏
b. AJAX的安全问题
c. 对搜索引擎支持较弱
d. 违背URL和资源定位的初衷
参考《AJAX工作原理及其优缺点》
4.19、null和undefined的区别?
null:
a. null是一个表示"无"的对象,转为数值时为0
b. null表示"没有对象",即该处不应该有值。
undefined:
a. undefined是一个表示"无"的原始值,转为数值时为NaN。
b. undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。
4.20、new操作符具体干了什么呢?
a. 一个新对象被创建。它继承自函数原型
b. 构造函数被执行。执行的时候,相应的传参会被传入
c. 上下文(this)会被指定为这个新实例
d. 如果构造函数返回了一个“对象”,那么这个对象会取代整个new出来的结果
参考《new运算符》
分享一款实用面试助手 web前端面试助手
4.21、js延迟加载的方式有哪些?
a. 将script节点放置在最后之前
b. 使用script标签的defer和async属性,defer属性为延迟加载,是在页面渲染完成之后再进行加载的,而async属性则是和文档并行加载
c. 通过监听onload事件,动态添加script节点
d. 通过ajax下载js脚本,动态添加script节点
参考《javascript延迟加载方式》
4.22、如何解决跨域问题?
a. JSONP(JSON with Padding),填充式JSON
b. iframe跨域
c. HTML5的window.postMessage方法跨域
d. 通过设置img的src属性,进行跨域请求
e. 跨域资源共享(CORS),服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
4.23、documen.write和 innerHTML的区别
write:
a. 改变 HTML 输出流
b. 当在文档加载之后使用 document.write(),这会覆盖该文档。例如onload事件中
c. 输入css的style标签能改变样式,例如document.write(“”);
innerHTML:
a. 改变 HTML 内容
b. 输入css的style标签不能改变样式。也是能改变样式的
参考《JavaScript HTML DOM - 改变 HTML》
4.24、哪些操作会造成内存泄漏?
a. 当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。
b. 在IE中,如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象,垃圾收集系统则不会处理。
c. 闭包可以维持函数内局部变量,使其得不到释放。
d. 在销毁对象的时候,要遍历属性中属性,依次删除,否则会泄漏。
参考《js内存泄漏的几种情况》、《JavaScript内存分析》
4.25、JavaScript中的变量声明提升?
函数声明和变量声明总是被JavaScript解释器隐式地提升到包含他们的作用域的最顶端。
function优先声明于var。
函数表达式中只会提升名称,函数体只有在执行到赋值语句时才会被赋值。
function foo() {
bar();
var x = 1;
}
function foo() {//等同于
var x;
bar();
x = 1;
}
function test() {
foo(); // TypeError "foo is not a function"
bar(); // "this will run!"
var foo = function () { }// 函数表达式被赋值给变量'foo'
function bar() { }// 名为'bar'的函数声明
}
4.26、如何判断当前脚本运行在浏览器还是node环境中?
通过判断Global对象是否为window,如果是window,当前脚本运行在浏览器中
分享一款实用面试助手 web前端面试助手
4.27、什么是 “use strict”
ECMAscript 5添加了第二种运行模式:“严格模式”(strict mode)
设立"严格模式"的目的,主要有以下几个:
a. 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
b. 消除代码运行的一些不安全之处,保证代码运行的安全;
c. 提高编译器效率,增加运行速度;
d. 为未来新版本的Javascript做好铺垫。
注:经过测试IE6,7,8,9均不支持严格模式
4.28、eval是做什么的?
eval()")函数可计算某个字符串,并执行其中的的 JavaScript 代码。
eval()是一个顶级函数并且跟任何对象无关。
如果字符串表示了一个表达式,eval()会对表达式求值。如果参数表示了一个或多个JavaScript声明, 那么eval()会执行声明。
4.29、JavaScript原型,原型链 ?
原型:
a. 原型是一个对象,其他对象可以通过它实现属性继承。
b. 一个对象的真正原型是被对象内部的[[Prototype]]属性(property)所持有。浏览器支持非标准的访问器__proto__。
c. 在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,string),那它就是一个对象。
原型链:
a. 因为每个对象和原型都有一个原型(注:原型也是一个对象),对象的原型指向对象的父,而父的原型又指向父的父,我们把这种通过原型层层连接起来的关系称为原型链。
b. 这条链的末端一般总是默认的对象原型。
a.__proto__ = b;
b.__proto__ = c;
c.__proto__ = {}; //default object
{}.__proto__.__proto__; //null
参考《理解JavaScript原型》《原型》
4.30、画出此对象的内存图
4.31、JQuery与jQuery UI 有啥区别?
jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
4.32、jQuery的源码看过吗?能不能简单说一下它的实现原理?
jQuery给我们带来了一个简洁方便的编码模型(1>创建jQuery对象;2>直接使用jQuery对象的属性/方法/事件),
一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的”配置”对象思想
参考《jQuery工作原理解析以及源代码示例》《jQuery系列分析》
4.33、jQuery 中如何将数组转化为json字符串
在jQuery1.8.3中有个方法“parseJSON”,在这个方法中会做从string转换为json。
如果当前浏览器支持window.JSON,那就直接调用这个对象中的方法。
如果没有就使用( new Function( "return " + data ) )();执行代码返回。
4.34、请写出console.log中的内容
1 var msg = 'hello';//顶级作用域window下有个变量msg
2 function great(name, attr) {
3 var name = 'david';
4 var greating = msg + name + '!';
5 var msg = '你好';
6 for (var i = 0; i < 10; i++) {
7 var next = msg + '你的id是' + i * 2 + i;
8 }
9 console.log(arguments[0]);
10 console.log(arguments[1]);
11 console.log(greating);
12 console.log(next);
13 }
14 great('Tom')
a. arguments[0]被覆盖了
b. msg出现了声明提升,可以查看4.25的例子
js基础
1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
考《jQuery工作原理解析以及源代码示例》《jQuery系列分析》
4.33、jQuery 中如何将数组转化为json字符串
在jQuery1.8.3中有个方法“parseJSON”,在这个方法中会做从string转换为json。
如果当前浏览器支持window.JSON,那就直接调用这个对象中的方法。
如果没有就使用( new Function( "return " + data ) )();执行代码返回。
4.34、请写出console.log中的内容
1 var msg = 'hello';//顶级作用域window下有个变量msg
2 function great(name, attr) {
3 var name = 'david';
4 var greating = msg + name + '!';
5 var msg = '你好';
6 for (var i = 0; i < 10; i++) {
7 var next = msg + '你的id是' + i * 2 + i;
8 }
9 console.log(arguments[0]);
10 console.log(arguments[1]);
11 console.log(greating);
12 console.log(next);
13 }
14 great('Tom')
a. arguments[0]被覆盖了
b. msg出现了声明提升,可以查看4.25的例子
js基础
1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?
[外链图片转存中…(img-YKfA08OH-1714184580322)]
[外链图片转存中…(img-U5U7sjW4-1714184580323)]