Web前端經(jīng)典面試試題及答案2

javascript面向?qū)ο笾欣^承實(shí)現(xiàn)？

面向?qū)ο蟮幕咎卣饔校悍忾]、繼承、多態(tài)。
在JavaScript中實(shí)現(xiàn)繼承的方法：

  1. 原型鏈（prototype chaining）
  2. call()/apply()
  3. 混合方式(prototype和call()/apply()結(jié)合)
  4. 對(duì)象冒充

繼承的方法如下：
1、prototype原型鏈方式：

function teacher(name){  
    this.name = name;  
}  
teacher.prototype.sayName = function(){  
    console.log("name is "+this.name);  
}  
var teacher1 = new teacher("xiaoming");  
teacher1.sayName();  
  
function student(name){  
    this.name = name;  
}  
student.prototype = new teacher()  
var student1 = new student("xiaolan");  
student1.sayName();  
//  name is xiaoming  
//  name is xiaolan

2、call()/apply()方法

function teacher(name,age){
this.name = name;
this.age = age;
this.sayhi = function(){
alert('name:'+name+", age:"+age);
}
}
function student(){
var args = arguments;

teacher.call(this,args[0],args[1]);
// teacher.apply(this,arguments);
}
var teacher1 = new teacher('xiaoming',23);
teacher1.sayhi();

var student1 = new student('xiaolan',12);
student1.sayhi();

// alert: name:xiaoming, age:23
// alert: name:xiaolan, age:12

使用 teacher構(gòu)造函數(shù)（也是函數(shù)）在this對(duì)象下執(zhí)行，那么 student就有了teacher的所有屬性和方法

3、混合方法【prototype,call/apply】


function teacher(name,age){
this.name = name;
this.age = age;
}
teacher.prototype.sayName = function(){
console.log('name:'+this.name);
}
teacher.prototype.sayAge = function(){
console.log('age:'+this.age);
}

function student(){
var args = arguments;
teacher.call(this,args[0],args[1]);
}
student.prototype = new teacher();

var student1 = new student('xiaolin',23);
student1.sayName();
student1.sayAge();
// name:xiaolin
// age:23

4、對(duì)象冒充

function Person(name,age){
this.name = name;
this.age = age;
this.show = function(){
console.log(this.name+", "+this.age);
}
}

function Student(name,age){
this.student = Person; //將Person類的構(gòu)造函數(shù)賦值給this.student
this.student(name,age); //js中實(shí)際上是通過對(duì)象冒充來實(shí)現(xiàn)繼承的
delete this.student; //移除對(duì)Person的引用
}

var s = new Student("小明",17);
s.show();

var p = new Person("小花",18);
p.show();
// 小明, 17
// 小花, 18
javascript相關(guān)程序計(jì)算題
var str = 'asdfssaaasasasasaa';
var json = {};
for(var i=0;i<str.length;i++){
     if(!json[str.charAt(i)]){
        json[str.chartAt(i)]=1;
    }else{
        json[str.charAt(i)]++;
    }
};
var iMax=0;
var iIndex='';
 for(var i in json){
    if(json[i]>iMax){
        iMax=json[i];
        iIndex=i;  
    }
}
console.log('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');
JavaScript 數(shù)組(Array)對(duì)象

這里只是做了相關(guān)的列舉，具體的使用方法，請(qǐng)參考網(wǎng)址。

Array 對(duì)象屬性

constructor 返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用。

length 設(shè)置或返回?cái)?shù)組中元素的數(shù)目。

prototype 使您有能力向?qū)ο筇砑訉傩院头椒ā?br> Array 對(duì)象方法

concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。

join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。

pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素。

shift() 刪除并返回?cái)?shù)組的第一個(gè)元素

push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長度。

unshift() 向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。

reverse() 顛倒數(shù)組中元素的順序。

slice() 從某個(gè)已有的數(shù)組返回選定的元素

sort() 對(duì)數(shù)組的元素進(jìn)行排序

splice() 向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。

toSource() 返回該對(duì)象的源代碼。

toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

toLocaleString() 把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果。

valueOf() 返回?cái)?shù)組對(duì)象的原始值

編寫一個(gè)方法 去掉一個(gè)數(shù)組的重復(fù)元素

方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);

結(jié)果如下： [0, 2, 3, 4]
方法二：



var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);

結(jié)果為：[2, 3, 4, 5, 6]

方法三：

var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);

結(jié)果為：[2, 3, 4, 5, 6]

jquery相關(guān)

jQuery 庫中的 $() 是什么？

