簡單說一下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 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是從其他域中加載代碼執行，容易受到跨站請求僞造的攻擊，其安全性無法確保