写在前面

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期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

几道web前端面试题相关推荐

web前端培训机构出来的能找到工作吗？30道Web前端面试题收藏版
Web前端高薪的诱惑,学习门槛低,无论是学生党还是工作者,都渴望着凭借着自己的能力,空余的时间,想学一下前端.或许是爱好,或许是想从事这份工作.但是真的那么容易吗?如今初级前端的工作,已经接近饱和,并 ...
30道Web前端面试题，你能答出多少道？
如今很多人受到Web前端的诱惑纷纷报名来学Web前端,他们希望自己通过5个月的系统学习就获得能找到一份高工资的Web前端开发工作,但是真的有那么容易吗?你真的有与高工资相对应的能力吗?你想知道自己的技 ...
常见的10道Web前端面试题及答案分享！
Web前端经典面试题有哪些?Web前端在近几年是越来越火热了,很多人看到了前端的待遇好,更看到了前端行业的发展前景,所以纷纷投入到学习前端技术学习中来.下面千锋给大家总结整理一些Web前端经典面试题, ...
java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）
Web前端面试题 Web前端面试题:说说你对webpack的看法解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
Web前端面试题集锦
Web前端面试题集锦前端开发面试知识点大纲: 注意转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...

几道web前端面试题

携手共筑前端面试宝典

题目一

答案

题目二

答案

题目三

答案

题目四

答案

题目五

答案

题目六

答案

题目七

答案

题目八

答案

题目九

答案

题目十

答案

几道web前端面试题相关推荐

最新文章

热门文章