面试题总结

时间  2019-11-12
标签 面试 总结 栏目 快乐工作 繁體版
原文   原文链接

HTML

一、html5有哪些新特性？移除了哪些元素？如何处理h5新标签的浏览器兼容性问题？如何区分html和html5？

新特性：javascript

    内容元素：article、footer、header、nav、section。css

    表单控件：calendar、date、time、email、url、search。html

    控件元素：webworker, websockt, Geolocation。前端

    其余元素：canvas、audio、video、html5

    storage存储：localstorage、sessionstoragejava

HTML5为history对象添加了两个新方法，history.pushState() 和 history.replaceState()，用来在浏览历史中添加和修改记录。node

移除的元素：react

    显现层元素：basefont，big，center，font, s，strike，tt，u。webpack

    性能较差元素：frame，frameset，noframes。        css3

处理兼容性问题：

   1） IE8/IE7/IE6支持经过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

    2）使用html5shim框架 

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

 

区分html和html5：

    1）文档类型声明上：

        html代码有不少繁琐的代码，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

         html5省去了这些代码，更加方便文档的统一标准，且节约html5网页开发者的时间，提升网站的加载速度。

<!doctype html>

     2）结构语义上：

        html没有体现结构语义化的标签，html网页开发经常是命名方式是这样的：<div id="header"></div>.这样表示网站的头部。

            html5增长了一些新的标签，好比:<header><article><footer>

二、html文件开头都会声明一个doctype标识，做用是什么？

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

 

CSS

一、css3新特性？

    1）CSS3的选择器

        a）E:last-child 匹配父元素的最后一个子元素E。
        b）E:nth-child(n)匹配父元素的第n个子元素E。 
        c）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

    2）@Font-face 特性

        Font-face 能够用来加载字体样式，并且它还可以加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

    3）圆角：border-radius

    4）多列布局 （multi-column layout）：兼容性很差

    5）阴影

    6）渐变效果

    7）css弹性盒子模型

    8）css3制做特效：过渡效果、2/3D转换

二、介绍一下标准的css盒子模型？与低版本的IE盒子模型有什么不一样？

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

三、css选择符有哪些？哪些属性能够继承？css优先级算法如何计算？

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

    能够继承的属性：class属性，伪类A标签，列表ul、li、dl、dd、dt能够继承

    优先级算法如何计算：优先级就近原则

        内联样式>ID选择器>伪类>属性选择器>类选择器>元素（类型）选择器>通用选择器

        权值相等时，后出现的样式优于先出现的样式

        同一组属性设置中标有“！important”规则的优先级最大

        <link rel=”stylesheet”type=”text/css”href=”style.css”>

四、position定位？

static 默认值。位置设置为static的元素，它始终会处于页面流给予的位置，会忽略任何top、bottom、left、right声明
relative 位置设置为relative的元素，可将其移至相对于其正常位置的地方
absolute 位置设置为absolute的元素，可定位于相对于包含它的元素的指定坐标。
fixed 位置设置为fixed的元素，可定位于相对浏览器窗口的指定坐标

五、rem em px 区别？

    px实际上就是像素，用PX设置字体大小时，比较稳定和精确。可是px不支持用户进行浏览器缩放或者不一样移动端的兼容，由于像素是固定的，屏幕大小是变化的。由此引入了em和rem。

    em是根据父元素来对应大小，是一种相对值，并非绝对值，em值 = 1/父元素的font-size*须要转换的像素值。进行任何元素设置，都有可能须要知道他父元素的大小，这很不方便因此又有了rem。

    rem是根据根元素html的font-size来对应大小，1rem = 100px,能够在根元素html中写固定像素也能够写百分比，而后在具体的标签上设置rem 。

六、加载一个外部css文件有哪些方式？    

    <link rel="stylesheet" href="/css/mycss.css" />    

    @import url（/css/mycss.css）

