作用域
預編譯 --》
{
1、創建上下文(AO對象)
2、找將形參及變量申明,(重複的不用列),將形參名及變量作爲AO的屬性,值爲undefined
3、將形參值和實參值統一
4、在函數體裏找函數申明,值賦予函數體
}
例:
function fn(a,b){
console.log(a); //function a(){}
console.log(b); //undefined
var b = 234;
console.log(b) //234;
a = 123;
console.log(a); //123
function a(){}
var a;
b = 234;
var b = function(){}
console.log(a); //123
console.log(b); //function(){}
}
fn(1);
第一步:OA {
第二部:a: undefined
b:undefined
第三部: a:1,
b: undefined
第四部:a:function a(){}
b:undefined
}
src與href的區別
href 是指向網絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,用於超鏈接。
src是指向外部資源的位置,指向的內容將會嵌入到文檔中當前標籤所在位置;在請求src資源時會將其指向的資源下載並應用到文檔內,例如js腳本,img圖片和frame等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執行完畢,圖片和框架等元素也如此,類似於將所指向資源嵌入當前標籤內。這也是爲什麼將js腳本放在底部而不是頭部。
以上是比較官方的,然而我所理解的是
href:是到哪裏去
src:是從哪裏來
解決 display:inline-block 之間顯示間隙
1、移除空格(div之間回車)
2、使用margin 負值
3、使用 font-size:0(給最外面的div把font-size設爲0在兩個小的div裏面設置自身字體大小)
4、letter-spacing
5、word-spacing
display:none和visibility:hidden的區別
display:none:隱藏對應的元素,在文檔佈局中不再給它分配空間,它各邊的元素會合攏, 就當他從來不存在。(通俗來說,就是display的隱藏,不僅僅是隱藏就連他原本的位置也會消失)
visibility:hidden:隱藏對應的元素,但是在文檔佈局中仍保留原來的空間。
(然而這個隱藏只是隱藏了元素,並沒有去掉他原本的位置)
HTML的< >&"©分別是<,>,&,",©;的轉義字符
<script defer src="/js/logDiv.js"></script>,JS 文件的內容是:
const div = document.querySelecot('div');
console.log(div);
defer 屬性MDN 對此的描述是用來通知瀏覽器該腳本將在文檔完成解析後,觸發 DOMContentLoaded 事件前執行。設置這個屬性,能保證 DOM 解析後馬上打印出 div。
sass生成css文件的同時,所生成的.map文件是做什麼用途的
sass文件相當於源文件,css相當於編譯後的文件,當檢查到頁面問題的時候,你看到的是css,但是需要修改的是sass文件,這個map就是兩個文件的對應關係表。
1、 JavaScript包括哪些數據類型?
參考答案:javascript中包含6種數據類型:undefined、null、string、 number、boolean和object。其中,前5種是原始數據類型,object是對象類型。
object類型中包括Object、 Function、String、Number、Boolean、Array、Regexp、Date、Globel、Math、Error,以及宿主環境提供的object類型。
2、 列舉所知道的圖片格式,說明其應用場景和優缺點
參考答案:
(1)bmp(位圖)格式:它是Windows操作系統中的標準圖像文件格式,能夠被多種Windows應用程序所支持。圖像信息較豐富,幾乎不進行壓縮,但由此導致了它與生俱生來的缺點——佔用磁盤空間過大。
(2)gif格式:可以同時存儲若干幅靜止圖象進而形成連續的動畫。目前Internet上大量採用的彩色動畫文件多爲這種格式的文件。缺點是不能存儲超過256色的圖像。
(3)jpeg格式:文件擴展名爲.jpg或.jpeg,其壓縮技術十分先進,可以用最少的磁盤空間得到較好的圖像質量。應用非常廣泛,特別是在網絡和光盤讀物上。
(4)png格式:一種新興的網絡圖像格式,結合GIF及JPG兩家之長,是目前保證最不失真的格式,它汲取了GIF和JPG二者的優點,存貯形式豐富。PNG的缺點是不支持動畫應用效果。
3、 <img>元素的alt和title有什麼異同?
參考答案:在不同瀏覽器裏面表現有些不同。在alt和title同時設置的時候,alt作爲圖片的替代文字出現,title是圖片的解釋文字。
4、 請簡單實現雙向數據綁定mvvm。
5、 用css、html編寫一個兩列布局的網頁,要求右側寬度爲200px,左側自動擴展。
常見技術問題總結如下:
1、 web前端產品的開發流程
-
根據產品的定位、用戶羣,確定配色,在紙上設計整體佈局;
-
png或者psd出效果圖,切出需要的小圖片;
-
手寫代碼div+css構造出頁面,然後根據功能寫腳本。
2、 說一說事件流
事件流分爲兩種,捕獲事件流和冒泡事件流。
-
捕獲事件流從根節點開始執行,一直往子節點查找執行,直到查找執行到目標節點;
-
冒泡事件流從目標節點開始執行,一直往父節點冒泡查找執行,直到查到到根節點。
事件流分爲三個階段,一個是捕獲節點,一個是處於目標節點階段,一個是冒泡階段。
3、 請說出幾種你知道的AJAX跨域的方法,這些跨域的方法分別有哪些特點,適合應用於哪些場景。
-
代理實現最麻煩,但使用最廣泛,任何支持AJAX的瀏覽器都可以使用這種方式;
-
JSONP相對簡單,但只支持GET方式調用;
-
XHR2最簡單,但只支持HTML5,如果你是移動端開發,可以選擇使用XHR2。
4、請列舉一下常用的Linux命令。
cd,ls,cp,find,mv,rm,cat,grep。
5、對於加快網頁的加載速度都有哪些優化的方法。
-
優化圖片資源的格式和大小;
-
減少重定向請求;
-
減少DNS查詢次數;
-
壓縮css和js內容。
for of與 for in
區別:for of es6標準 循環出的是value 只可以循環可迭代對象的可迭代屬性,不可迭代屬性在循環中被忽略了。
for in es5標準 循環出的是key 循環除了遍歷數組元素以外,還會遍歷自定義屬性。
例:var arr = [1,2,3] arr.name = 'aaa'
for(var key in arr){
console.log(key) // 0,1,2,name
}
for(var value of arr){
console.log(value) //1,2,3
}
for of 可以與Object.keys()搭配使用 //Object.keys()獲取對象key的數組
var student = {
name:'aaa',
age:22,
locate:{
country:'china',
city:'shanxi'
}
}
// Object.keys(student) // ['name','age','locate']
for (var key of Object.keys(student)){
console.log(`${key}:${student[key]}`)
}
script引入方式:
<script defer> :異步加載,元素解析完成後執行
<script async>:異步加載,與元素解析並行執行
-
<script src="script.js"></script>
沒有
defer
或async
,瀏覽器會立即加載並執行指定的腳本,“立即”指的是在渲染該script
標籤之下的文檔元素之前,也就是說不等待後續載入的文檔元素,讀到就加載並執行。 -
<script async src="script.js"></script>
有
async
,加載和渲染後續文檔元素的過程將和script.js
的加載與執行並行進行(異步)。 -
<script defer src="myscript.js"></script>
有
defer
,加載後續文檔元素的過程將和script.js
的加載並行進行(異步),但是script.js
的執行要在所有元素解析完成之後,DOMContentLoaded
事件觸發之前完成。
模塊化
-
分類:
- es6:
import / exports
- commonjs:
require / module.exports / exports
- amd:
require / defined
- es6:
-
require
與import
的區別require
支持 動態導入,import
不支持,正在提案 (babel 下可支持)require
是 同步 導入,import
屬於 異步 導入require
是 值拷貝,導出值變化不會影響導入值;import
指向 內存地址,導入值會隨導出值而變化
數組(array)
-
map
: 遍歷數組,返回回調返回值組成的新數組 -
forEach
: 無法break
,可以用try/catch
中throw new Error
來停止 -
filter
: 過濾 -
some
: 有一項返回true
,則整體爲true
-
every
: 有一項返回false
,則整體爲false
-
join
: 通過指定連接符生成字符串 -
push / pop
: 末尾推入和彈出,改變原數組, 返回推入/彈出項 -
unshift / shift
: 頭部推入和彈出,改變原數組,返回操作項 -
sort(fn) / reverse
: 排序與反轉,改變原數組 -
concat
: 連接數組,不影響原數組, 淺拷貝 -
slice(start, end)
: 返回截斷後的新數組,不改變原數組 -
splice(start, number, value...)
: 返回刪除元素組成的數組,value 爲插入項,改變原數組 -
indexOf / lastIndexOf(value, fromIndex)
: 查找數組項,返回對應的下標 -
reduce / reduceRight(fn(prev, cur), defaultPrev)
: 兩兩執行,prev 爲上次化簡函數的return
值,cur 爲當前值(從第二項開始)
從輸入 url 到展示的過程
- 輸入url //當我們開始在瀏覽器中輸入網址的時候,瀏覽器其實就已經在智能的匹配可能得 url 了,他會從歷史記錄,書籤,緩存等地方
- DNS 解析
- TCP 三次握手
- 發送請求,分析 url,設置請求報文(頭,主體)
- 服務器返回請求的文件 (html)
- 瀏覽器渲染
- HTML parser --> DOM Tree
- 標記化算法,進行元素狀態的標記
- dom 樹構建
- CSS parser --> Style Tree
- 解析 css 代碼,生成樣式樹
- attachment --> Render Tree
- 結合 dom樹 與 style樹,生成渲染樹
- layout: 佈局
- GPU painting: 像素繪製頁面
- HTML parser --> DOM Tree
-
瀏覽器緩存機制分析及前端緩存清理
-
緩存的優缺點
優點
現在說一下緩存的好處,好處顯而易見嘛,就是說請求一些靜態資源,js,css,圖片這些,不會變化的資源,請求會變得更快,加快了客戶端加載網頁的速度,提高了頁面的響應速度,也減少了冗餘數據的傳遞,節省了網絡帶寬流量,減少服務端的負擔,大大提高了網站性能。
缺點
但是缺點也顯而易見,客戶端和服務端交互的時候,服務端的數據雖然變了,但是頁面緩存沒有改變,對於相同的url,ajax提交過去以後,瀏覽器是從緩存中拿數據,這種情況肯定是不被允許的。
那麼什麼時候會觸發緩存呢,在這之前先說一下緩存機制吧。
-
強制緩存
就是緩存中已經有了請求數據的時候,客戶端直接從緩存中獲取數據,只有當緩存中沒有請求數據的時候,客戶端纔會從服務端拿取數據。
協商緩存
也成爲對比緩存,就是說客戶端會從緩存中獲取到一個緩存數據的標識,根據這個標識會請求服務端驗證是否失效,如果沒有失效,服務端會返回304,這時候客戶端就直接從緩存中取數據,如果失效了,服務端會返回新的數據。
這兩種緩存機制可以同時存在,不過強制緩存的優先級高於協商緩存。
現在我們簡單的瞭解了一下緩存機制的原理,該說一下什麼時候會觸發緩存,服務端是如何判斷緩存是否失效呢?大家都知道,發送請求的時候會有請求數據和響應數據,這個被稱爲報文,報文中包含首部header和主體部分body。與緩存相關的規則信息就包含在header中。body中的內容就是http請求真正要傳輸的數據。舉個http報文的頭部例子
-
強制緩存
服務器響應的header中會用兩個字段來表明,Expires和Cache-Control。
Expires
Expires的值是服務端返回的數據到期時間。當再次請求時的請求時間小於返回的此時間,則直接使用緩存數據,但是因爲客戶端和服務端的時間可能有誤差,所以這個緩存命中可能會有誤差,另一方面,expires是http1.0的產物,所以現在大多數都使用Cache-Control
Cache-Control
Cache-Control有很多產物,不同的屬性代表的意義不同。
private: 客戶端可以緩存
public: 客戶端和服務器可以緩存
max-age=t:緩存內容在t秒後失效
no-cache:需要使用協商緩存來驗證緩存數據
no-store:所有內容不使用緩存
協商緩存
協商緩存需要判斷是否可以用緩存,瀏覽器第一次請求數據的時候,服務器會將緩存標識與數據一起響應給客戶端,客戶端將他們備份到緩存中,再次請求時,客戶端會將緩存中的標識發送給服務器,服務器根據此標識判斷是否失效,如果沒有失效,服務端返回304狀態碼,瀏覽器拿到此狀態嗎就可以直接使用緩存數據了。對於協商緩存來說,緩存標識很重要,對於理解協商緩存,這是重點。
-
-
問題:相信很多新手前端發佈頁面的時候都會遇到一個問題,就是明明頁面已經更新了,但是瀏覽器瀏覽頁面並沒有變化,那麼如何解決這個問題呢?
事實上,這個問題各種搜索引擎搜索之後會發現有很多的方案,但不一定有效,一般的解決方案有以下的兩種:1:添加時間戳;2:cache-control。
首先第一種,就是在你的所有靜態資源文件後面添加隨機時間戳,例如你的頁面裏面用到了test.js,那你修改過test.js在html頁面中的引用就要改成像下面這個樣子
<script type="text/javascript" src="https://resources.test.com/js/test.js?version=56965"></script>
每次修改test.js之後修改version後面的時間戳,這樣瀏覽器就會忽略緩存從服務器請求新的文件,但是,真正這麼做了之後,還是會發現,即使所有修改過的文件在應用的時候都添加了時間戳了,但是頁面緩存還是沒有清除,這又是爲什麼呢?原因很簡單,你只對你修改過的文件添加了時間戳,但是html頁面本身在這個時候已經被修改了,html頁面是所有靜態資源的載體,如果不對它加上時間戳,所有的其他應用都會沿用舊的緩存,所以,這個時候要讓緩存失效,只需要在你的訪問的網址上面再添加一個時間戳,例如:http://www.test.com/index.html?version=123456。但很明顯,這種做法其實很不優雅,例如網站的訪問地址是不能經常變更的,所以這種方法其實使用收到很大程度的限制,接下來是第二種方法,cache-control。
-
<meta name="Cache-Control" content="no-cache"> 並沒什麼用
File協議主要用於訪問本地計算機中的文件,就如同在Windows資源管理器中打開文件一樣,基本的格式如下:file:///文件路徑。
FTP是文件傳輸協議,可以用於互聯網上。例如,你有一個網站,放在某個服務器上,可以通過FTP來訪問服務器上的文件。
SFTP SFTP與 FTP有着幾乎一樣的語法和功能。SFTP爲SSH的一部份,是一種傳輸文件到服務器的安全方式。
HTTP 協議定義服務器端和客戶端之間文件傳輸的溝通方式。
URL由以下幾部分組成:協議,服務器主機地址,端口,路徑和參數。
1、協議:常用的有http協議,https(http+ssh)協議。
2、服務器主機地址:可以是域名,也可以是主機名,或IP地址。
3、端口:服務器設定的端口。URL地址裏一般無端口,因爲服務器使用了協議的默認端口,用戶通過url訪問服務器時,可以省略。
4、路徑:訪問的資源在服務器下的相對路徑,是服務器上的一個目錄或者文件地址。
5、參數:查詢搜索的部分,通過問號?連接到路徑後面,有時候也歸類到路徑中。
js中事件委託的優缺點
優點:
- 減少事件註冊,節省內存。比如,
- 在table上代理所有td的click事件。
- 在ul上代理所有li的click事件。
- 簡化了dom節點更新時,相應事件的更新。比如
- 不用在新添加的li上綁定click事件。
- 當刪除某個li時,不用移解綁上面的click事件。
缺點:
- 事件委託基於冒泡,對於不冒泡的事件不支持。
- 層級過多,冒泡過程中,可能會被某層阻止掉。
- 理論上委託會導致瀏覽器頻繁調用處理函數,雖然很可能不需要處理。所以建議就近委託,比如在table上代理td,而不是在document上代理td。
- 把所有事件都用代理就可能會出現事件誤判。比如,在document中代理了所有button的click事件,另外的人在引用改js時,可能不知道,造成單擊button觸發了兩個click事件。