前端面试宝典（整理ing）
2016-08-30 20:17
344 查看
1、Doctype作用？标准模式与兼容模式各有什么区别？
（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于html标签前面，告知浏览器的解析器需要用什么文档标准解析这个文档。Doctype不存在或格式不正确会导致文档以兼容模式呈现。
（2）标准模式的排版和JS运作模式都是以浏览器支持的最高标准允许。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老浏览器的行为以防止站点无法工作。
2、HTML5为什么只需要写<!DOCTYPE HTML>?
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要Doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML，所以需要DTD进行引用，才能告知浏览器文档所使用的文档类型。
3、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载css外，还能定义RSS，定义rel连接属性等作用；而@import是css提供的，只能用于加载css；
（2）页面被加载时候，link会同时被加载，而@inport引用的css会等到页面被加载完再加载；
（3）import是css2.1提出的，只有在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4、介绍一下你对浏览器内核的理解，常见的浏览器内核？
主要分为两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（加入css等），以及计算网页的显示方式，然后输出至显示器。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
常见的内核：Trident内核：IE，MaxTom，腾讯TT，The World，360，搜狗浏览器等；---Gecko内核：Netscape6及以上版本，FF，等；---Presto内核：Opera7及其以上；---Webkit内核：safari，Chrome等。Blink内核是Webkit内核的分支。
5、html5有哪些新特性、移除了哪些元素？
HTML5已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘制canvas；用于媒介回放的video和audio元素；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；语义化更好的内容元素，比如article、footer、header、nav、section；表单控件，calender、date、time、email、url、search；新的技术webworker，websocket、Geolocation；
删除的元素：纯表现的元素：basefont、big、center、font、s、strike、tt、u；对可用性产生影响的元素：frame、frameset、noframes；
6、简述一下对HTML语义化的理解？
用正确的标签做正确的事。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式css情况下也以一种文档格式显示，并且容易阅读；搜索引擎的爬虫也依赖于HTML标记来确定上下文各个关键字的权重，利于SEO；使阅读源代码的人更容易将网站分块，便于阅读维护理解。
7、HTML5离线存储怎么使用，原理？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下，浏览器会通过被离线存储的数据进行页面展示。
8、浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源存储页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生变化，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源进行离线存储。离线的话，浏览器就会直接使用离线存储的资源。
9、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用的hack的技巧？
（1）png24位的图片在IE6浏览器上出现背景，解决办法----做成PNG8
（2）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。----浮动IE产生的双倍距离 #box{ float: left;width: 10px; margin: 0 0 0 100px;}，这种情况下，会产生20px的距离，解决办法是在float的标签样式控制中加入 _display:inline；将其转化为行内属性。
（3）chrome中文界面下默认将小于12px的文本强制按照12px显示；------可通过加入css属性 -webkit-text-size-adjust：none；
10、对BFC规范（块级格式化上下文）的理解？
具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素。
满足下面任一条件的元素，会触发为 BFC ：
浮动元素，float 除 none 以外的值；
绝对定位元素，position（absolute，fixed）；
display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
overflow 除了 visible 以外的值（hidden，auto，scroll）。
11、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60HZ，即1s刷新60次，所以理论上最小间隔是1/60*1000ms=16.7ms.
12、JS基本数据类型？
Undefined、Null、Boolean、Number、String
13、说几条JavaScript的基本规范？
（1）不要在同一行声明多个变量；
（2）请使用===/!==来比较true/false或者数值；
（3）使用对象字面量替代new Array这种形式；
（4）不要使用全局函数
（5）Switch语句必须带有default分支；
（6）函数不应该有时候有返回值，有时候没有返回值；
（7）For循环必须使用大括号；
（8 ）for in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染
14、前端性能优化的办法？
（1）减少http请求次数：css Sprites，JS、CSS源码压缩、图片大小控制合适；网页Gzip,CDN托管，data缓存，图片服务器
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数；
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能；
（4）当需要设置的样式很多时设置className而不是直接操作style；
（5）少用全局变量、缓存DOM节点查找的结果，减少IO读取操作；
（6）避免使用css Expression又称Dynamic Properties（动态属性）；
（7）图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳；
（8）避免在页面的主题布局中使用table，table要等其中的内容完全下载后才会显示出来，显示比div+css布局慢；
总体来说，进来向前端优化、减少数据库操作、减少磁盘IO。向前端优化是指，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机能取得的数据不要到远程取，内存能取到的不要到磁盘取。
（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于html标签前面，告知浏览器的解析器需要用什么文档标准解析这个文档。Doctype不存在或格式不正确会导致文档以兼容模式呈现。
（2）标准模式的排版和JS运作模式都是以浏览器支持的最高标准允许。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老浏览器的行为以防止站点无法工作。
2、HTML5为什么只需要写<!DOCTYPE HTML>?
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要Doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML，所以需要DTD进行引用，才能告知浏览器文档所使用的文档类型。
3、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载css外，还能定义RSS，定义rel连接属性等作用；而@import是css提供的，只能用于加载css；
（2）页面被加载时候，link会同时被加载，而@inport引用的css会等到页面被加载完再加载；
（3）import是css2.1提出的，只有在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4、介绍一下你对浏览器内核的理解，常见的浏览器内核？
主要分为两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（加入css等），以及计算网页的显示方式，然后输出至显示器。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
常见的内核：Trident内核：IE，MaxTom，腾讯TT，The World，360，搜狗浏览器等；---Gecko内核：Netscape6及以上版本，FF，等；---Presto内核：Opera7及其以上；---Webkit内核：safari，Chrome等。Blink内核是Webkit内核的分支。
5、html5有哪些新特性、移除了哪些元素？
HTML5已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘制canvas；用于媒介回放的video和audio元素；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；语义化更好的内容元素，比如article、footer、header、nav、section；表单控件，calender、date、time、email、url、search；新的技术webworker，websocket、Geolocation；
删除的元素：纯表现的元素：basefont、big、center、font、s、strike、tt、u；对可用性产生影响的元素：frame、frameset、noframes；
6、简述一下对HTML语义化的理解？
用正确的标签做正确的事。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式css情况下也以一种文档格式显示，并且容易阅读；搜索引擎的爬虫也依赖于HTML标记来确定上下文各个关键字的权重，利于SEO；使阅读源代码的人更容易将网站分块，便于阅读维护理解。
7、HTML5离线存储怎么使用，原理？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下，浏览器会通过被离线存储的数据进行页面展示。
8、浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源存储页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生变化，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源进行离线存储。离线的话，浏览器就会直接使用离线存储的资源。
9、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用的hack的技巧？
（1）png24位的图片在IE6浏览器上出现背景，解决办法----做成PNG8
（2）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。----浮动IE产生的双倍距离 #box{ float: left;width: 10px; margin: 0 0 0 100px;}，这种情况下，会产生20px的距离，解决办法是在float的标签样式控制中加入 _display:inline；将其转化为行内属性。
（3）chrome中文界面下默认将小于12px的文本强制按照12px显示；------可通过加入css属性 -webkit-text-size-adjust：none；
10、对BFC规范（块级格式化上下文）的理解？
具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素。
满足下面任一条件的元素，会触发为 BFC ：
浮动元素，float 除 none 以外的值；
绝对定位元素，position（absolute，fixed）；
display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
overflow 除了 visible 以外的值（hidden，auto，scroll）。
11、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60HZ，即1s刷新60次，所以理论上最小间隔是1/60*1000ms=16.7ms.
12、JS基本数据类型？
Undefined、Null、Boolean、Number、String
13、说几条JavaScript的基本规范？
（1）不要在同一行声明多个变量；
（2）请使用===/!==来比较true/false或者数值；
（3）使用对象字面量替代new Array这种形式；
（4）不要使用全局函数
（5）Switch语句必须带有default分支；
（6）函数不应该有时候有返回值，有时候没有返回值；
（7）For循环必须使用大括号；
（8 ）for in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染
14、前端性能优化的办法？
（1）减少http请求次数：css Sprites，JS、CSS源码压缩、图片大小控制合适；网页Gzip,CDN托管，data缓存，图片服务器
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数；
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能；
（4）当需要设置的样式很多时设置className而不是直接操作style；
（5）少用全局变量、缓存DOM节点查找的结果，减少IO读取操作；
（6）避免使用css Expression又称Dynamic Properties（动态属性）；
（7）图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳；
（8）避免在页面的主题布局中使用table，table要等其中的内容完全下载后才会显示出来，显示比div+css布局慢；
总体来说，进来向前端优化、减少数据库操作、减少磁盘IO。向前端优化是指，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机能取得的数据不要到远程取，内存能取到的不要到磁盘取。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端面试资料整理
- 前端面试整理<特别多，耐心看基础面试题部分基本没有问题了！！！>
- 前端面试整理
- C++面试宝典（整理版）6
- [置顶] 前端面试整理********************************************************
- 传智播客Java面试宝典 | 张老师尽心整理的面试宝典大全，面试阿里腾讯不成问题。西边人西说测试
- 前端面试中常见的算法问题读后整理
- 史上最全 前端开发面试问题及答案整理
- 史上最全 前端开发面试问题及答案整理 http://segmentfault.com/blog/trigkit4/1190000002562454
- 前端面试提整理
- 前端（html，css，js）各种摘抄整理（持续更新ing）
- 前端开发面试问题及答案整理
- 前端面试宝典，一定要学会
- 前端周刊第47期：Vue.js 后台模板 + React Conf 2017 + 饿了么面试宝典
- 前端同学大福利，最全的面试题目整理
- 史上最全前端开发面试问题及答案整理
- 前端同学大福利，最全的面试题目整理
- web前端面试常见题型整理
- C++面试宝典（整理版）5
- 富途证券面试整理--前端