七、浮动优缺点？如何清除浮动？

    优势：在图片周围包含文字；建立网页布局

    缺点：没法撑起父元素；同级别的兄弟元素会围绕在周围

    清除方式：

        1）添加额外的标签，并设置其属性：clear:both

        2）添加<br>标签，使用<br>标签自己的clear属性

        3）父元素设置overflow:hidden

        4）父元素设置overflow:auto

        5）父元素也设置成浮动元素

        6）父元素设置display:table

        7）使用伪元素:after

八、行内元素与块级元素的区别？

块级元素特定 行内元素特色
老是在新行上开始，占据一整行 和其余元素在一行上
高度，行高以及外边距和内边距均可控制 高度，行高以及外边距和内边距部分可改变
宽带始终是与浏览器宽度同样，与内容无关 宽度只与内容有关
它能够容纳内联元素和其余块元素 行内元素只能容纳内容和其余行内元素

九、垂直居中的方法？

http://www.javashuo.com/article/p-tngicsfd-u.html

十、div+css的布局与table布局的优缺点？

  优势 缺点
table布局 1.理解比较简单
2.不一样的浏览器看到的效果通常相同
3.显示数据仍是很好的		 1.显示样式和数据绑定在一块儿
2.布局的时候灵活度不高
3.一个页面可能会有大量的table元素 代码冗余度高
4.增长带宽
5.搜索引擎不喜欢这样的布局
div+css布局 1.符合w3c标准，微软等公司均为w3c支持者
2.搜索引擎更加友好
3.样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4.CSS的极大的优点表如今简洁的代码，对于一个大型网站来讲，能够节省大量带宽。而且搜索引擎也更喜欢简洁的代码
5.表现和结构分离，在团队开发中更容易分工合做而减小相互关联性		  

    DIV+CSS并非要咱们抛弃table 由于table在显示数据时，特别方便，所以在使用DIV+CSS时，该使用table时，就得使用。

 

JS

一、bootstrap三大布局？

    响应式布局、栅格布局、表单布局

二、jQuery中的bind（）函数和on（）函数有什么区别？    

bind()

为每一个匹配元素的特定事件绑定事件处理函数 bind(type，【data】，fn)
on()

在选择元素上绑定一个或多个事件的事件处理函数on(events，【selector】，【data】，fn)

三、JavaScript建立对象的几种方式？JavaScript如何实现继承？JS定义类的方法？

    建立对象的方式：经过Object构造函数或对象字面量建立单个对象、工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式、Object.create()、另有寄生构造函数模式和稳妥构造函数模式。

        http://www.javashuo.com/article/p-nybgevtd-p.html

    实现继承的方式：原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承

        http://www.javashuo.com/article/p-rwkatbxg-gb.html

    JS定义类的方法：工厂方式、构造函数方式、原型方式、动态原型方式、混合工厂方式

        http://www.jb51.net/article/84089.htm

四、什么是闭包？为何要用它？

    书面介绍：闭包是指有权访问另外一个函数做用域中变量的函数，建立闭包的最多见的方式就是在一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量,利用闭包能够突破做用链域，将函数内部的变量和方法传递到外部。

    我的理解：闭包是就是函数中的函数，里面的函数能够访问外面函数的变量，外面的变量的是这个内部函数的一部分。

    做用：

        1）使用闭包能够访问函数中的变量。

        2）可使变量长期保存在内存中，生命周期比较长。

    注意：闭包不能滥用，不然会致使内存泄露，影响网页的性能。闭包使用完了后，要当即释放资源，将引用变量指向null。

五、请简述事件绑定，事件绑定的方法？

要想让 JavaScript 对用户的操做做出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操做的函数，不一样的操做对应不一样的名称。

事件绑定的方法：

    1）在DOM元素中直接绑定

<input type="button" value="click me" onclick="hello()">

<script>
    function hello(){
        alert("hello world!");
    }
</script>

    2）在JavaScript代码中绑定

<input type="button" value="click me" id="btn">
 
<script>
    document.getElementById("btn").onclick = function(){
        alert("hello world!");
    }
</script>

    3）绑定事件监听函数

<input type="button" value="click me" id="btn1">
 
<script>
    document.getElementById("btn1").addEventListener("click",hello);
    function hello(){
        alert("hello world!");
    }
