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）表单、表单项

<form role="form">   <div>     <label for="name">名称</label>     <input type="text" id="name" placeholder="请输入名称">   </div>   <button type="submit" class="btn btn-default">提交</button> </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 type=”checkbox” name=”body”/> 吃饭<br/>

<input type=”checkbox” name=”body”/> 睡觉<br/>

$(“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

1 2 3 4 5 6 7 8 9 10 11

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

1 2 3 4 5 6 7 8

function stopBubble(e) {     if (e && e.stopPropagation)         e.stopPropagation()     else         window.event.cancelBubble=true } return false

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2 3 4 5 6 7 8 9 10 11

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

1 2 3 4 5 6 7 8 9

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 一、语义有误，当前请求没法被服务器理解。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