運(yùn)行環(huán)境
--瀏覽器可以通過訪問鏈接來得到頁面的內(nèi)容梆惯；（上線的代碼產(chǎn)生的內(nèi)容）
--瀏覽器通過繪制和渲染，顯示出頁面的最終的樣子；
--整個過程中，我們需要考慮什么問題？（瀏覽器內(nèi)核情況）
1.頁面加載過程
1.1.從輸入url到得到html的詳細(xì)過程
1.瀏覽器根據(jù)DNS服務(wù)器（解析出）得到域名的IP地址
2.向這個IP的機(jī)器發(fā)送http請求
3.服務(wù)器收到、處理并返回http請求
4.瀏覽器得到返回內(nèi)容
1.2.window.onload 和 DOMContentLoaded 的區(qū)別
都是頁面加載之后要觸發(fā)什么事件；
window.addEventListener('load',function(){
//頁面的全部資源加載完才會執(zhí)行扬蕊，包括圖片、視頻等
});
document.addEventListener('DOMContentLoaded',function(){
//DOM 渲染完即可執(zhí)行丹擎，此時圖片尾抑、視頻還可能沒有加載完
});
2.1.加載資源的形式
1.-輸入url（或跳轉(zhuǎn)頁面）加載html
http://coding.m.imooc.com
2.-加載html中的靜態(tài)資源
<script src="/static/js/jquery.js"></script>
2.2.加載一個資源的過程
都符合1.瀏覽器根據(jù)DNS服務(wù)器（解析出）得到域名的IP地址
2.向這個IP的機(jī)器發(fā)送http請求
3.服務(wù)器收到、處理并返回http請求
4.瀏覽器得到返回內(nèi)容
2.3.瀏覽器渲染頁面的過程
1.根據(jù)HTML結(jié)構(gòu)生成DOM Tree（只有結(jié)構(gòu)）
2.根據(jù)css生成CSSOM（樣式）
3.將DOM 和 CSSOM 整合形成RenderTree（渲染樹）
4.根據(jù)RenderTree 開始渲染和展示
5.遇到<script>時鸥鹉，會執(zhí)行并阻塞渲染
（瀏覽器渲染一個DOM樹蛮穿，script中js有權(quán)利改變DOM結(jié)構(gòu)和內(nèi)容，我們不得不讓瀏覽器
去做出一個妥協(xié)性的讓步毁渗，js在加載執(zhí)行中践磅，渲染先結(jié)束先阻塞先不要管它）
*頁面加載--幾種示例
1.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>test</p>
</body>
</html>
2.div{
width:100%;
height:100px;
font-size:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="styleSheet" type="text/css" href="test.css">
</head>
<body>
<div>test</div>
</body>
</html>
3. document.getElementById('container').innerHTML == 'update by js';
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">default</div>
<script src="index.js"></script>
<p>test</p>
</body>
</html>
*首先你輸入url（或跳轉(zhuǎn)頁面）把html代碼加載出來，瀏覽器要解析灸异，到body里面
開始渲染了府适，body里第一行渲染出一個div內(nèi)容是default羔飞，到body里第二行發(fā)現(xiàn)一
個script，停下來加載script檐春，（第三行代碼就一直等著）加載完并執(zhí)行完之后逻淌，最后
一行才正式渲染出來。
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>test</p>
<p></p>
<p>test</p>
</body>
</html>
加載完html結(jié)構(gòu)之后就開始渲染疟暖，body中第一行圖片是異步請求的卡儒，比如這個test.png
很大，請求的很慢俐巴，這個時候并不會阻礙整個dom樹的一個渲染骨望，渲染body第一行ok結(jié)束
，渲染第二行結(jié)束欣舵，img標(biāo)簽已經(jīng)有了擎鸠，只不過圖片還沒有加載出來而已，這個img標(biāo)簽
已經(jīng)可以用了缘圈，這個時候圖片是異步加載劣光，我們在渲染第三行。
1.為什么要把css放在head中糟把？
加載css之后绢涡，瀏覽器直接知道規(guī)則，在渲染下面的DOM結(jié)構(gòu)的時候就會把這些結(jié)構(gòu)考慮
進(jìn)去去渲染糊饱；（css一定要在body里面的東西出來之前就加載完垂寥，而且這個規(guī)則要告訴
瀏覽器，加載完之后瀏覽器就自己知道了另锋，然后再body渲染的時候，一次就把這個事干好）
2.為什么要把js放在body最下面狭归？
1.不會阻塞之前的body內(nèi)容夭坪，因?yàn)閮?nèi)容（沒有script執(zhí)行，先把html結(jié)構(gòu)基本的一些
標(biāo)簽渲染出來过椎，最后在執(zhí)行script室梅，這個時候就不會阻塞了，能讓頁面更快的出來疚宇，
這是性能的問題）已經(jīng)渲染亡鼠；
2.把script放在最后能拿到所有的標(biāo)簽
2.性能優(yōu)化（本身是一個綜合性的問題）
原則：
1.多實(shí)用內(nèi)存（內(nèi)存的存儲）、緩存或者其他方法
2.減少CPU計(jì)算敷待、減少網(wǎng)絡(luò)請求
從哪里入手：
1.加載頁面和靜態(tài)資源
--靜態(tài)資源的壓縮合并间涵；
--靜態(tài)資源緩存；（本地有緩存就沒有必要在請求一次）
--使用CDN讓資源加載更快（CDN是一個不同區(qū)域的網(wǎng)絡(luò)優(yōu)化榜揖，如果我在北京訪問一個
地址的時候勾哩，同樣的一個地址CDN會給我轉(zhuǎn)到北京就近的一個機(jī)房中加載下來抗蠢；如果
沒有CDN，你的服務(wù)器就在杭州思劳，我從任何一個地方的請求都需要走杭州的一個機(jī)房迅矛，
距離比較遠(yuǎn)，經(jīng)過的路由器就比較多潜叛，也就比較慢一些）
--使用SSR（server side rander 服務(wù)端渲染）后端渲染秽褒，數(shù)據(jù)直接輸出到HTML中
2.頁面渲染（渲染優(yōu)化）
--css放前面，js放后面
--懶加載（圖片懶加載威兜、下拉加載更多）销斟；
圖片先不加載，什么時候用什么加載牡属；
--減少DOM查詢票堵，對DOM查詢做緩存；
--減少DOM操作逮栅，多個操作盡量合并在一起執(zhí)行悴势；
--事件節(jié)流（很頻繁的操作合到一個操作）；
--盡早執(zhí)行操作（如 DOMContentLoaded）
DOM渲染完就立即執(zhí)行措伐，不管前端資源像圖片有沒有加載完
性能優(yōu)化--幾個示例：
1.--資源合并
<scirpt src="a.js"></script>
<scirpt src="b.js"></script>
<scirpt src="c.js"></script>
代碼合并成（構(gòu)建工具來合并）：
<script src="abc.js"></script>
2.--緩存
1.通過連接名稱控制緩存
<script src="abc_1.js"></script>
2.只有內(nèi)容改變的時候特纤，鏈接名稱才會改變
<script src="abc_2.js"></script>
3.--使用CDN (比在服務(wù)器上做zepto連接要快很多)
<link rel="styleSheet">
<script src="https://cdn.bootcss.com/zepto/10rc1/zepto.min.js"></script>
4.--使用SSR后端渲染
（好處：把數(shù)據(jù)直接輸出到html中，瀏覽器能直接拿到侥加，直接渲染捧存，沒必要ajax把數(shù)據(jù)在獲取一遍）
1.現(xiàn)在Vue React（這兩個默認(rèn)沒有后端渲染的） 提出了這樣的概念：
先把模板拿下來之后通過ajax獲取數(shù)據(jù)
2.jsp php asp都屬于后端渲染（動態(tài)頁面--我們的數(shù)據(jù)可以直接輸出到瀏覽器，不用再通過ajax獲鹊０堋）
**5.--懶加載 **
<script type="text/javascript">
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('date-realsrc');
</script>
一開始的圖片是顯示很小的圖昔穴，很快就加載出來，但這個圖片真正用的時候在把這個真正的圖片賦值過來讓它顯示就行提前；
加快頁面渲染速度吗货；
6.--緩存DOM查詢
//未緩存DOM查詢（每次循環(huán)都需要執(zhí)行DOm查詢）
//執(zhí)行每一次循環(huán)，document.getElementsByTagName('p')都要做一次查詢
var i;
for(i=0;i<document.getElementsByTagName('p').length;i++){
//todo
};
//緩存了DOM查詢（一次DOM查詢把東西存到一個變量中狈网，下次循環(huán)就沒有必要在挨個做DOM查詢了宙搬，
只是獲取這個變量的屬性就可以了）
//直接把東西查詢出來緩存到pList中，就查詢一次拓哺，下面在執(zhí)行10遍循環(huán)的時候
勇垛，就不會在去執(zhí)行查詢了，只需從緩存的pList去取就行了士鸥，這就快了闲孤。
var pList = document.getElementsByTagName('p');
var i ;
for(i=0;i<pList.length;i++){
//todo
}
7.--合并DOM插入(本來有10次dom查詢，現(xiàn)在只剩一次了)
var listNode = document.getElementById('list');
//要插入10個li標(biāo)簽
(定義一個臨時片段础淤，10次循環(huán)只用對片段中去加崭放，不會觸發(fā)DOM操作)
var frag = document.createDocumentFragment();
var x,li;
for(x=0;x<10;x++){
//定義一個片段哨苛，10個li依次插入片段中
li = document.createElement("li");
li.innerHTML = "List item"+x;
frag.appendChild(li);
}
//把片段插入listNode
listNode.appendChild(frag);
8.--事件節(jié)流（性能優(yōu)化的原則，減少cpu的計(jì)算
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup',function(){
//每次看看timeoutId有沒有币砂，有了就先清掉
if(timeoutId){
clearTimeout(timeoutId);
}
//當(dāng)輸入完停下來這個時候觸發(fā)change事件建峭；
//重新賦值timeoutId，設(shè)個100毫秒的延遲决摧；如果一旦停大于100毫秒以上就觸發(fā)change事件亿蒸；
timeoutId = setTimeout(function(){
//觸發(fā)change事件
},100);
});
9.--盡早執(zhí)行操作
window.addEventListener('load',function(){
//頁面的全部資源加載完才會執(zhí)行，包括圖片掌桩、視頻等
});
document.addEventListener('DOMContentLoaded',function(){
//DOM 渲染完即可執(zhí)行边锁，此時圖片、視頻還可能沒有加載完
});
3.安全性
1.--場景的前端安全問題有哪些波岛？
1.1.XSS跨站請求攻擊
eg:1.新浪博客寫一篇文章茅坛，同時偷偷插入一段<script>
（一旦看這篇文章，代碼就會執(zhí)行则拷；獲取cookie贡蓖，發(fā)送自己的服務(wù)器，多少人看了這篇文章煌茬，就能獲取多少用戶信息）
----攻擊代碼中斥铺，獲取cookie，發(fā)送自己的服務(wù)器坛善；
----發(fā)布博客晾蜘，有人查看博客內(nèi)容；
----會把查看著的cookie發(fā)送到攻擊者的服務(wù)器眠屎；
*怎么預(yù)防：
--前端替換關(guān)鍵字剔交，例如替換 < 為 < > w為 >（會影響性能，js執(zhí)行效率比較低改衩，前端只有瀏覽器）
--后端替換（依賴于服務(wù)器的能力）
1.2.XSRF跨站請求偽造
eg:你已登錄一個購物網(wǎng)站省容，正在瀏覽商品
----該網(wǎng)站付費(fèi)接口是 xxx.com/pay?id=100 但是沒有任何驗(yàn)證；
----然后你收到一封郵件,隱藏這<img src=xxx.com/pay?id=100>;
----你查看郵件的時候燎字，就已經(jīng)悄悄的付費(fèi)購買了。
*解決方案：
--1.增加驗(yàn)證流程阿宅，如輸入指紋候衍、密碼、短信驗(yàn)證碼（后端來做驗(yàn)證洒放，前端配合）
****************面試技巧****************
1.簡歷
1.1簡潔明了蛉鹿，重點(diǎn)突出項(xiàng)目經(jīng)歷和解決方案；
（項(xiàng)目經(jīng)歷：做過什么東西要寫明白往湿，可以通過你做的東西了解到你妖异，這個項(xiàng)目真實(shí)的技術(shù)等級惋戏、技術(shù)復(fù)雜度）
（解決方案：在項(xiàng)目中做了什么貢獻(xiàn)，遇到什么樣的問題他膳，用什么解決的(用的什么框架來做响逢，技術(shù)棧、解決方案)）
1.2.把個人博客放在簡歷中棕孙，并且定期維護(hù)更新博客
1.3.把個人的開源項(xiàng)目放在簡歷中舔亭，并維護(hù)開源項(xiàng)目
1.4.簡歷千萬不要造假，要保持能力和經(jīng)歷上的真實(shí)性
2.面試過程中蟀俊。钦铺。。
2.1.如何看待加班肢预？加班就像借錢矛洞，救急不救窮
（加班作為常態(tài)那就不行了，加班會很累烫映，壓力會比較大沼本，睡不好；
根本沒有業(yè)余時間去提高自己的能力）
2.2.千萬不要挑戰(zhàn)面試官窑邦，不要反考面試官
2.3.學(xué)會給面試官驚喜擅威，但不要太多
2.4.遇到不會回答的問題，說出你知道的也可以
比如：性能優(yōu)化 知道多少說出來多少
2.5.談?wù)勀愕娜秉c(diǎn)——————說一下你最近正在學(xué)什么就可以了
比如：最近在學(xué)react
可能對react還不是很了解冈钦，現(xiàn)在正在學(xué)郊丛，大約一個月之后就能做出來一個react網(wǎng)站；