</script>

 

六、什么是事件冒泡，如何阻止事件冒泡？

    当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。事件冒泡通俗点讲就是，当你的子元素和父元素注册了同一个事件的时候，当你激活子元素的时候，父元素也会跟着被激活，

    阻止事件冒泡：event.stopPropagation()

https://www.cnblogs.com/liujiayun/p/5511637.html    

七、简述做用域和做用域链？

    做用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，在JavaScript中变量的做用域有全局做用域和局部做用域；在java中做用域就是一个{}花括符是块级做用域，而javaScript没有块级做用域，只有函数级做用域。

    做用域链：当代码在一个环境中执行时，会建立变量对象的一个做用域链（scope chain,不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。 

     

其余

一、es6新特性？

    1）let&&const

let、const、var区别？

let是块级做用域，函数内部使用let定义后，对函数外部无影响

const定义的变量不能够修改，并且必须初始化

var定义的变量能够修改，若是不初始化会输出undefined，不会报错

    2）iterable类型

    3）解构赋值

    4）箭头函数

es6的箭头函数与通常函数的区别？

    箭头函数永远是匿名函数，this指向object内部

    不绑定this，arguments（参数）

    更简化的代码语法

    5）延展操做符

    6）类

二、介绍一下你对浏览器内核的理解，常见的浏览器内核有哪些？

    1）浏览器内核主要分红两个部分：渲染引擎(Render Engine)和JS引擎。

    渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，而后输出到显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不一样。全部网页浏览器、电子邮件客户端以及它须要编辑、显示网络内容的应用程序都须要内核。

    JS引擎：解析和执行JavaScript来实现网页的动态效果。

    2）常见的浏览器内核：

        Trident内核：IE，360，搜过浏览器；

        Gecko内核：Netscape6及以上版本，

        Presto内核：Opera

        Blink内核：Opera；

        Webkit内核：Safari，Chrome

三、get、post区别？

    get参数经过url传递，post参数放在request body中

    get在浏览器回退时是无害的，post会再次提交请求

    get产生的url地址能够被bookmark，post不能够

    get请求会被浏览器主动存储，而post不会，除非手动设置

    get请求只能进行URL编码，post支持多种编码方式

    get请求参数会被完整保留在浏览器的历史记录里，post不会

    get请求在URL中传送的参数是有长度限制的，post没有

    参数的数据类型，get只接受ASCII字符，post没有限制    

    get不如post安全，由于参数直接暴露在url上，不能用来传递敏感信息

四、react生命周期？

三种状态 状态包括的函数
初始化 getDefaultProps()、getInitialState()、componentWillMount()、render()、componentDidMount()
更新 componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps,nextState)、componentWillUpdate(nextProps,nextState)、render()、componentDidUpdate()
销毁 componentWillUnmount()

数据请求通常写在componentDidMount()

五、移动端适配？

    1）自动适应屏幕宽度，扩展viewport属性，添加meta标签

    2）使用框架搭建页面（bootstrap）

    3）宽度的严格布局书写，宽度不能写死

    4）图片自适应，图片宽度属性设置为100%

六、W3C标准？

W3C（万维网联盟）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其余标准组织制订的标准，好比ECMA（European Computer Manufacturers Association）的ECMAScript标准。 

