Java前端面试题总结

Java前端面试题总结

简单说一下HTML，CSS，javaScript在网页开发中的定位？

HTML：超文本标记语言，定义网页的结构

CSS：层叠样式表，用来美化页面

JavaScript：主要用来验证表单，做动态交互(其中AJAX)

CSS面试题

bootstrap是什么

bootstrap是一个移动设备优先的UI框架，我们可以不用写任何css、js代码就能实现比较漂亮的有交互性的页面，我们程序员对页面的编写是有硬伤的，所有要自己写页面的话就要使用类似于bootstrap这样的UI框架

平时用的很多：

1）模态框

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="addModal">
       <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
         标题

</div>
         <div class="modal-body">
            内容体
         </div>
         <div class="modal-footer">
            <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
            <a href="javascript:add();" class="btn btn-primary">保存</a>
         </div>
      </div>
   </div>

$("#updateModal").modal("show");

$("#updateModal").modal("hide");

2）表单、表单项

<div>

</div>

</form>

3）布局容器（container类用于固定宽度并支持响应式布局的容器，container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器）

4）删格系统(系统会自动分为最多12列)

简要说一下CSS的元素分类

· 块级元素：div,p,h1,form,ul,li;

· 行内元素 : span>,a,label,input,img,strong,em;

CSS隐藏元素的几种方法（至少说出三种）

· Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

· Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

· Display:display 设为 none 任何对该元素直接与用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

CSS清除浮动的几种方法（至少两种）

· 使用带clear属性的空元素

· 使用CSS的overflow属性；

· 使用CSS的:after伪元素；

· 使用邻接元素处理；

CSS居中（包括水平居中和垂直居中）

内联元素居中方案

水平居中设置：
1.行内元素

· 设置 text-align:center；

2.Flex布局

· 设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置：
1.父元素高度确定的单行文本（内联元素）

· 设置 height = line-height；

2.父元素高度确定的多行文本（内联元素）

· a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；

· b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中方案

水平居中设置：
1.定宽块状元素

· 设置左右 margin 值为 auto；

2.不定宽块状元素

· a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；

· b:给该元素设置 display:inine 方法(转换为内联元素)；

· c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

· 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

· 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

· 利用display:table-cell属性使内容垂直居中;

· 使用css3的新属性transform:translate(x,y)属性;

· 使用:before元素;

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

· link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

· 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

· import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

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

· id选择器（ # myid）

· 类选择器（.myclassname）

· 标签选择器（div, h1, p）

· 相邻选择器（h1 + p）

· 子选择器（ul > li）

· 后代选择器（li a）

· 通配符选择器（ * ）

· 属性选择器（a[rel = “external”]）

· 伪类选择器（a: hover, li: nth – child）

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

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

· 优先级就近原则，同权重情况下样式定义最近者为准;

优先级为:

1 2	!important > id > class > tag important 比内联优先级高

CSS3有哪些新特性？

· CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

· transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba

JavaScript面试题

简单介绍一下AJAX

什么是AJAX？

--》异步的JavaScript和XML

作用是什么？

--》通过AJAX与服务器进行数据交换，AJAX可以使用网页实现局部更新，这意味着可以在不刷新整个网页的情况下，对网页的某部分进行更新。

怎么来实现AJAX？

--》使用XmlHttpRequest这个对象可以异步向服务器发送请求，获取响应，完成局部更新，

Open send responseText/responseXML局部响应。

使用场景？

--》登录失败时不跳转页面，注册时提示用户名是否存在，二级联动等等使用场景

JS和JQuery的关系

JQuery是一个JS框架，封装了JS的属性和方法，并且增强了JS的功能，让用户使用起来更加方便，

原来使用js是要处理很多兼容性的问题(注册事件)，由于Jquery封装了底层，就不用处理兼容性问题(注册事件等)。

原生的js的dom和事件绑定Ajax等操作非常麻烦，JQuery等装以后非常方便。

JQuery的常用选择器

ID选择器：通过ID获取一个元素

Class选择器：通过类获取元素

标签选择器：通过标签获取元素

通用选择器(*)：获取所有元素

层次选择器：

儿子选择器> 获取下面的子元素

后代选择器空格获取下面的后代，包括儿子、孙子等后代

属性选择器：

tag[arrName=”test”] 获取属性名为xxx并且属性的值为test的所有标签

$(“input[name='body']”),表示获取属性名为name并且name属性值body的所有input标签。

Jquery的页面加载完毕事件

很多时候我们需要获取元素，必须等到该元素被加载完成后才能获取，我们可以把js代码放到该元素的后面，但是这样就会造成js在我们的body中存在不好管理，所有页面加载完毕后所有元素当然已经加载完毕，一般获取元素做操作都要在页面加载完毕后操作。

1）第一种：

$(document).ready(function(){

});

$(document)把原生的document这个dom对象转换为JQuery对象，转换完成后才能调用ready方法。

ready(fn)表示的是页面结构被加载完毕后执行传入函数fn

2）第二种：

$(function(){

});

当页面加载完毕后执行里面的函数。这一种相对简单，用的最多。

3）window.onload的区别

JQuery中的页面加载完毕事件，表示页面结构被加载完毕；