$() 函數(shù)是 jQuery() 函數(shù)的別稱。$() 函數(shù)用于將任何對(duì)象包裹成 jQuery 對(duì)象，接著你就被允許調(diào)用定義在 jQuery 對(duì)象上的多個(gè)不同方法。你可以將一個(gè)選擇器字符串傳入 $() 函數(shù)，它會(huì)返回一個(gè)包含所有匹配的 DOM 元素?cái)?shù)組的 jQuery 對(duì)象。

如何找到所有 HTML select 標(biāo)簽的選中項(xiàng)？

$('[name=selectname] :selected')

$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同？

$(this) 返回一個(gè) jQuery 對(duì)象，你可以對(duì)它調(diào)用多個(gè) jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。

而 this 代表當(dāng)前元素，它是 JavaScript 關(guān)鍵詞中的一個(gè)，表示上下文中的當(dāng)前 DOM 元素。你不能對(duì)它調(diào)用 jQuery 方法，直到它被 $() 函數(shù)包裹，例如 $(this)。

jquery怎么移除標(biāo)簽onclick屬性？
 獲得a標(biāo)簽的onclick屬性: $("a").attr("onclick")

刪除onclick屬性：$("a").removeAttr("onclick");

設(shè)置onclick屬性：$("a").attr("onclick","test();");
jquery中addClass,removeClass,toggleClass的使用。
$(selector).addClass(class)：為每個(gè)匹配的元素添加指定的類名

$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個(gè)值；

$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個(gè)類

$(selector).removeAttr(class);刪除class這個(gè)屬性；

JQuery有幾種選擇器?

(1)、基本選擇器：#id，class,element,*;

(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings

$("#one +div") 選取id為one的元素的下一個(gè)<div>同輩元素 等同于$(#one).next("div")
$("#one~div") 選取id為one的元素的元素后面的所有<div>同輩元素 等同于$(#one).nextAll("div")

(3)、基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、內(nèi)容過濾器選擇器： :contains ，:empty ，:has ，:parent

(5)、可見性過濾器選擇器：:hidden ，:visible

(6)、屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表單過濾器選擇器：:enabled ，:disabled ，:checked ，:selected

jQuery中的Delegate()函數(shù)有什么作用？

delegate()會(huì)在以下兩個(gè)情況下使用到：

1、如果你有一個(gè)父元素，需要給其下的子元素添加事件，這時(shí)你可以使用delegate()了，代碼如下：

$("ul").delegate("li", "click", function(){ $(this).hide(); });

2、當(dāng)元素在當(dāng)前頁面中不可用時(shí)，可以使用delegate()

$(document).ready()方法和window.onload有什么區(qū)別？

(1)、window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的。

(2)、$(document).ready() 方法可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱，并調(diào)用執(zhí)行綁定的函數(shù)。

如何用jQuery禁用瀏覽器的前進(jìn)后退按鈕？
<script type="text/javascript" language="javascript">
　　$(document).ready(function() {
　　　　window.history.forward(1);
  　　　　//OR window.history.forward(-1);
　　});
</script>
jquery中$.get()提交和$.post()提交有區(qū)別嗎？

相同點(diǎn)：都是異步請(qǐng)求的方式來獲取服務(wù)端的數(shù)據(jù)；

異同點(diǎn)：

1、請(qǐng)求方式不同：$.get() 方法使用GET方法來進(jìn)行異步請(qǐng)求的。$.post() 方法使用POST方法來進(jìn)行異步請(qǐng)求的。

2、參數(shù)傳遞方式不同：get請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器的，這種傳遞是對(duì)用戶不可見的。

3、數(shù)據(jù)傳輸大小不同：get方式傳輸?shù)臄?shù)據(jù)大小不能超過2KB 而POST要大的多

4、安全問題： GET 方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，因此有安全問題。

寫出一個(gè)簡單的$.ajax()的請(qǐng)求方式？
$.ajax({
    url:'http://www.baidu.com',
    type:'POST',
    data:data,
    cache:true,
    headers:{},
    beforeSend：function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
});
jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？

(1)、bind 【jQuery 1.3之前】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

語法：bind(type,[data],function(eventObject))；

特點(diǎn)：

(1)、適用于頁面元素靜態(tài)綁定。只能給調(diào)用它的時(shí)候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件。

(2)、當(dāng)頁面加載完的時(shí)候，你才可以進(jìn)行bind()，所以可能產(chǎn)生效率問題。

實(shí)例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

語法：live(type, [data], fn);

特點(diǎn)：

(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。

(2)、live正是利用了事件委托機(jī)制來完成事件的監(jiān)聽處理，把節(jié)點(diǎn)的處理委托給了document，新添加的元素不必再綁定一次監(jiān)聽器。

(3)、使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級(jí)比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；

通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）。

(3)、delegate 【jQuery 1.4.2中引入】

定義和用法：將監(jiān)聽事件綁定在就近的父級(jí)元素上

語法：delegate(selector,type,[data],fn)

特點(diǎn)：

(1)、選擇就近的父級(jí)元素，因?yàn)槭录梢愿斓拿芭萆先?，能夠在第一時(shí)間進(jìn)行處理。

(2)、更精確的小范圍使用事件代理，性能優(yōu)于.live()。可以用在動(dòng)態(tài)添加的元素上。

實(shí)例如下：

$("#info_table").delegate("td","click",function(){/顯示更多信息/});

$("table").find("#info").delegate("td","click",function(){/顯示更多信息/});

(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機(jī)制】

定義和用法：將監(jiān)聽事件綁定到指定元素上。

語法：on(type,[selector],[data],fn)

實(shí)例如下：$("#info_table").on("click","td",function(){/顯示更多信息/});參數(shù)的位置寫法與delegate不一樣。

說明：on方法是當(dāng)前JQuery推薦使用的事件綁定方法，附加只運(yùn)行一次就刪除函數(shù)的方法是one()。

總結(jié)：.bind(), .live(), .delegate(),.on()分別對(duì)應(yīng)的相反事件為：.unbind(),.die(), .undelegate(),.off()

HTML & CSS:

簡述一下src與href的區(qū)別

href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。

當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

簡述同步和異步的區(qū)別

同步是阻塞模式，異步是非阻塞模式。
同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，若該請(qǐng)求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會(huì)一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；
異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率。

px和em的區(qū)別

相同點(diǎn)：px和em都是長度單位；

異同點(diǎn)：px的值是固定的，指定是多少就是多少，計(jì)算比較容易。em得值不是固定的，并且em會(huì)繼承父級(jí)元素的字體大小。
瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核
Firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))

