几道web前端面试题

写在前面

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的区别是?

答案

  1. 使用 LINK标签
    将样式规则写在.css的样式文件中,再以标签引入。
<link rel=stylesheet type="text/css" href="example.css">
  1. 使用@import引入
    跟link方法很像,但必须放在 中
<STYLE TYPE="text/css">

STYLE>
  1. 使用STYLE标签
    将样式规则写在标签之中。
<STYLE TYPE="text/css">

STYLE>
  1. 使用STYLE属性
    将STYLE属性直接加在个别的元件标签里,
<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
  1. 使用标记引入样式
<span style="font:12px/20px #000000;">cnwebshow.comspan>

  两者区别:加载顺序的差别。当一个页面被加载的时候,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

你可能感兴趣的:(前端,面试,职场和发展)