前端面试题

最近正在找前端工做，把面试中考官问的以及本身总结的问题及答案成列以下：

HTML篇：

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

本质上，这两种方式都是为了加载CSS文件，但仍是存在着细微的区别

1老祖宗的差别。连接属于XHTML标签，而@import彻底是CSS提供的一种方式。

link标签除了能够加载CSS外，还能够作不少其余的事情，定义RSS，定义rel链接属性等，@ import就只能加载CSS了。

2加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），连接引用的CSS会同时被加载，而@import引用的CSS会等到页面所有被下载完再被加载。因此有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

3兼容性的差别。因为@import是CSS2.1提出的因此老的浏览器不支持，@ import只有在IE5以上的能力识别，而连接标签无此问题。

4使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。

 

 

 

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

一，新增元素

• 内容元素：article、header，footer,section,nav,aside
• 表单元素：calendar，date，time，number,url,search;
• 多媒体：video,audio;
• 控件元素： websockt,webwork
• 绘画：canvas;
• 存储：localStorage;sessionStorage

二，移除元素

big font basefont,s,tt,u,frame.iframe

三，如何处理兼容性问题

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

 

 

 

 

 

请描述一下cookies，sessionStorage和localStorage的区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递。
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
• 存储大小：
• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

 

• 有期时间：
• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。
• cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭
• 页面优化的方法?
  
• 重点：
• （1）尽可能减小HTTP请求次数
• （2） 减小DNS查找次数
• （3） 减小DOM元素数量
• （4） 为文件头指定Expires或Cache-Control
• （5） Gzip压缩文件内容
• （6） 把样式表置于顶部、 把脚本置于页面底部
• （7） 避免使用CSS表达式（Expression）
• （8） 使用外部JavaScript和CSS
• （9） 减小DOM访问

• 简述一下你对HTML语义化的理解？

• 用正确的标签作正确的事情。
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 即便在没有样式CCS状况下也以一种文档格式显示，而且是容易阅读的;
• 搜索引擎的爬虫也依赖于HTML标记来肯定上下文和各个关键字的权重，利于SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
• http的状态码？
• 200 - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 404 - 请求的资源（网页等）不存在
• 500 - 内部服务器错误

• 1**	信息，服务器收到请求，须要请求者继续执行操做
  2**	成功，操做被成功接收并处理
  3**	重定向，须要进一步的操做以完成请求
  4**	客户端错误，请求包含语法错误或没法完成请求
  5**	服务器错误，服务器在处理请求的过程当中发生了错误

  具体的能够参考https://www.runoob.com/http/http-status-codes.html

• Doctype做用？严格模式与混杂模式如何区分？它们有何差别？

  1、Doctype做用是什么？声明叫作文件类型定义（DTD），声明的做用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪一个规范来解析文档。声明必须在 HTML 文档的第一行，这并非一个 HTML 标签。 2、严格模式与混杂模式如何区分？它们有何意义？ 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。 混杂模式：又称怪异模式或兼容模式，是指浏览器用本身的方式解析代码。 如何区分：浏览器解析时到底使用严格模式仍是混杂模式，与网页中的 DTD 直接相关。 一、若是文档包含严格的 DOCTYPE ，那么它通常以严格模式呈现。（严格 DTD ——严格模式） 二、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会致使页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 三、DOCTYPE 不存在或形式不正确会致使文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式） 四、HTML5 没有 DTD ，所以也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽量大的实现了向后兼容。（ HTML5 没有严格和混杂之分） 意义：严格模式与混杂模式存在的意义与其来源密切相关，若是说只存在严格模式，那么许多旧网站必然受到影响，若是只存在混杂模式，那么会回到当时浏览器大战时的混乱，每一个浏览器都有本身的解析模式。

   CSS篇

• 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

   

   https://www.cnblogs.com/xiaopo/p/14288987.html

   

   

  1. 行内元素和块级元素有哪些？
  首先：CSS规范规定，每一个元素都有display属性，肯定该元素的类型，每一个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
• 区别：
• （1）块级元素会独占一行，其宽度自动填满其父元素宽度 ；行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。
• （2）块级元素能够设置 width, height属性，行内元素设置width, height无效 【注意：块级元素即便设置了宽度，仍然是独占一行的】
• （3）块级元素能够设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，可是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效 CSS的权重是怎样的？
• ！important>内联>id选择器>claa选择器>标签选择器>通配符

• CSS中选择器有那些？那些能够继承？

  * 1.id选择器（ # myid）

  2.类选择器（.myclassname）

  3.标签选择器（div, h1, p）

  4.相邻选择器（h1 + p）

  5.子选择器（ul > li）

  6.后代选择器（li a）

  7.通配符选择器（ * ）

  8.属性选择器（a[rel = "external"]）

  9.伪类选择器（a:hover, li:nth-child）

   

  * 可继承的样式： font-size font-family color, UL LI DL DD DT;

   

  * 不可继承的样式：border padding margin width height ;

 

 

JavaScript篇

1.请解释原型继承 的原理

2.什么是闭包 (closure)，如何使用它，为何要使用它？

3.请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。

4.请指出如下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

5.Promise的应用

6.this对象的理解