写在前面
CSDN话题挑战赛第1期
-
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
-
参赛话题：前端面试宝典
-
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！ -
创作模板：
题目一
1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
答案
Doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
题目二
常见的浏览器核有哪些？
答案
Trident核：IE, Max Thon, TT, The World,360,搜狗浏览器等。[又称MSHTML]
Gecko核：Netscape6及以上版本，FF, Mozilla Suite / Sea Monkey等
Presto核：Opera7及以上。[Opera核原为：Presto，现为：Blink;]
Webkit核：Safari, Chrome等。[ Chrome的：Blink（WebKit的分支）]
题目三
行内元素有哪些？块级元素有哪些？CSS的盒模型？
答案
行内元素有：a b span I b em img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
盒模型：margin border padding width
题目四
CSS引入的方式有哪些? link和@import的区别是?
答案
- 使用 LINK标签
将样式规则写在.css的样式文件中，再以标签引入。
<link rel=stylesheet type="text/css" href="example.css">
- 使用@import引入
跟link方法很像，但必须放在 中
<STYLE TYPE="text/css">
<!--
@import url(css/example.css);
-->
</STYLE>
- 使用STYLE标签
将样式规则写在标签之中。
<STYLE TYPE="text/css">
<!--
body {
color: #666;background: #f0f0f0;font-size: 12px;}
td,p {
color:#c00;font-size: 12px;}
-->
</STYLE>
- 使用STYLE属性
将STYLE属性直接加在个别的元件标签里，
<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
- 使用标记引入样式
<span style="font:12px/20px #000000;">cnwebshow.com</span>
两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。
题目五
简述同步和异步的区别
答案
同步是阻塞模式: 指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是非阻塞模式: 指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
题目六
浏览器渲染原理
答案
（1）首先获取html , HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
（2）把DOM Tree和CSS Rule Tree经过整合生成Render Tree（布局阶段）
（3）元素按照算出来的规则，把元素放到它该出现的位置，通过显卡画到屏幕上
题目七
对MVC、MVVM的理解
答案
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）
MVVM是将“数据-模型-数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。
题目八
谈谈对前端模块化的理解
答案
模块化是把js程序划分成独立命名、可独立访问的模块,每个模块完成一个子功能,把这些模块集成起来构成一个整体,可以完成指定的功能
意义: 组件复用，降低开发成本和维护成本
组件单独开发，方便分工合作
模块化遵循标准，方便自动化依赖管理，代码优化，部署
这样会导致模块间的依赖问题, 于是有了CommonJS, AMD, CMD规, 最后出现webpack
webpack就是前端模块话的一种解决方案
题目九
异步加载的方式
答案
(1) defer（只支持IE）
(2) async
(3) 动态创建DOM（用得最多）
(4) 创建script，插入到DOM中，加载完毕后进行回调
题目十
iframe有那些缺点？
答案
iframe会阻塞主页面的onload事件；
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
写在最后
CSDN话题挑战赛第1期