前端理论知识总结（面试题）

时间 2019-11-08

标签前端理论知识总结面试栏目快乐工作繁體版

原文原文链接

语义化的理解？javascript

用正确而标签作正确的事，不只便于机器理解，也便于人理解。css

2. HTML5的离线储存？html

localStorage 长期存储数据，浏览器关闭后数据不丢失；前端
sessionStorage 数据在浏览器关闭后自动删除。html5

3. iframe缺点java

页面资源须要额外链入，会增长请求。node
iframe会阻塞主页面的Onload事件；jquery
iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。css3

4. css3 新增伪类git

:root (匹配文档的根元素。在HTML中，根元素永远是HTML)
:empty (匹配没有任何子元素的元素)
:first-child (第一个元素)
:last-child (最后一个元素)
:only-child (匹配属于其父元素的惟一子元素的每一个元素)

:nth-child(n) (匹配属于其父元素的第 N 个子元素)
:nth-last-child(n) (匹配属于其元素的第 N 个子元素的每一个元素,从最后一个子元素开始计数)
:first-of-type (匹配属于其父元素的特定类型的首个子元素的每一个元素)
:last-of-type (匹配属于其父元素的特定类型的最后一个子元素的每一个元素)
:only-of-type (匹配父级元素下的为一个一个E元素)
:nth-of-type(n) (匹配属于父元素的特定类型的第 N 个子元素的每一个元素.)
:nth-last-of-type(n) (选择器匹配属于父元素的特定类型的第 N 个子元素的每一个元素，从最后一个子元素开始计数)

5. cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大，有更多丰富易用的接口；各自独立的存储空间；

6. css 选择器

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p
子选择器（ul < li）
后代选择器（li a）
属性选择器
伪类选择器
相邻选择器（h1 + p）

7. Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

　　<!DOCTYPE> 位于文档中的最前面 声明文档的类型，告诉浏览器以什么样的规范来解析这个文档。

8. 浏览器的内核分别是什么? 常常遇到的浏览器的兼容性有哪些？

IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

ie6 png透明bug 使用 png8 git

浮动双边界bug 浮动元素设置为display:inline

fixed定位bug 使用absolute

chorme 最小文字不能小于 12px 设置 text-size-adjust:none;

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

HTML5 如今已经不是 SGML( 标准通用标记语言 ) 的子集，主要是关于图像，视频音频，位置，存储，多任务等功能的增长。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
localStorrage sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，好比 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

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

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

10. 简单比较 i b em strong 说出他们的相同点和差异

em 语义的强调表示内容的着重点（stress emphasis）

strong 内容的强调表示内容的重要性、严肃性和紧迫性（emphasized text ）

　　< b > < i > 是视觉要素（presentationl elements），单纯样式/风格无感情色彩

　　b和i，一个是加粗，一个是斜体，都是视觉上的效果，而em和strong有情感色彩增强

11. 介绍一下CSS的盒子模型？

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
    span b i em strong a input button select
    div p table ul dl li 
    meta link img hr br input

13. link 和@import 的区别是？
IE 盒子模型、 标准盒子模型；  IE 的宽高部分包含了 border 和 pading margin;
     盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 宽高只指代内容区的宽高。

12.

如何居中div？
     左右margin  auto inline-block 居中   定位 + 负边框 （1）、link属于XHTML标签，而@import彻底是CSS提供的一种方式;

    （2）、页面被加载的时候，link-会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

    （3）、import只有在IE5以上的才能识别，而link是XHTML标签，无兼容问题;

    （4）、link方式的样式的权重 高于@import的权重.

14.

 
15. 为何要初始化CSS样式。
    考虑到浏览器兼容性问题 每不一样浏览器对每一个便签的默认样式是不一样的， 为了保证页面内容在不一样浏览器中拥有一致性的表现，因此要作重置。
16.页面重构怎么操做？

根据原有页面内容和结构的基础上，经过当前主流的html + css版本，写出符合web标准的页面结构。

具体包括：

1. 结构完整，可经过标准验证

2. 标签语义化，结构合理

3. 充分考虑到页面在站点中的“做用和重要性”，并对其进行有针对性的优化



2.1 列出display的值，说明他们的做用。position的值， relative和absolute定位原点是？

 block inline inling-block none table table-cell

2.2 CSS3有哪些新特性？

边框的圆角边框背景边框阴影

阴影文字阴影

线性渐变

2d动画 transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

过渡 transtion

transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果什么时候开始。默认是 0。

动画： animation

@keyframes

背景： background-size 属性规定背景图片的尺寸。

background-origin 属性规定背景图片的定位区域。