什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

漸進(jìn)增強(qiáng) progressive enhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation：
一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別：

a. 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給

b. 漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要

c. 降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶

sessionStorage 、localStorage 和 cookie 之間的區(qū)別

不同點(diǎn)：

(1)、存儲(chǔ)內(nèi)容是否發(fā)送到服務(wù)器端：當(dāng)設(shè)置了Cookie后，數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端，造成一定的寬帶浪費(fèi)；

    web storage,會(huì)將數(shù)據(jù)保存到本地，不會(huì)造成寬帶浪費(fèi)；

(2)、數(shù)據(jù)存儲(chǔ)大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會(huì)話標(biāo)識(shí)；web storage數(shù)據(jù)存儲(chǔ)可以達(dá)到5M;

(3)、數(shù)據(jù)存儲(chǔ)的有效期限不同：cookie只在設(shè)置了Cookid過期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器；

    sessionStorage,僅在關(guān)閉瀏覽器之前有效；localStorage,數(shù)據(jù)存儲(chǔ)永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面；

cookie和session的區(qū)別：
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上
2、cookie不是很安全，別人可以分析存放在本地的cookie并進(jìn)行cookie欺騙，考慮到安全應(yīng)當(dāng)使用session
3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上，當(dāng)訪問增多，會(huì)比較占用你服務(wù)器的性能，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie
4、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie
5、建議將登錄信息等重要信息存放為session，其他信息如果需要保留，可以放在cookie中
6、session保存在服務(wù)器，客戶端不知道其中的信心；cookie保存在客戶端，服務(wù)器能夠知道其中的信息
7、session中保存的是對(duì)象，cookie中保存的是字符串
8、session不能區(qū)分路徑，同一個(gè)用戶在訪問一個(gè)網(wǎng)站期間，所有的session在任何一個(gè)地方都可以訪問到，而cookie中如果設(shè)置了路徑參數(shù)，那么同一個(gè)網(wǎng)站中不同路徑下的cookie互相是訪問不到的

*web Storage和Cookie的區(qū)別 *
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的，cookie的大小是受限的，并且每次請(qǐng)求一個(gè)新的頁面的時(shí)候cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可跨域調(diào)用。
除此之外，web storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。

Ajax的優(yōu)缺點(diǎn)及工作原理？

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）

優(yōu)點(diǎn)：

1.減輕服務(wù)器的負(fù)擔(dān),按需取數(shù)據(jù),最大程度的減少冗余請(qǐng)求

2.局部刷新頁面,減少用戶心理和實(shí)際的等待時(shí)間,帶來更好的用戶體驗(yàn)

3.基于xml標(biāo)準(zhǔn)化,并被廣泛支持,不需安裝插件等,進(jìn)一步促進(jìn)頁面和數(shù)據(jù)的分離
缺點(diǎn)：

1.AJAX大量的使用了javascript和ajax引擎,這些取決于瀏覽器的支持.在編寫的時(shí)候考慮對(duì)瀏覽器的兼容性.

2.AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的.

3.對(duì)流媒體還有移動(dòng)設(shè)備的支持不是太好等