七、MVC模式？MVP模式？MVVM模式？

    MVC模式是一种开发模式，他的好处是能够将界面和业务逻辑分离。

        Model（模型），是程序的主体部分，主要包含业务数据和业务逻辑。在模型层，还会涉及到用户发布的服务，在服务中会根据不一样的业务需求，更新业务模型中的数据。

         View(视图），是程序呈现给用户的部分，是用户和程序交互的接口，用户会根据具体的业务需求，在View视图层输入本身特定的业务数据，并经过界面的事件交互，将对应的输入参数提交给后台控制器进行处理。

         Controller（控制器），Controller是用来处理用户输入数据，已经更新业务模型的部分。控制器中接收了用户与界面交互时传递过来的数据，并根据数据业务逻辑来执行服务的调用和更新业务模型的数据和状态。

    MVC是比较直观的架构模式，用户操做-->View（负责接收用户的输入操做）-->Controller（业务逻辑处理）-->Model（数据持久化）-->View（将结果反馈给View）

MVP模式是把MVC中的Controller换成了Presenter（呈现），目的就是为了彻底切断View跟Model之间的联系，由Presenter充当桥梁，作到View-Model之间同信的彻底隔离。

MVVM模式是对MVC思想的彻底变革，它是将“数据模型数据双向绑定”的思想做为核心，所以在View和Model进行交互，并且Model和ViewModel之间的交互是双向的，所以视图的数据的变化会同时修改数据源，而数据源数据的变化也会当即反应到View上。

 

八、AMD规范？UMD规范？ CMD规范？

http://www.javashuo.com/article/p-bhyweobv-bw.html

AMD规范全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。从它被requireJS，NodeJs，Dojo，JQuery使用也能够看出它具备很大的价值，没错，JQuery近期也采用了AMD规范。　　做为一个规范，只需定义其语法API，而不关心其实现。

AMD规范简单到只有一个API，即define函数：
    define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
    其中：
        module-name: 模块标识，能够省略。
　　  array-of-dependencies: 所依赖的模块，能够省略。
　　  module-factory-or-object: 模块的实现，或者一个JavaScript对象。

九、http协议？http状态码？

    HTTP是hypertext transfer protocol（超文本传输协议）的简写，它是TCP/IP协议的一个应用层协议，用于定义WEB浏览器与WEB服务器之间交换数据的过程。客户端连上web服务器后，若想得到web服务器中的某个web资源，需遵照必定的通信格式，HTTP协议用于定义客户端与web服务器通迅的格式。

    常见的http状态码：

  • 200 - 请求成功
  • 301 - 资源（网页等）被永久转移到其它URL
  • 404 - 请求的资源（网页等）不存在
  • 500 - 内部服务器错误

http://www.runoob.com/http/http-status-codes.html

    http协议包括http协议的请求和http协议的响应：

    http协议的请求：请求方法、请求头、请求正文

    http协议的响应：状态行、响应头、响应正文

十、WebSocket协议？

    WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通讯——容许服务器主动发送信息给客户端。   

十一、webpack打包原理？

    把全部依赖打包成一个bundle.js文件，经过代码分割成单元片断并按需加载。

十二、nodejs和Java的区别？

    1）nodejs比Java更快

    2）nodejs先后端都采用JavaScript，表明将来发展的趋势，而Java则是如今的最流行的服务器端编程语言

    3）nodejs和JavaEE——一种是解释语言，一种编译语言。

1三、浏览器打开一个网址的过程？

    1）浏览器自己是一个客户端，当你输入URL的时候，首先浏览器会去请求DNS服务器，经过DNS获取相应的域名对应的IP

    2）而后经过IP地址找到IP对应的服务器后，要求创建TCP链接

    3）浏览器发送完HTTP Request（请求）包后，服务器接收到请求包以后才开始处理请求包

    4）在服务器收到请求以后，服务器调用自身服务，返回HTTP Response（响应）包

    5）客户端收到来自服务器的响应后开始渲染这个Response包里的主体（body），等收到所有的内容随后断开与该服务器之间的TCP链接。

1四、什么是虚拟dom？

    Virtual Dom能够看作一棵模拟了DOM树的JavaScript对象树，其主要是经过vnode,实现一个无状态的组件，当组件状态发生更新时，而后触发Virtual Dom数据的变化，而后经过Virtual Dom和真实DOM的比对，再对真实DOM更新。虚拟DOM其实就是一种模拟DOM的JavaScript数据结构。

http://www.javashuo.com/article/p-ybghuplm-k.html

1五、git命令？

https://blog.csdn.net/halaoda/article/details/78661334

1六、页面数据缓存的方法？

    cookie storage

1七、请求图片过多时怎么优化处理？

    react开发处理的方式：前端用react的state实现了图片的异步加载，后端作了三个级别的缓存。

    图片优化方式：雪碧图、图片压缩、base6四、响应式图片、延迟加载、图标字体、SVG

https://www.cnblogs.com/zhuzhenwei918/p/6935426.html?utm_source=itdadao&utm_medium=referral

1八、什么是Hybird APP，经常使用的混合式开发框架有哪些？

    Hybird APP是指介于web-app、native-app这二者之间的app，兼具“Native App良好用户交互体验的优点”和“Web App跨平台开发的优点”。

    https://www.jianshu.com/p/6c1986f54054

    混合开发框架：IONIC、Mobile Angular UI、Intel XDK、Appcelerator Titanium、Sencha Touch、Kendo UI、PhoneGap、

1九、浏览器兼容性问题？经常使用hack的技巧？

    http://www.javashuo.com/article/p-nadbttof-hh.html

不一样的浏览器对CSS的解析结果是不一样的，所以会致使相同的CSS输出的页面效果不一样，这就须要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不一样的浏览器写不一样的CSS 代码的过程，就叫CSS Hack。

http://www.ynpxrz.com/n967304c2025.aspx

20、跨域问题？解决跨域问题的方法？

    本地的域名与服务器的域名不一致，就会产生跨域。

    生产环境不存在跨域，开发的时候加header、cors

    让本地的域名与服务器的域名一致

        若是是本机调试，把向服务器请求的域名变成本身的IP地址

        若是是测试环境，把向服务器请求的域名变成测试环境的域名          

    解决：

        1）JSONP 

            JSONP是JSON with Padding的略称。它是一个非官方的协议，它容许在服务器端集成Script tags返回至客户端，经过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。关于jsonp的使用方式，能够参考http://blog.csdn.net/alen1985/article/details/6365394，优缺点能够参考http://blog.csdn.net/z69183787/article/details/19191385　　 

        2）添加响应头，容许跨域 

            addHeader(‘Access-Control-Allow-Origin:*’);//容许全部来源访问 
　　      addHeader(‘Access-Control-Allow-Method:POST,GET’);//容许访问的方式

        3）代理的方式 

            服务器A的test01.html页面想访问服务器B的后台action，返回“test”字符串，此时就出现跨域请求，浏览器控制台会出现报错提示，因为跨域是浏览器的同源策略形成的，对于服务器后台不存在该问题，能够在服务器A中添加一个代理action，在该action中完成对服务器B中action数据的请求，而后在返回到test01.html页面。

2一、简述ajax原理？

    AJAX = 异步 JavaScript 和 XML。

    AJAX 是一种用于建立快速动态网页的技术。

    经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

    Ajax的工做原理至关于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操做与服务器响应异步化。并非全部的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎本身来作, 只有肯定须要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

2二、同步和异步的区别？

同步：全部的操做都作完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感受（就是系统迁移中，点击了迁移，界面就不动了，可是程序还在执行，卡死了的感受）。这种状况下，用户不能关闭界面，若是关闭了，即迁移程序就中断了。

异步：将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你能够关闭浏览器了。而后程序再慢慢地去写入数据库去。这就是异步。可是用户没有卡死的感受，会告诉你，你的请求系统已经响应了。你能够关闭界面了。

同步，是全部的操做都作完，才返回给用户结果。即写完数据库以后，在相应用户，用户体验很差。

异步，不用等全部操做等作完，就相应用户请求。即先相应用户请求，而后慢慢去写数据库，用户体验较好。

2三、前端性能优化方案？

    1）减小http请求，合理设置http缓存

    2）使用浏览器缓存

    3）启用压缩

    4）css sprites，合并图片

    5）图片懒加载

    6）css放在页面最上部，js放在页面最下面

    7）异步请求Callback

    8）减小cookie传输

    9）JavaScript代码优化

    10）css选择符优化

    11）CDN加速

    12）反向代理

    https://blog.csdn.net/mahoking/article/details/51472697

2四、页面卡顿性能优化方案？

    chrome dev tools的 performance 能够测出页面的卡顿来自什么部分。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程