java，html5+css3以及javascript面试题------自己面试的时候遇到的面试题，所以整理一下

偏执的太偏执、 2022-06-18 07:57 163阅读 0赞

（1）.java部分

1.线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

注：当时因为是面试，所以说了大概，这里面涉及的东西很多，希望小伙伴们自己可以全面的了解一下线程和进程的相关知识。

2.你如何对网站的文件和资源进行优化？

只是简单的指出了几个方向：比如说文件合并文件最小化，文件压缩，以及使用CDN托管缓存（多个域名来提供缓存）等等

3.你都是用那些工具来测试代码的性能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo等等

4.null和undefined的区别

1）null是一个表示”无”的对象转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。 当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：  1.变量被声明了，但没有赋值时，就等于undefined。

2）调用函数时，应该提供的参数没有提供，该参数等于undefined。

3）对象没有赋值的属性，该属性的值为undefined。

4）函数没有返回值时，默认返回undefined。

null表示”没有对象”，即该处不应该有值。典型用法是：  1.作为函数的参数，表示该函数的参数不是对象。 2.作为对象原型链的终点。

5.关于http2.0你知道多少呢？

HTTP/2引入了“服务端推（serverpush）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。

HTTP/2提供更多的加密支持 HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。

它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽

6.谈谈性能优化的问题？

1）代码层面：避免使用css表达式，避免使用高级选择器，通配选择器等。

2)缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等。

3)请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载等。

4)请求带宽：压缩文件，开启GZIP，

5)移动端性能优化:尽量使用css3动画，开启硬件加速。适当使用touch事件代替click事件.避免使用css3渐变阴影效果.尽可能少的使用box-shadow与gradients box-shadow与gradients往往都是页面的性能杀手

7.HTTp状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源  202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。  304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

8.GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

9.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

2.浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

3.一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

4.此时，Web服务器提供资源服务，客户端开始下载资源。 请求返回后，便进入了我们关注的前端模块 简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

10.平时如何管理你的项目？

先期团队必须确定好全局样式（globe.css），编码模式(utf-8）等； 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）； 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）； CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；JS分文件夹存放命名以该JS功能为准的英文翻译。图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

注：简单说一下平时的管理项目经验就好了。

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

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。 网站：w3cfuns,sf,hacknews,CSDN,慕课，博客园，InfoQ,w3cplus等

12.ajax过程

1.创建XMLHttpRequest对象,也就是创建一个异步调用对象.

2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

3.设置响应HTTP请求状态变化的函数.

4.发送HTTP请求.

5.获取异步调用返回的数据.

6.使用JavaScript和DOM实现局部刷新.

13.XML和JSON的区别？

1.数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

2.数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

3.数据描述方面。JSON对数据的描述性比XML较差。

4.传输速度方面。JSON的速度要远远快于XML。

（2）.html5+css3和javascript部分：

1.闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包三个特性: 1.函数嵌套函数。2.函数内部可以引用外部的参数和变量。3.参数和变量不会被垃圾回收机制回收。

2.display:none和visibility:hiden的区别

display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢。

visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。

3.html4中的cookie。

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的; 每个特定的域名下最多生成20个cookie;IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie;cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节;

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

4.h5本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代sessionStorage。

sessionStorage:用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage:用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

5.webstorage 和cookie区别

Web Storage的概念和cookie相似，区别是:

Web storage:

1.是为了更大容量存储设计的。

2.Web Storage拥有setItem,getItem,removeItem,clear等方法.

3.Web Storage仅仅是为了在本地“存储”数据而生

Cookie:

1.大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽;

2.cookie还需要指定作用域，不可以跨域调用。

3.需要前端开发者自己封装setCookie，getCookie.4.cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在;

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

6.css中link和@import区别

1.link属于HTML标签，而@import是CSS提供的;

2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;  3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;  4.link方式的样式的权重 高于@import的权重.

7.position:absolute和float属性的异同

共同点：对内联元素设置\`float\`和\`absolute\`属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，position会覆盖文档流中的其他元素。

8.介绍一下box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

9.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？

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, text-indent;

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

优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准;

CSS3新增伪类举例：

p:first-of-type  选择属于其父元素的首个;

p:last-of-type  选择属于其父元素的最后;

p:only-of-type 选择属于其父元素唯一的;

p:only-child   选择属于其父元素的唯一子元素的每个;元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个;元素。

enabled 和disabled 控制表单控件的禁用状态。 :checked  :单选框或复选框被选中。

10.position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位。

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative :生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

11.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询，多栏布局 border-image

14.说说你对语义化的理解？

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

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

1.<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器以何种模式来渲染文档。

2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3.在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

16.常见兼容性问题？

1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

2.浏览器默认的margin和padding不同。解决方案是加一个全局的\*\{margin:0;padding:0;\}来统一。

3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin会加倍。）

\#box\{ float:left; width:10px; margin:0 0 0 100px;\} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——\_display:inline;将其转化为行内属性。(\_这个符号只有ie6会识别)

4.渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

5.IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.

6.Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust: none;解决.

7.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

8.怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用\[html5\](http://www.w3.org/TR/html5/single-page.html)推荐的写法：<doctype html>

9.上下margin重合问题 ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。 解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

10.ie6对png图片格式支持不好(引用一段脚本处理)

17.解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。 该方法只适用于非IE浏览器。具体写法可参照以下示例。

使用中需注意:该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素

18css盒子模型的理解。IE8以下版本的浏览器中的盒模型有什么不同？

CSS和模型是围绕在HTML元素周围的定义Border(边界)，padding(内边距)和margin(外边距)的矩形空间

Border(边界)：定义了元素包含的最大区域，我们能够使边界可见，不可见，定义高度和宽度等；  
Padding(内边距)：定义了边界和内部元素的间距  
Margin：定义了边界和任何相邻元素的间距

包含w3c盒子模型和IE盒子模型，IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

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

1.HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

2.拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section） 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 表单控件，calendar、date、time、email、url、search 新的技术webworker, websocket, Geolocation

3.移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：

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

20.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

21.Javascript垃圾回收方法

标记清除（mark and sweep）:这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting):在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。

22.ie各版本和chrome可以并行下载多少个资源

IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个 Firefox，chrome也是6个

23.请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。  指一段脚本只能读取来自同一来源的窗口和文档的属性。

24.为什么要有同源限制？

简单举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

25.什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

设立”严格模式”的目的，主要有以下几个：

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