2018记一次前端面试笔试考题一

就从第一张图开始吧

1.0 第一张图

1.1 页面导入样式时，使用link和@import有什么区别？

两者都是外部引用CSS的方式，但是存在一定的区别：

• 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

1.2 介绍一下你对浏览器内核的理解？

主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

• 渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
• JS引擎：解析和执行JavaScript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

1.3常见的浏览器内核有哪些？

• Trident内核：IE，360，搜过浏览器；
• Gecko内核：Netscape6及以上版本，
• Presto内核：Opera
• Blink内核：Opera；
• Webkit内核：Safari，Chrome

1.4 html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签浏览器兼容性问题

新特性

• 增强了图形渲染（canvas）、影音（video，audio）、数据存储（sessionStorage。lcoalStorage）、新的技术webworker(专用线程)、 websocketsocket通信、Geolocation 地理定位
• 语意化更好的内容元素，比如article、footer、header、nav、section;
• 表单控件，calendar、date、time、email、url、search;

移除了哪些元素

纯表现元素

  <basefont> 默认字体，不设置字体，以此渲染
  <font> 字体标签
  <center> 水平居中
  <u> 下划线
  <big> 大字体
  <strike> 中横线
  <tt> 文本等宽

框架集
  <frameset>
  <noframes>
  <frame>

如何处理html5新标签的兼容性

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。

当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

html5.js cdn 地址：点我

1.5 请描述一下cookie、sessionStorage和localStorage的区别？

相同点：都存储在客户端
不同点：

• 1.存储大小

  • cookie数据大小不能超过4k。
  • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

• 2.有效时间

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• 3.数据与服务器之间的交互方式

  • cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

1.6 实现不使用border画出1px高的线。在不同浏览器Quirksmode和csscompat模式下都能保持同一效果

<div style="height:1px;overflow:hidden;background:red"></div>

1.7 网页验证码是干嘛的。是为了解决什么安全问题？

验证码是为了防止一些人使用软件恶意注册、发帖等行为而设的。

它的存在是为了确保登陆网站的是一个坐在电脑面前的真人，而不是一个自动登陆的软件。

1.8 title和h1的区别。b和strong的区别、i与em的区别

• title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；
• strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：
• b会重读，而 是展示强调内容。
• i内容展示为斜体
• em 表示强调的文本；

1.9 介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

• 标准的css盒子模型宽高就是内容区宽高；
• 低端IE css盒子模型宽高 内边距﹢边界﹢内容区；

1.20 css选择符有哪些？哪些属性可以继承？

css选择器

• 类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）

哪些可以继承

• class属性，伪类A标签，列表ul、li、dl、dd、dt可以继承

拓展：css优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

更多技术分享欢迎关注微信公众号：node前端