AJAX的工作原理：

1.創(chuàng)建ajax對(duì)象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判斷數(shù)據(jù)傳輸方式(GET/POST)

3.打開鏈接 open()

4.發(fā)送 send()

5.當(dāng)ajax對(duì)象完成第四步（onreadystatechange）數(shù)據(jù)接收完成，判斷http響應(yīng)狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調(diào)函數(shù)

開發(fā)及性能優(yōu)化

規(guī)避javascript多人開發(fā)函數(shù)重名問題
  • 命名空間
  • 封閉空間
  • js模塊化mvc（數(shù)據(jù)層、表現(xiàn)層、控制層）
  • seajs
  • 變量轉(zhuǎn)換成對(duì)象的屬性
  • 對(duì)象化
請(qǐng)說出三種減低頁面加載時(shí)間的方法
  • 壓縮css、js文件
  • 合并js、css文件，減少http請(qǐng)求
  • 外部js、css文件放在最底下
  • 減少dom操作，盡可能用變量替代不必要的dom操作
你所了解到的Web攻擊技術(shù)

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網(wǎng)站注冊(cè)用戶的瀏覽器內(nèi)運(yùn)行非法的HTML標(biāo)簽或者JavaScript進(jìn)行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點(diǎn)請(qǐng)求偽造）：指攻擊者通過設(shè)置好的陷阱，強(qiáng)制對(duì)已完成的認(rèn)證用戶進(jìn)行非預(yù)期的個(gè)人信息或設(shè)定信息等某些狀態(tài)更新。

web前端開發(fā)，如何提高頁面性能優(yōu)化？

內(nèi)容方面：
1.減少 HTTP 請(qǐng)求 (Make Fewer HTTP Requests)

2.減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可緩存 (Make Ajax Cacheable)
針對(duì)CSS：
1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4.避免 CSS 表達(dá)式 (Avoid CSS Expressions)

針對(duì)JavaScript ：

  1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

  2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

  3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

  4. 移除重復(fù)腳本 (Remove Duplicate Scripts)
    面向圖片(Image)：
    1.優(yōu)化圖片

2 不要在 HTML 中使用縮放圖片

3 使用恰當(dāng)?shù)膱D片格式

4 使用 CSS Sprites 技巧對(duì)圖片優(yōu)化

前端開發(fā)中，如何優(yōu)化圖像？圖像格式的區(qū)別？

優(yōu)化圖像：
1、不用圖片，盡量用css3代替。 比如說要實(shí)現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成。

2、 使用矢量圖SVG替代位圖。對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖?，F(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！

3.、使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG、GIF、PNG。

基本上，內(nèi)容圖片多為照片之類的，適用于JPEG。

而修飾圖片通常更適合用無損壓縮的PNG。

GIF基本上除了GIF動(dòng)畫外不要使用。且動(dòng)畫的話，也更建議用video元素和視頻格式，或用SVG動(dòng)畫取代。
4、按照HTTP協(xié)議設(shè)置合理的緩存。

5、使用字體圖標(biāo)webfont、CSS Sprites等。

6、用CSS或JavaScript實(shí)現(xiàn)預(yù)加載。

7、WebP圖片格式能給前端帶來的優(yōu)化。WebP支持無損、有損壓縮，動(dòng)態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網(wǎng)絡(luò)等圖片傳輸。

瀏覽器是如何渲染頁面

渲染的流程如下：

1.解析HTML文件，創(chuàng)建DOM樹。

自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。

2.解析CSS。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；

3.將CSS與DOM合并，構(gòu)建渲染樹（Render Tree）

4.布局和繪制，重繪（repaint）和重排（reflow）的？

【參考來源】：https://blog.csdn.net/wdlhao/article/details/79079660#t17

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進(jìn)階之旅閱讀 115,556評(píng)論 24贊 450
  • 請(qǐng)參看我github中的wiki，不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,762評(píng)論 2贊 19
  • 很早之前就在看web前端面試題，一直想總結(jié)一個(gè)比較全面又詳細(xì)的面試題庫，現(xiàn)在總結(jié)了一些，分享給大家，以后還會(huì)持續(xù)更...
    櫻桃小丸子兒閱讀 86,423評(píng)論 32贊 691
  • 嗖嗖嗖，叢林好像有人過來，沢田綱吉往那邊看。 一個(gè)人影過來，沢田綱吉對(duì)漩渦鳴人說：“鳴人，有人過來，把封印之書收好...
    白蘭杰索閱讀 727評(píng)論 0贊 0
  • 如何不加班 把瑣碎的事放在后面統(tǒng)一處理 先做重要的事，簡單瑣碎的東西囤起來 計(jì)劃好下班的事情，知道下班后要做什么 ...
    3小俠閱讀 137評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容