CSS選擇器阁吝，哪些屬性可以繼承及CSS優(yōu)先級(jí)算法
- 無(wú)繼承性的屬性
?1.display
?2.文本屬性：vertical-align岳悟、text-decoration主到、text-shadow河泳、white-space伶授、unicode-bidi
?3.盒子模型的屬性：width断序、height、margin糜烹、border违诗、padding、
?4.背景屬性：background等
?5.定位屬性：float疮蹦、clear诸迟、position、min-width/height、max-width/height亮蒋、overflow、clip妆毕、z-index
?6.生成內(nèi)容屬性：content慎玖、counter-reset、counter-increment
?7.輪廓樣式屬性：outline
?8.size笛粘、page-break-bofore/after
?9.聲音樣式屬性：pause趁怔、cue、play - 有繼承性的屬性
?1.字體系列屬性：font
?2.文本系列屬性：text-indent薪前、text-align润努、line-height、word-spacing示括、letter-spacing铺浇、text-transform、direction垛膝、color
?3.元素可見性：visibility
?4.表格布局屬性
?5.列表布局屬性：list-style（-image/position/type）
?6.生成內(nèi)容屬性：quotes
?7.光標(biāo)屬性：cursor
?8.頁(yè)面樣式屬性：page鳍侣、page-break-inside、windows吼拥、orphans
?9.聲音樣式屬性：spack（-punctuation/numeral/header/rate）倚聚、volume、voice-family凿可、pitch（-range）惑折、stress、richness枯跑、azimuth惨驶、elevation - 所有元素可以繼承的屬性
?1.元素可見性：visibility
?2.光標(biāo)屬性：cursor - 內(nèi)聯(lián)元素可以繼承的屬性
?1.字體系列屬性
?2.除text-indent、text-align之外的文本系列屬性 - 塊級(jí)元素可以繼承的屬性
?1.text-indent敛助、text-align
長(zhǎng)輪訓(xùn)和WebSocket優(yōu)缺點(diǎn)
長(zhǎng)輪詢：優(yōu)點(diǎn)是在服務(wù)器無(wú)消息的時(shí)候不會(huì)頻繁去請(qǐng)求敞咧。缺點(diǎn)是服務(wù)器保持長(zhǎng)久的鏈接需要消耗資源，而且當(dāng)多開頁(yè)面同時(shí)都保持長(zhǎng)鏈接的話辜腺，會(huì)導(dǎo)致服務(wù)器消耗過大休建。
WebSocket：是HTML5中的協(xié)議，是一個(gè)持久化的協(xié)議评疗，支持持久連接测砂。
優(yōu)點(diǎn)：節(jié)約帶寬，不會(huì)發(fā)起沒有意義的請(qǐng)求百匆。WebSocket整個(gè)通訊過程是在一次連接狀態(tài)中砌些，不需要反復(fù)進(jìn)行http連接。
缺點(diǎn)：不兼容低版本的IE。
關(guān)于頁(yè)面性能都可以做哪些方面的優(yōu)化
- 盡量減少HTTP請(qǐng)求次數(shù)：合并文件是通過把所有的腳本放到同一個(gè)文件中來減少HTTP請(qǐng)求的方法存璃。把所有的背景圖像放到一個(gè)圖片文件中（CSS sprite）仑荐；
- 減少DNS查找次數(shù)：域名系統(tǒng)提供了域名和IP的對(duì)應(yīng)關(guān)系。DNS解析過程所需要的時(shí)間纵东，瀏覽器什么都不會(huì)做直到DNS查找完畢粘招。緩存DNS查找可以改善頁(yè)面性能，這種緩存需要一個(gè)特定的緩存服務(wù)器偎球，這種服務(wù)器一般屬于用戶的ISP提供商或者本地局域網(wǎng)控制洒扎，但是它同樣會(huì)在用戶使用的計(jì)算機(jī)上產(chǎn)生緩存。減少主機(jī)名的數(shù)量可以減少DNS查找次數(shù)衰絮。
- 避免跳轉(zhuǎn)：跳轉(zhuǎn)是使用301和302代碼實(shí)現(xiàn)的袍冷。
- 可緩存的AJAX：提高Ajax性能的措施中最重要的方法時(shí)使響應(yīng)具有可緩存性。
- 推遲加載內(nèi)容：可以先加載必要的頁(yè)面主體結(jié)構(gòu)猫牡，在確定頁(yè)面運(yùn)行正常后胡诗，再加載腳本來實(shí)現(xiàn)拖放和動(dòng)畫等效果。
- 預(yù)加載：預(yù)加載是在瀏覽器空閑時(shí)請(qǐng)求將來可能會(huì)用到的頁(yè)面內(nèi)容淌友，將其加載到緩存中乃戈。
- 減少DOM元素?cái)?shù)量
- 根據(jù)域名劃分頁(yè)面內(nèi)容
- 是iframe的數(shù)量最小
- 不要出現(xiàn)404錯(cuò)誤
- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)：用戶與你網(wǎng)站服務(wù)器的接近程度會(huì)影響響應(yīng)時(shí)間的長(zhǎng)短。把你的網(wǎng)站內(nèi)容分散到多個(gè)亩进、處于不同地域位置的服務(wù)器可以加快下載速度症虑。
- 使用GET來完成ajax請(qǐng)求：瀏覽器中的post方法是一個(gè)“兩步走”的過程，首先發(fā)送文件頭归薛，然后才發(fā)送數(shù)據(jù)谍憔。使用GET只需要發(fā)送一個(gè)TCP包。
- 把樣式表至于頂部：注重性能的前端服務(wù)器往往希望頁(yè)面有秩序的加載主籍。
- 避免使用CSS表達(dá)式：表達(dá)式的問題在于它的計(jì)算頻率比我們想象的多习贫。
- 使用外部JS和CSS
- 削減JS和CSS
- 用<link>替代@import
- 把腳本置于頁(yè)面底部：腳本帶來的問題是它阻止了頁(yè)面的平行下載。
- 不要在HTML中縮放圖像
Vue父子組件間通訊及非父子組件間通訊
父子組件間通訊：
?父組件給子組件傳遞props千元，父組件使用v-on來監(jiān)聽子組件上的自定義事件（$emit的變化）苫昌。
非父子組件間通訊：
?1.可以通過創(chuàng)建一個(gè)vue實(shí)例Bus作為媒介，要相互通信的兄弟組件中幸海，都引入Bus祟身，之后分別通過調(diào)用Bus事件觸發(fā)和監(jiān)聽來實(shí)現(xiàn)組件之間的通信和參數(shù)傳遞。
?2.使用vuex狀態(tài)管理物独。
vue使用腳手架有什么缺點(diǎn)袜硫？
使用腳手架生成項(xiàng)目架構(gòu)是一個(gè)標(biāo)準(zhǔn)化的過程，它是沒有辦法直接契合我們想要的模樣挡篓，會(huì)存在我們不需要的功能或者缺少我們需要的功能婉陷。因?yàn)椴皇菑念^開始搭建的項(xiàng)目框架帚称，在涉及到項(xiàng)目架構(gòu)改動(dòng)或者需要升級(jí)webpack版本等需求時(shí)，因?yàn)椴皇亲约憾ㄖ频哪_手架秽澳，不了解vue+webpack的工作流程闯睹，就有可能出現(xiàn)了問題無(wú)從解決。
關(guān)于vue的瀏覽器兼容
Vue官方對(duì)IE瀏覽器版本兼容情況的描述是ie9+經(jīng)過測(cè)試担神，Vue的核心框架vuejs本身楼吃，以及生態(tài)的官方核心插件（VueRouter，Vuex等）均可以在ie9
上正常使用杏瞻。
ie9環(huán)境下需要處理的兼容問題：
- ES6兼容：解決方案是使用
babel-polyfill組件所刀，他可以將ES6的代碼翻譯成低版本瀏覽器可以識(shí)別的es5代碼衙荐。 - Number對(duì)象：即使在使用
babel-polyfill做代碼翻譯后捞挥，還是有一些es6的新特性并沒有得到解決。es6將全局方法parseInt和parseFloat一直到Number對(duì)象上忧吟，行為完全不變砌函。這樣做的目的是逐步減少全局方法，使得語(yǔ)言逐步模塊化溜族。 - requestAnimationFrame方法：window.requestAnimationFrame是瀏覽器用于定時(shí)循環(huán)操作的一個(gè)接口讹俊，主要用途是按幀對(duì)網(wǎng)頁(yè)進(jìn)行重繪。其優(yōu)勢(shì)在于充分利用顯示器的刷新機(jī)制煌抒，比較節(jié)省資源仍劈。該方法告訴瀏覽器您希望執(zhí)行動(dòng)畫并請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來更新動(dòng)畫。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)寡壮，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用贩疙。window.requestAnimationFrame的最低兼容ie版本為10，那么在ie9上做兼容就需要制作requestAnimationFrame polyfill
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
- http網(wǎng)絡(luò)請(qǐng)求（跨域）
axios進(jìn)行數(shù)據(jù)請(qǐng)求時(shí)况既，默認(rèn)使用XMLHttpRequest對(duì)象这溅，在檢測(cè)到當(dāng)前請(qǐng)求時(shí)跨域訪問時(shí)，axios會(huì)測(cè)試瀏覽器是否支持XDomainRequest對(duì)象棒仍，若支持則優(yōu)先使用悲靴。
ie8/9中的XMLHttpRequest對(duì)象不支持跨域訪問，該對(duì)象在ie10后才原生支持訪問莫其。微軟的解決方案是在ie8/9中提供了XDomainRequest（XDR）對(duì)象來進(jìn)行解決跨域問題癞尚，雖然使用該對(duì)象可以跨域訪問成功，并返回?cái)?shù)據(jù)乱陡，但它卻仍然是一個(gè)功能不完整的半成品否纬，它的使用由諸多限制：
?1.XDR僅支持GET和POST兩種請(qǐng)求方式
?2.不支持自定義的請(qǐng)求頭，若服務(wù)器使用header的自定義參數(shù)進(jìn)行身份驗(yàn)證蛋褥，則不可用
?3.請(qǐng)求頭的Content-Type只允許設(shè)置為text/plain
?4.不允許跨協(xié)議的請(qǐng)求临燃，如果網(wǎng)頁(yè)在HTTP寫一下，就只能請(qǐng)求HTTP協(xié)議下的接口，不能訪問HTTPS接口
?5.XDR只接受HTTP/HTTPS的請(qǐng)求
?6.發(fā)起請(qǐng)求的時(shí)候膜廊，不會(huì)懈怠authentication或cookies
微軟提供的解決方案乏沸，根本無(wú)法勝任系統(tǒng)中各種場(chǎng)景的數(shù)據(jù)請(qǐng)求需求，至此爪瓜，axios對(duì)ie9的跨域數(shù)據(jù)請(qǐng)求已無(wú)能為力 - 完美解決方案：代理
webpacl的devServer.proxy的功能是由http-proxy-middleware項(xiàng)目來實(shí)現(xiàn)的蹬跃。實(shí)現(xiàn)原理是將目標(biāo)位置的請(qǐng)求代理為前端服務(wù)本地的請(qǐng)求。此時(shí)铆铆，axios會(huì)用回XMLHttpRequest對(duì)象進(jìn)行數(shù)據(jù)請(qǐng)求蝶缀。
不過，webpack的devServer.proxy僅在開發(fā)模式下可用薄货，生產(chǎn)模式下無(wú)法使用翁都。 - nginx配置
雖然devServer.proxy的功能只能工作于開發(fā)模式，但是生產(chǎn)模式下谅猾，也有解決方案柄慰。通常Vue的項(xiàng)目在編譯成最終js之后，僅需要靜態(tài)服務(wù)器即可税娜，其中以nginx為最優(yōu)選擇方案坐搔，輕量、高性能敬矩、高并發(fā)概行、反向代理服務(wù)等均為其優(yōu)點(diǎn)，這里需要做的數(shù)據(jù)請(qǐng)求代理的功能就使用到了nginx的反向代理的功能弧岳。
location /api/ {
proxy_pass [http://localhost:8081/myserver/;](http://localhost:8081/myserver/;)
}
該配置同樣是將目標(biāo)服務(wù)器位置代理為本地服務(wù)的/api路徑凳忙，如此，生產(chǎn)環(huán)境的數(shù)據(jù)請(qǐng)求問題也得到解決缩筛。
前端頁(yè)面突然需要處理大量數(shù)據(jù)消略，應(yīng)該怎么處理
- 卡頓主要出現(xiàn)在DOM操作上，拿到數(shù)據(jù)后可以懶加載渲染數(shù)據(jù)
- 使用requestAnimationFrame：與setTimeout和setInterval不同瞎抛，該api不要設(shè)置時(shí)間間隔艺演。（HTML5新增的定時(shí)器）。
setTimeout和setInterval問題是桐臊，它們都不精確胎撤。它們的內(nèi)在運(yùn)行機(jī)制決定了時(shí)間間隔參數(shù)實(shí)際上只是指定了把動(dòng)畫代碼添加到瀏覽器UI線程隊(duì)列中以等待執(zhí)行的時(shí)間。如果隊(duì)列前面已經(jīng)加入了其他任務(wù)断凶，那動(dòng)畫代碼就要等前面的任務(wù)完成后再執(zhí)行伤提。
requestAnimationFrame采用系統(tǒng)時(shí)間間隔，保持最佳繪制效率认烁。
requestAnimationFrame特點(diǎn)：
- requestAnimationFrame會(huì)把每一幀中的所有DOM操作集中起來肿男，再一次重繪或回流中就完成介汹，并且重繪或回流的時(shí)間間隔緊緊跟隨著瀏覽器的刷新頻率。
- 在隱藏或不可見的元素中舶沛，將不會(huì)進(jìn)行重繪或回流嘹承。
- 由瀏覽器專門為動(dòng)畫提供的API，再運(yùn)行瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用如庭，并且如果頁(yè)面不是激活狀態(tài)下的話叹卷，動(dòng)畫會(huì)自動(dòng)暫停。
兼容：IE9-瀏覽器不支持該方法坪它，可以使用setTimeout來兼容骤竹。
閉包的定義及其利弊，一般那些情況下用到閉包
定義：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)往毡。閉包可以簡(jiǎn)單理解成“定義在函數(shù)內(nèi)部的函數(shù)”蒙揣。在本質(zhì)上，閉包是將外部函數(shù)和內(nèi)部函數(shù)連接起來的橋梁卖擅。
使用閉包需要注意的地方：1.由于閉包會(huì)使得函數(shù)中的變量全部存儲(chǔ)在內(nèi)存中鸣奔，內(nèi)存消耗很大墨技，所以不能濫用閉包惩阶，不會(huì)會(huì)導(dǎo)致網(wǎng)頁(yè)的性能問題。在IE中有可能會(huì)導(dǎo)致內(nèi)存泄露扣汪，解決辦法是断楷，在退出函數(shù)之前，把不使用的全局變量全部刪除崭别。2.閉包會(huì)在父函數(shù)外部冬筒，改變父函數(shù)內(nèi)部的值。所以茅主，如果把父函數(shù)當(dāng)做對(duì)象使用舞痰，把對(duì)象當(dāng)做它的公用方法，把內(nèi)部變量當(dāng)做私有屬性诀姚，這時(shí)一定要小心不要隨便改變父函數(shù)內(nèi)部私有屬性的值响牛。
function makeAdder(x) {
return function(y){
return x+y
}
}
var add5 = makeAdder(5)
var add10 = makeAdder(10)
add5(2) => 7
add10(2) => 12
本質(zhì)上，makeAdder() 是一個(gè)函數(shù)工廠 — 為它傳入一個(gè)參數(shù)就可以創(chuàng)建一個(gè)參數(shù)與其他值求和的函數(shù)赫段。
閉包常用的使用場(chǎng)景：
- 通過循環(huán)給多個(gè)dom元素添加方法
for(var i = 0, len = btns.length; i < len; i++) {
(function(i) {
btns[i].onclick = function() {
alert(i);
}
}(i))
}
- 封裝變量
閉包可以將一些不希望暴露在全局的變量封裝成“私有變量”呀打。
假如有一個(gè)計(jì)算乘積的函數(shù)，為了提高函數(shù)性能糯笙，我們?cè)黾泳彺鏅C(jī)制贬丛，將之前計(jì)算過的結(jié)果緩存起來。這里存放緩存結(jié)果的變量不需要暴露給外界给涕，并且需要在函數(shù)運(yùn)行結(jié)束后豺憔，仍然保存额获，可以采用閉包。
var mult = (function(){
var cache = {}
var calculate = function(){
var a = 1;
for(var i = 0, len = arguments.length; i < len; i ++){
a = a * arguments[i];
}
return a;
}
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args] = calculagte.apply(null, arguments);
}
}())
- 延續(xù)局部變量的壽命
img對(duì)象經(jīng)常用于數(shù)據(jù)上報(bào)：
var report = function(src) {
var img = new Image();
img.src = src;
}
report('http://xxx.com/getUserInfo');
這段代碼在運(yùn)行時(shí)恭应，發(fā)現(xiàn)在一些低版本瀏覽器上存在bug咪啡，會(huì)丟失部分?jǐn)?shù)據(jù)上報(bào)，原因是img是report函數(shù)中的局部變量暮屡，當(dāng)report函數(shù)調(diào)用結(jié)束后撤摸，img對(duì)象隨即被銷毀，而此時(shí)可能還沒來得及發(fā)出http請(qǐng)求褒纲。
因此准夷，可以使用閉包把img對(duì)象封閉起來：
var report = (function(){
var imgs = [];
return function(src) {
var img = new Image();
imgs.push(img);
img.src = src;
}
})()
- 閉包+設(shè)計(jì)模式
從一個(gè)jquery bootstrap項(xiàng)目到用vue或者react重構(gòu)項(xiàng)目，前期工作都需要考慮什么莺掠？
個(gè)人理解：首先確認(rèn)原項(xiàng)目中主要用到的技術(shù)有哪一些衫嵌，考慮到重構(gòu)方面的工作，是否可以完全替代之前的功能彻秆。如果不能則思考有沒有其他的解決方案楔绞。之后就需要考慮到vue整個(gè)生態(tài)系統(tǒng)所包含的主要功能，衡量哪些功能該需要用到項(xiàng)目中唇兑，然后再使用webpack自己手動(dòng)或使用腳手架生成項(xiàng)目架構(gòu)酒朵，再修改腳手架使其完全重構(gòu)項(xiàng)目所需要用到的功能。分析項(xiàng)目中全局所需要用到的模塊扎附，可以首先抽取一些公用css蔫耽，公用js、靜態(tài)資源等留夜，而且可以對(duì)接口請(qǐng)求匙铡，vue提供的全局過濾器等做一個(gè)封裝，方便開發(fā)業(yè)務(wù)時(shí)使用碍粥。
