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