Front End Developer Questions 前端开发人员问题

Posted saucxs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Front End Developer Questions 前端开发人员问题相关的知识,希望对你有一定的参考价值。

问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/

1、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
答:告诉浏览器我们使用的是哪个版本的html协议(规范)。(对大小写不敏感)
严格模式中根据规范呈现页面;混杂模式中页面是一种比较宽松的向后兼容的方式显示。
(1)严格模式的HTML 4.0.1 strict
DTD包括所有的HTML元素和属性,不包括展示的和弃用的元素。不许框架集(Framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(2)混杂模式
DTD包括所有的HTML元素和属性,包括展示的和弃用的元素,以及框架集(Framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
模式之间差异:最显著的一个例子与Windows上IE专有的盒模型有关
意义:DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2、HTML5 为什么只需要写 <!DOCTYPE HTML>?
答:表示声明Html5标准网页,支持html5标准主流浏览器都认识这个声明。

3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
答:行内元素:a-描点;em-强调;strong-粗体强调;span-定义文本内区块;i-斜体;img-图片;b-
粗体;label-表格标签;select-项目选择;textarea-多行文本输入框;sub-下标;sup-上标;q-短引

块元素:div-常用块;dl-定义列表;dt;dd;ul-非排序列表;li-排序列表;ol-排序表单;p-段落;
h1,h2,h3,h4,h5-标题;table-表格;form-表单
空元素:br-换行;hr-水平分隔线


4、页面导入样式时,使用link和@import有什么区别?
答:相同的地方,都是外部引用CSS方式,区别:
(1)link是xhtml标签,除了加载css外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载 CSS
(2)link引用CSS时候,页面载入时同时加载;@import需要在页面完全加载以后加载
(3)link是xhtml标签,无兼容问题;@import是在css2.1提出来的,低版本的浏览器不支持
(4)link支持使用javascript控制去改变样式,而@import不支持
最优化的@import url(style.css)最值得推荐,字节最优化,兼容的浏览器多。

5、介绍一下你对浏览器内核的理解?
答:主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和js引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网
页的显示方式,然后会输出至显示器或打印 机。浏览器的内核的不同对于网页的语法解释会有不同,
所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用
程序 都需要内核。
JS引擎则:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

6、常见的浏览器内核有哪些?
答;(1)Trident 微软的排版引擎 IE7修正许多CSS排版上的错误以及增加对PNG格式的支持:IE,The
World
(2)Geckos 开源的浏览器,:FireFox,seamonkey
(3)presto 渲染速度极速:opera7以上版本
(4)webkit 苹果公司的内核,包含webcore排版引擎和javascript解析引擎。:safari,chrome

7、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答:新增加了图像、位置、存储、多任务等功能。
新增几大类:
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素,比如 article、footer、header、nav、section;
(6)表单控件,calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
移除的元素:
(1)显示层元素:basefont,big,center,font,s,strike,tt,u
(2)性能较差元素:frame,frameset,noframes
处理HTML5新标签的浏览器兼容问题:
(1)IE8、7、6支持document方法产生的标签
(2)使用htmlshim框架
区分:
(1)doctype声明的方式是区分重要因素
(2)根据新增加的结构、功能来区分

8、简述一下你对HTML语义化的理解?
答:用正确的标签做正确的事情。根据内容结构化。选择合适的标签,便于开发者阅读和写出更优雅的
代码,同时让浏览器的爬虫进行解析。

9、HTML5的离线储存怎么使用,工作原理能不能解释一下?
答:所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面加载将使用本地的资源文件,在
离线的情况下可以继续访问web应用。

原理:HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术),通过这个文
件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。

10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
答:(1)html5是使用一个manifest文件来标明那些文件是需要被存储,对于manifest文件,文件的
mime-type必须是text/cache-manifest类型。
(2)cache manifest下直接写需要缓存的文件,这里指明文件被缓存到浏览器本地;在network下指明
的文件,强制必须通过网络资源获取的;在failback下指明是一种失败的回调方案,比如无法访问,就
发出404.htm请求。

11、请描述一下 cookies,sessionStorage 和 localStorage 的区别?
答:共同点:都是保存在浏览器端,且是同源的。
区别:(1)cookies始终是http中携带,即cookie在浏览器和服务器间来回传递,而sessionstorage和
localstorage不会自动把数据发给服务器,仅在本地保存。
(2)存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage
保存的数据大,可达到5M。
(3)数据的有效期不同。cookie只在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭
。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保
存,用作长久数据保存。
(4)作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使
同一页面,localstorage在所有同源窗口都是共享的。


12、iframe框架有那些缺点?
答:优点:1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的
更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加
代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点:(1)搜索引擎的“爬虫”程序无法解读这种页面。对于网站来说就是一种灾难
(2)框架结构让人感到迷茫,几个框架中出现各种滚动条。
(3)链接导航问题。使用框架结构时,保证设置正确的导航链接。
(4)iframe页面会增加服务器的http请求(基本上都用ajax来代替iframe)

13、Label的作用是什么?是怎么用的?(加 for 或 包裹)
答:Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
FOR属性
功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。
用法:<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY属性:
功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。
用法:<Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input ID="InputBox"
type="text">

14、HTML5的form如何关闭自动完成功能?
答:HTML的输入框可以拥有自动完成的功能,当你往输入框输入内容的时候,浏览器会从你以前的同名
输入框的历史记录中查找出类似的内容并列在输入框下面,这样就不用全部输入进去了,直接选择列表
中的项目就可以了。

但有时候我们希望关闭输入框的自动完成功能,例如当用户输入内容的时候,我们希望使用AJAX技术从
数据库搜索并列举而不是在用户的历史记录中搜索。

方法:1、在IE的internet选项菜单中里的内容--自动完成里面设置
2、设置form的autocomplete为on或者off来来开启输入框的自动完成功能。
3、设置输入框的autocomplete为on或者off来开启或者关闭输入框自动完成的功能。


15、如何实现浏览器内多个标签页之间的通信? (阿里)
答:WebSocket、SharedWorker;也可以调用 localstorge、cookies 等本地存储方式;localstorge 另
一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进
行页面信息通信;注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出
QuotaExceededError 的异常;

16、webSocket如何兼容低浏览器?(阿里)
答:只是引用了WebSocket.js这个文件来兼容低版本浏览器。

17、页面可见性(Page Visibility)API 可以有哪些用途?
答:(1)通过visibilitystate的值得检测页面当前是否可见,以及打开网页的时间
(2)在页面被切换到其他后台进程时,自动暂停音乐或视频的播放。

18、如何在页面上实现一个圆形的可点击区域?
(1)map+area或者svg
(2)border-radius
(3)纯js实现,一个点不在圆上简单算法、获取鼠标坐标

19、实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一
效果。
<div style="height:1px;overflow:hidden;background:red"></div>

20、网页验证码是干嘛的,是为了解决什么安全问题?
答:(1)区分用户是计算机还是人的公共全自动程序。
(2)可以防止恶意破解密码、刷票、论坛灌水;可以有效防止黑客对某一个特定的注册用户用特定的
程序暴力破解进行不断的尝试。

21、tite与h1的区别、b与strong的区别、i与em的区别?
答:(1)title属性没有明确意义,只表示标题;h1表示层次明确的标题,对页面信息的抓取也有很大
的影响
(2)strong标明重点内容,语气加强含义;b是展示强调内容
(3)i是内容是斜体;em表示强调文本
注:自然样式标签:b,i,u,s
语义样式标签:strong,em,ins,del,code

以上是关于Front End Developer Questions 前端开发人员问题的主要内容,如果未能解决你的问题,请参考以下文章

Front End Developer Questions 前端开发人员问题

Hiring | MCAP is hiring a Senior Front End Developer(MVC)

I want to be a Great Web Front-end Developer

关于SP, front end director, back end director, SP

The Front-End Checklist

前端 | Front-End