3. 使用 CSS 预处理器吗？喜欢那个？

只使用过 less

4. 对BFC规范的理解？

块级格式化上下文：是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。

1.经过边缘不和浮动元素重叠的特性，实现两栏结构。

2.清除元素内部浮动

3.解决合并外边距的问题

Javascript

3.1. js延迟加载的方式有哪些

defer和async、动态建立DOM方式（用得最多）、按需异步载入js

2. 函数表达式和函数声明

一个函数表达式产生一个值(一个函数). 一个函数声明将一个匿名函数赋值给一个变量.

解析器会率先读取函数声明，并使其在执行任何代码以前可用；而函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。函数表达式能够被当即调用。

3.3 eval是作什么的？

　　　　将字符串转化为解释成Javascript代码，而且执行.

应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）。

3.4 null，undefined 的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是什么都没有。

通常定义了变量或属性但未赋值时为 undefined;

3.5 谈一下node.js

其特色为：它是一个Javascript运行环境 ,依赖于Chrome V8引擎进行代码解释

事件驱动非阻塞I/O 轻量、可伸缩，适于实时数据交互应用单进程，单线程.

高并发、聊天、实时消息推送.

3.6 介绍js的基本数据类型。

number string boolean array object null undefined;

3.7 Javascript如何实现继承？

经过原型和构造器

3.8 谈谈This对象的理解。

指向当前的做用域，使用场合不一样，this的值会发生变化。

全局做用域函数中的this 方法调用 apply式的调用。

3.9 事件是？IE与火狐的事件机制有什么区别？如何阻止冒泡？

事件是能够被 JavaScript 侦测到的行为。常见的事件包括鼠标事件键盘事件页面相关事件表单事件

ie低版本只有冒泡标准浏览器的事件包括捕获和冒泡两个阶段 e.stopPropagation() e.preventDefault();

3.10 什么是闭包（closure），为何要用它？

函数经过做用域相互关联起来，函数内部的函数在做用域外存在引用，就造成了一个闭包。

它保存了函数所在做用域的做用域链，能够在函数外部读取函数内部的变量，并让这些变量的值始终保持在内存中。

3.11 "use strict";是什么意思 ? 使用它的好处和坏处分别是什么？

严格模式

- 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;

　　- 消除代码运行的一些不安全之处，保证代码运行的安全；

　　- 提升编译器效率，增长运行速度；

　　- 为将来新版本的Javascript作好铺垫。

坏处是低版本浏览器不支持。

全局变量显式声明，静态绑定，加强的安全措施重名错误函数必须声明在顶层

3.12 如何判断一个对象是否属于某个类？

instanceof

3.13 new操做符具体干了什么呢?

1. 建立一个新的对象

2. 把函数的原型，赋值给新对象的原型

3. 以新对像的this 为指向，调用构造函数返回这个新的对象。

3.14 删选过滤掉原型属性和方法

hasOwnProperty

3.15 JSON 的了解？

一种轻量级的数据交换格式，它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

3.16 如何解决跨域问题

jsonp、 iframe、window.postMessage、window.name、服务器上设置代理页面

3.17 模块化怎么作？

建立当即执行函数,不暴露私有成员

3.18 call() 和 .apply() 的区别？

　　更改对象的this指向，apply第二个参数为数组， call 须要依次传入参数。

其余：

1. 你认为前端应该如何高质量完成工做?

精确地实现效果图；与设计师，产品经理，和交互的的充分沟通；优化页面结构和用户体验；作hack，处理兼容、写出优美的代码格式；

针对服务器的优化、拥抱 HTML5。

2. 说说最近最流行的一些东西吧？常去哪些网站？

github 获取学习开源资源

　　stackoverflow 解决和查询一些工做中遇到的问题和疑惑

博客园总结和交流一些前端的知识

w3cfuns 交流学习

淘宝ued 百度 fex 前端研发团队腾讯isux研究院 allowyTeam;

3. 常使用的库有哪些？经常使用的前端开发工具？开发过什么应用或组件？

jquery yui kissy chorme developer tools Fiddler jshint

backbone angular ember knockout

slide tab dialog accordion scrollspy

4. 什么是面向对象，有什么特色？

把具体事务抽象化，归结为类，具备该类问题的属性和解决处理问题的方法。

基本特征是封装、继承、和多态 javascript中经过原型实现继承之前主流的方式是构造函数+ 原型继承

如今 Object.create();

5. W3C标准的理解

万维网联盟 w3c 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

对应的标准也分三方面结构化标准语言html XML标准表现化标准 css 行为标准DOM ecmascript