window.onload表示的是页面被加载完毕；必须等页面中的图片、声音、图像等远程资源被加载完毕后才调用而JQuery中只需要页面架构加载完毕

$(window).load(function(){

});

JQuery的AJAX和原生js实现有什么关系

JQuery中的AJAX也是通过原生的js封装的,封装完成后让我们使用更加便利，不用考虑底层实现和兼容性等处理。

如果采用原生js实现AJAX是非常麻烦的，并且每次都是一样的，如果我们不使用JQuery，我们也要封装ajax对象的方法和属性，有像jquery这些已经封装完成，并且经过很多企业实际的框架，比较可靠并且开源，我们就不需要等装，直接使用成熟的框架(jquery)即可；

简单说一下html5？你对哪些现在哪些新技术有了解

html5是最新版本的html，是在原来html4的基础上增强类一些标签。

html5增加了一些像画板、声音、视频、web存储方面等高级功能，但是html5有一个不好的地方，那就是html5太强调语义了，导致开发者都不知道要选择哪个标签。在页面布局时，无论头部、主体、导航等模块都使用div来表示，但是html5的规范，需要使用不同不同的标签。(header,footer)

你对新技术有哪些了解：html5 css3。

简单说一下css3。

css3是最新版本的css，是对原来的css2的功能增强

css3中提供一些css2中实现起来比较困难或者不能实现的功能。

1）盒子圆角边框

2）盒子和文字的阴影

3）渐变

4）装换、移动、缩放、旋转等

5）过渡、动画都可以使用动画

6）可以使用媒体查询实现响应式网站

css3最大的缺点就是要根据不同的浏览器处理兼容性，对应有一些处理兼容性的工具，不用担心

javascript的typeof返回哪些数据类型

· Ｏbject，number，function，boolean，underfind;

例举3种强制类型转换和2种隐式类型转换?

· 强制（parseInt,parseFloat,number）隐式（== – ===）；

数组方法pop() push() unshift() shift()

· push()尾部添加 pop()尾部删除

· unshift()头部添加 shift()头部删除

ajax请求的时候get 和post方式的区别?

· 一个在url后面一个放在虚拟载体里面
有大小限制

· 安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的;

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

· GET - 从指定的资源请求数据

· POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

ajax请求时，如何解释json数据

· 使用eval parse,鉴于安全性考虑使用parse更靠谱;

添加删除替换插入到某个接点的方法

· obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

编写一个b继承a的方法;

JavaScript

function A(name){

this.name = name;

this.sayHello = function(){alert(this.name+” say Hello!”);};

}

function B(name,id){

this.temp = A;

this.temp(name); //相当于new A();

delete this.temp;

this.id = id;

this.checkId = function(ID){alert(this.id==ID)};

}

如何阻止事件冒泡和默认事件

JavaScript

function stopBubble(e)

{

if (e && e.stopPropagation)

e.stopPropagation()

else

window.event.cancelBubble=true

}

return false

下面程序执行后弹出什么样的结果?

JavaScript

function fn() {

this.a = 0;

this.b = function() {

alert(this.a)

}

fn.prototype = {

b: function() {

this.a = 20;

alert(this.a);

c: function() {

this.a = 30;

alert(this.a);

}

var myfn = new fn();

myfn.b();

myfn.c();

谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

下面程序的结果

JavaScript

function fun(n,o) {

console.log(o)

return {

fun:function(m){

return fun(m,n);

}

};

}

var a = fun(0); a.fun(1); a.fun(2); a.fun(3);

var b = fun(0).fun(1).fun(2).fun(3);

var c = fun(0).fun(1); c.fun(2); c.fun(3);

//答案：

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

下面程序的输出结果

JavaScript

var name = 'World!';

(function () {

if (typeof name === 'undefined') {

var name = 'Jack';

console.log('Goodbye ' + name);

} else {

console.log('Hello ' + name);

}

})();

介绍下你最常用的一款框架

· Jquery,Bootstrap，juqeryDataTable，BootstrapTable，EasyUI;

其它

你有哪些性能优化的方法？

（1）减少http请求次数：CSS, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

3.http状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

· 查找浏览器缓存

· DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求

· 进行HTTP协议会话

· 客户端发送报头(请求报头)

· 文档开始下载

· 文档树建立，根据标记请求所需指定MIME类型的文件

· 文件显示

浏览器这边做的工作大致分为以下几步：

· 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

· 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

浏览器的同源策略

提到跨域不能不先说一下”同源策略”。
何为同源？只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的协议名protocol、主机host、端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（通常指使用XMLHttpRequest请求）。

跨域请求方式

解决跨域问题，最简单的莫过于通过nginx反向代理进行实现，但是其需要在运维层面修改，且有可能请求的资源并不再我们控制范围内（第三方），所以该方式不能作为通用的解决方案，下面阐述了经常用到几种跨域方式：

JSONP（JSON with Padding）是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响，而利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。所有，通过Chrome查看所有JSONP发送的Get请求都是js类型，而非XHR。

缺点：

只能使用Get请求

不能注册success、error等事件监听函数，不能很容易的确定JSONP请求是否失败

JSONP是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保

查看原文：http://www.coder306.cn/?p=128