a.域名解析
b.发起TCP的3次握手
e.浏览器解析html代码,并请求html代码中的资源
f.浏览器对页面进行渲染呈现给用户
1.2、谈谈你对前端性能优化的理解
a.请求数量:合并脚本和样式表,CSSSprites,拆分初始化负载,划分主域
b.请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体
c.缓存利用:使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存
d.页面结构:将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出
e.代码校验:避免CSS表达式,避免重定向
1.3、前端MV*框架的意义
早期前端都是比较简单,基本以页面为工作单元,内容以浏览型为主,也偶尔有简单的表单操作,基本不太需要框架。
随着AJAX的出现,Web2.0的兴起,人们可以在页面上可以做比较复杂的事情了,然后前端框架才真正出现了。
如果是页面型产品,多数确实不太需要它,因为页面中的JavaScript代码,处理交互的绝对远远超过处理模型的,但是如果是应用软件类产品,这就太需要了。
长期做某个行业软件的公司,一般都会沉淀下来一些业务组件,主要体现在数据模型、业务规则和业务流程,这些组件基本都存在于后端,在前端很少有相应的组织。
从协作关系上讲,很多前端开发团队每个成员的职责不是很清晰,有了前端的MV框架,这个状况会大有改观。
之所以感受不到MV*框架的重要性,是因为Model部分代码较少,View的相对多一些。如果主要在操作View和Controller,那当然jQuery这类库比较好用了。
1.4、请简述盒模型
IE6盒子模型与W3C盒子模型。
文档中的每个元素被描绘为矩形盒子。盒子有四个边界:外边距边界margin,边框边界border,内边距边界padding与内容边界content。
content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。(W3C盒子模型)
border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。(IE6盒子模型)
1.5、请你谈谈Cookie的弊端
a.每个特定的域名下最多生成的cookie个数有限制
b.IE和Opera会清理近期最少使用的cookie,Firefox会随机清理cookie
c.cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节
d.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。
1.6、浏览器本地存储
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
1.7、webstorage和cookie的区别
a.Cookie的大小是受限的
b.每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽
c.cookie还需要指定作用域,不可以跨域调用
d.WebStorage拥有setItem,getItem等方法,cookie需要前端开发者自己封装setCookie,getCookie
e.Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而WebStorage仅仅是为了在本地“存储”数据而生
f.IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持webstorage
1.8、对BFC规范的理解
BFC全称是BlockFormattingContext,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。
BFC是页面CSS视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
利用BFC可以闭合浮动,防止与浮动元素重叠。
1.9、线程与进程的区别
a.一个程序至少有一个进程,一个进程至少有一个线程
b.线程的划分尺度小于进程,使得多线程程序的并发性高
c.进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率
d.每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制
e.多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配
a.尽量减少页面中重复的HTTP请求数量
b.服务器开启gzip压缩
c.css样式的定义放置在文件头部
d.Javascript脚本放在文件末尾
e.压缩合并Javascript、CSS代码
f.使用多域名负载网页内的多个文件、图片
1.11、你都使用哪些工具来测试代码的性能?
1.12、你遇到过比较难的技术问题是?你是如何解决的?
1.13、常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
1.14、列举IE与其他浏览器不一样的特性?
a.IE的排版引擎是Trident(又称为MSHTML)
b.Trident内核曾经几乎与W3C标准脱节(2005年)
c.Trident内核的大量Bug等安全性问题没有得到及时解决
d.JS方面,有很多独立的方法,例如绑定事件的attachEvent、创建事件的createEventObject等
e.CSS方面,也有自己独有的处理方式,例如设置透明,低版本IE中使用滤镜的方式
1.15、什么叫优雅降级和渐进增强?
渐进增强progressiveenhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级gracefuldegradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:
a.优雅降级是从复杂的现状开始,并试图减少用户体验的供给
b.渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
c.降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
1.16、WEB应用从服务器主动推送Data到客户端有那些方式?
a.html5websoket
b.WebSocket通过Flash
d.XHRMultipartStreaming
e.不可见的Iframe
1.17、对前端界面工程师这个职位是怎么样理解的?
a.前端是最贴近用户的程序员,前端的能力就是能让产品从90分进化到100分,甚至更好
b.参与项目,快速高质量完成实现效果图,精确到1px;
c.与团队成员,UI设计,产品经理的沟通;
d.做好的页面结构,页面重构和用户体验;
e.处理hack,兼容、写出优美的代码格式;
f.针对服务器的优化、拥抱最新前端技术。
1.18、你在现在的团队处于什么样的角色,起到了什么明显的作用?
1.19、你的优点是什么?缺点是什么?
1.20、如何管理前端团队
1.21、最近在学什么?能谈谈你未来3,5年给自己的规划吗?
1.22、平时如何管理你的项目?
a.先期团队必须确定好全局样式(globe.css),编码模式(utf-8)等;
b.编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
c.标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
d.页面进行标注(例如页面模块开始和结束);
e.CSS跟HTML分文件夹并行存放,命名都得统一(例如style.css);
f.JS分文件夹存放命名以该JS功能为准的英文翻译。
g.图片采用整合的images.pngpng8格式文件使用尽量整合在一起使用方便将来的管理
1.23、说说最近最流行的一些东西吧?常去哪些网站?
CSDN、SegmentFault、php.net、MDN、css参考手册、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
1.24、Flash、Ajax各自的优缺点,在使用中如何取舍?
Flash:a.Flash适合处理多媒体、矢量图形、访问机器
b.对CSS、处理文本上不足,不容易被搜索
Ajax:
a.Ajax对CSS、文本支持很好,支持搜索
b.多媒体、矢量图形、机器访问不足
共同点:
a.与服务器的无刷新传递消息
b.可以检测用户离线和在线状态
c.操作DOM
1.25、请解释一下JavaScript的同源策略
同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。
1.26、AMD和CMD规范的区别?
AMD提前执行依赖-尽早执行,requireJS是它的实现
CMD按需执行依赖-懒执行,seaJS是它的实现
1.27、网站重构的理解
重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。
a.使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b.对于移动平台的优化,针对于SEO进行优化
c.减少代码间的耦合,让代码保持弹性
d.压缩或合并JS、CSS、image等前端资源
1.28、浏览器的内核分别是什么
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
1.29、请介绍下cache-control
每个资源都可以通过Cache-ControlHTTP头来定义自己的缓存策略
Cache-Control指令控制谁在什么条件下可以缓存响应以及可以缓存多久
Cache-Control头在HTTP/1.1规范中定义,取代了之前用来定义响应缓存策略的头(例如Expires)。
1.30、前端页面有哪三层构成,分别是什么?作用是什么?
a.结构层:由HTML或XHTML之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。
b.表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。
c.行为层:由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
1.31、知道的网页制作会用到的图片格式有哪些?
png-8,png-24,jpeg,gif,svg
Webp:谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。FacebookEbay等知名网站已经开始测试并使用WebP格式。
Apng:全称是“AnimatedPortableNetworkGraphics”,是PNG的位图动画扩展,可以实现png格式的动态图片效果。04年诞生,但一直得不到各大浏览器厂商的支持,直到日前得到iOSsafari8的支持,有望代替GIF成为下一代动态图标准。
1.32、一次js请求一般情况下有哪些地方会有缓存处理?
a.浏览器端存储
b.浏览器端文件缓存
c.HTTP缓存304
d.服务器端文件类型缓存
e.表现层&DOM缓存
1.33、一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。
a.图片懒加载,滚动到相应位置才加载图片。
b.图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。
c.使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。
d.如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
1.34、谈谈以前端角度出发做好SEO需要考虑什么?
a.了解搜索引擎如何抓取网页和如何索引网页
b.meta标签优化
c.关键词分析
d.付费给搜索引擎
e.链接交换和链接广泛度(LinkPopularity)
f.合理的标签使用
2.1、标签上title属性与alt属性的区别是什么?
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。
2.2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体
2.3、请写出至少5个html5新增的标签,并说明其语义和应用场景
section:定义文档中的一个章节
nav:定义只包含导航链接的章节
header:定义页面或章节的头部。它经常包含logo、页面标题和导航性的目录。
aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
2.4、请说说你对标签语义化的理解?
a.去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
c.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
d.便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
2.5、Doctype作用严格模式与混杂模式如何区分?它们有何意义
严格模式的排版和JS运作模式是,以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.6、你知道多少种Doctype文档类型?
HTML4.01规定了三种文档类型:Strict、Transitional以及Frameset。
XHTML1.0规定了三种XML文档类型:Strict、Transitional以及Frameset。
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
2.7、HTML与XHTML——二者有什么区别
a.XHTML元素必须被正确地嵌套。
b.XHTML元素必须被关闭。
c.标签名必须用小写字母。
d.XHTML文档必须拥有根元素。
2.8、html5有哪些新特性、移除了那些元素?
a.HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。
b.拖拽释放(Draganddrop)API
c.语义化更好的内容标签(header,nav,footer,aside,article,section)
i.表单控件,calendar、date、time、email、url、search
移除的元素:
a.纯表现的元素:basefont,big,center,s,strike,tt,u;
b.对可用性产生负面影响的元素:frame,frameset,noframes;
2.9、iframe的优缺点?
优点:
b.iframe无刷新文件上传
c.iframe跨域通信
缺点:
a.iframe会阻塞主页面的Onload事件
b.无法被一些搜索引擎索引到
d.会产生很多页面,不容易管理。
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:0auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
2.11、请阐述table的缺点
a.太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b.灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c.代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e.不够语义
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
3.1、谈谈你对CSS布局的理解
3.2、请列举几种可以清除浮动的方法(至少两种)
浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)。
a.添加额外标签,例如
b.使用br标签和其自身的html属性,例如
d.父元素设置overflow:auto属性;同样IE6需要触发hasLayout
e.父元素也设置浮动
f.父元素设置display:table
g.使用:after伪元素;由于IE6-7不支持:after,使用zoom:1触发hasLayout。
创建了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.HTML5hiddenattribute;hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态
g.height:0;overflow:hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。
h.filter:blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。
3.4、如何让一段文本中的所有英文单词的首字母大写
none|capitalize(将每个单词的第一个字母转换成大写)|uppercase(将每个单词转换成大写)|lowercase(将每个单词转换成小写)
3.5、请简述CSS样式表继承
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
3.7、CSS伪类与CSS伪对象的区别
CSS引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
根本区别在于:它们是否创造了新的元素(抽象)
伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
3.8、请简述CSS的权重规则
一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。
3.9、请写出多种等高布局
a.假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像
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有哪些新特性?
增加了更多的CSS选择器多背景rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局
3.15、为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
3.16、解释下CSSsprites原理,优缺点
CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中,
再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,
background-position可以用数字精确的定位出背景图片的位置。
b.减少图片的字节
c.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
d.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。
a.在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂
b.CSSSprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c.在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片
3.17、解释下浮动和它的工作原理?
a.浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
b.浮动元素碰到包含它的边框或者浮动元素的边框停留。
3.18、浮动元素引起的问题
a.父元素的高度无法被撑开,影响与父元素同级的元素
b.与浮动元素同级的非浮动元素会跟随其后
c.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
3.19、什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?
如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(FlashofUnstyledContent),简称为FOUC。
原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:使用LINK标签将样式表放在文档HEAD中。
3.20、line-height三种赋值方式有何区别?(带单位、纯数字、百分比)
带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高
纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px
百分比:将计算后的值传递给后代
3.21、:link、:visited、:hover、:active的执行顺序是怎么样的?
L-V-H-A,l(link)ov(visited)eh(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代码放在