1.SPA单页面web应用的实现原理?
页面中有导航部分、导航部分,导航部分的属性data-page对应着页面模块的class。在主模块里面,每个div的class会映射到相应的js文件,比如page-one.js, page-two.js等。当点击导航时,通过哈希监听事件,如果哈希发生了变化,则改变哈希值:window.location.hash,来调用相应的js文件。相应的js文件里面可以放数据模板,当用page请求并返回数据时,渲染模板,生成相应的DOM结构,再插入对应的page的div中。、
优点:SPA单页面的优点是很多的,比如MVC模式,利于后期维护管理,前后端分离,性能好,提升用户体验。
缺点:随着页面增加,单页HTML里边的DOM可能会越来越多,js处理逻辑多而复杂。但是html里面DOM增多还是会有优化方法的,比如删除DOM,存进缓存,等真正显示的时候再添加DOM.
2.jsonp是什么?
jsonp是json的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的
15.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
- link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
- 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
- import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
- link方式的样式的权重 高于@import的权重.
Link 支持使用javascript改变样式,后者不可
16.CSS隐藏元素的几种方法(至少说出三种)
- Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
- Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
- Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
- Position:不会影响布局,能让元素保持可以操作;
- Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;
17.对BFC规范的理解?(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),
因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
18.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
19.display:inline-block 什么时候会显示间隙?(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
20.iframe有那些缺点?
*iframe会阻塞主页面的Onload事件;
*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
21.介绍一下CSS的盒子模型?
- 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 padding;
- 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
22.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
- id选择器( # myid)
- 类选择器(.myclassname)
- 标签选择器(div, h1, p)
- 相邻选择器(h1 + p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器( * )
- 属性选择器(a[rel = “external”])
- 伪类选择器(a: hover, li: nth – child)
- 可继承的样式: font-size font-family color, UL LI DL DD DT;
- 不可继承的样式:border padding margin width height ;
- 优先级就近原则,同权重情况下样式定义最近者为准;
- 优先级为:
CSS3新增伪类举例:
12 !important > id > class > tagimportant 比 内联优先级高
p:first-of-type 选择属于其父元素的首个元素的每个
元素。
p:last-of-type 选择属于其父元素的最后元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
23.请问 “resetting” 和 “normalizing” CSS 之间的区别?你会如何选择,为什么?
Normalize 相对「平和」,注重通用的方案,重置掉该重置的样式,保留有用的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。
Reset 相对「暴力」,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。【摘自知乎】
Normalize.css是一种CSS reset的替代方案。它们的区别有:
1. Normalize.css 保护了有价值的默认值,Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.css 修复了浏览器的bug,它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3.Normalize.css 不会让你的调试工具变的杂乱
4. Normalize.css 是模块化的
5. Normalize.css 拥有详细的文档
选择Normalize.css ,主要是reset.css为几乎所有的元素施加默认样式,所以需要对所有公共的排版元素重新设置样式,这是一件很麻烦的工作。
24.请解释浮动 (Floats) 及其工作原理。
答:float属性定义了元素是否浮动及在哪个方向浮动,在CSS中任何元素都可以浮动,且浮动元素会生成一个块级框,而不论它本身是何种元素。并且盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定。浮动属性会使得浮动的元素脱离文档流,所以文档的普通流中的块框会表现的像浮动框不存在一样。
25.描述z-index和叠加上下文是如何形成的。
首先来看在CSS中叠加上下文形成的原因:
1.负边距
margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。
2.position的relative/absolute/fixed定位
当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
z-index属性
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理:z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
使用相对性:z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)。向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序。同级元素的z-index值如果相同,则堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了,请先检查它们之间的dom结点关系,多半是因为其父结点含有激活并设置了z-index值的position定位元素。
26.block,inline和inline-block的概念以及区别
首先这是display中的三个属性值,不是元素指类型,元素类型在HTML5之前分为两种分别是块级元素( block-level elements)和内连元素( inline elements)。但是当display的属性值被设置为block时,元素会以块级元素( block-level elements)显示,而设置为inline时会以内连元素( inline elements)显示。
display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。即对inline-block元素可以设置宽度和高度,同时inline-block元素又可以在同行进行排列。
备注:属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。且IE6和7是不支持这个属性的,需要通过*display:inline;*zoom:1做hack处理。
27.你最喜欢的图片替换方法是什么,你如何选择使用。
设计师能够用一张背景图像替代某元素中的原始文字,以期显示出更美观的字体。
实现方法
一:添加span标签
该技巧的实现非常简单:用span将元素中的文本包围起来,然后通过应用CSS样式隐藏这个span中的文本,最后将背景图像应用到该元素之上即可。例如,对于下面的这一段HTMl标记。
二、负text-indent属性值
设计师Mike Rundle提出了一种使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外。虽然该方案的适用性并不广泛——IE 5.0会将背景图片随文本一起推出浏览者的视线范围——但却相当简洁优雅。
缺点:并没有解决浏览器禁用图像后空白页面的可访问性问题;有时在IE 5.0中无法使用。意义:而图像替换技术则保留了被替换元素中的原有文本,因此无论对何种客户而言,理解页面内容都不成问题。主要是考虑SEO,而非视觉上的效果。
28.使用 CSS 预处理器的优缺点有哪些?请描述你曾经使用过的 CSS 预处理器的优缺点。
普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。
CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。
总结来讲就是用编程的方法来写CSS样式,而不是手工一行行码,相当于从手工业时代进化到工业时代。
29.什么是CSS 预处理器 / 后处理器?
- 预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,
还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
- 后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的
是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
30.写出几种IE6 BUG的解决方法?
1.双边距BUG float引起的 使用display:inline
2. 3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png IE下不透明问题 使用js代码 改
6.Min-height 最小高度问题 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 ,line-height:1px)
31.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto;
* png24为的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“\9”这一标记,将IE浏览器从所有情况中分离出来。
接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* (条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
32.使用 window.top.document.compatMode 可显示为什么模式?
33. li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,
占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
34.absolute的containing block(容器块)计算方式跟正常流有什么不同?
无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:
1、若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和
最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;
2、否则,则由这个祖先元素的 padding box 构成。
如果都找不到,则为 initial containing block。
补充:
1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block
35.CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
36.请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
37.css动画和js动画的优缺点
CSS3的动画
- 优点:
- 1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)
- 2.代码相对简单
- 缺点:
- 1.在动画控制上不够灵活
- 2.兼容性不好
- 3.部分动画功能无法实现(如滚动动画,视差滚动等)
JavaScript的动画
- 优点:
- 1.控制能力很强,可以单帧的控制、变换
- 2.兼容性好,写得好完全可以兼容IE6,且功能强大。
- 缺点:
- 计算没有css快,另外经常需要依赖其他的库。
结论
- 所以,不复杂的动画完全可以用css实现,复杂一些的,或者需要交互的时候,用js会靠谱一些~
38.你如何对网站的文件和资源进行优化?期待的解决方案包括:
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
39.页面重构怎么操作?
编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。
40.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
* 使用率较高的框架有jQuery、YUI、Prototype(http://wenda.so.com/q/1461241889727281?src=140)、Dojo、Ext.js、Mootools等。尤其是jQuery,超过91%。
轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
(理解这些框架的功能、性能、设计原理)
* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
* 城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源程序,加载器,js引擎更好)
41.说几条写JavaScript的基本规范?
1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值,有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染。
42.WEB应用从服务器主动推送Data到客户端有那些方式?
html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe