HTML+CSS部分:

1话肖、什么是盒子模型？
答:在網(wǎng)頁中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成蜓肆，其中
包括元素的內(nèi)容（content）颜凯，元素的內(nèi)邊距（padding），元素的邊框（border）症杏，元素的外邊距（margin）四個(gè)部分
這四個(gè)部分占有的空間中装获，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域厉颤。
4個(gè)部分一起構(gòu)成了css中元素的盒模型穴豫。

2.行內(nèi)元素有哪些？塊級(jí)元素有哪些逼友？ 空(void)元素有那些精肃？
答:行內(nèi)元素：a、b帜乞、span司抱、img、input黎烈、strong习柠、select、label照棋、em资溃、button、textarea
   塊級(jí)元素：div烈炭、ul溶锭、li、dl符隙、dt趴捅、dd、p霹疫、h1-h6拱绑、blockquote
   空元素：即系沒有內(nèi)容的HTML元素，例如：br更米、meta欺栗、hr、link征峦、input、img

3.利用CSS實(shí)現(xiàn)一個(gè)div盒子相對(duì)瀏覽器垂直方向居中?
css------ <style>
            div{
            width: 200px;
            height: 200px;
            background-color: orangered;
            margin: auto auto;
             }
        </style>
html:---- <div></div>

4.利用CSS實(shí)現(xiàn)一個(gè)div盒子相對(duì)瀏覽器垂直水平居中?
html:---- <div></div>
css: ---- <style>
    div{
        width: 200px;
        height: 200px;
        background-color: orangered;
        position: absolute;
        top: 50%;
        left: 50%;
        margin:-100px 0 0 -100px;
    }
</style>

5.常見瀏覽器的內(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ā))

6.display:none與visibility:hidden的區(qū)別?
前者：隱藏不占位  后者：隱藏但是占位置

7.HTML5新增了哪些標(biāo)簽?
答:HTML5中新增了32個(gè)標(biāo)簽,廢棄了16個(gè)標(biāo)簽
1.語義化標(biāo)簽
  header section footer article nav
2.媒介標(biāo)簽
  video audio
3.表單控件標(biāo)簽
  calendar date time email url search
4.繪圖標(biāo)簽
  canvas

8.當(dāng)兩個(gè)盒子在垂直方向上設(shè)置margin值時(shí)，會(huì)出現(xiàn)塌陷現(xiàn)象,如何解決?
答:解決方案:
    1.給父盒子添加border
    2.給父盒子添加padding-top
    3.給父盒子添加overflow:hidden
    4.父盒子:position:fixed
    5.父盒子:display:table
    6.給子元素的前面添加一個(gè)兄弟元素
      屬性為:content:"";
      overflow:hidden;

9.說說BFC原理?
答:小編:BFC就是頁面上的一個(gè)隔離的獨(dú)立容器臊泰，容器里面的子元素不會(huì)影響到外面的元素蛉加。
       因?yàn)锽FC內(nèi)部的元素和外部的元素絕對(duì)不會(huì)互相影響，因此， 當(dāng)BFC外部存在浮動(dòng)時(shí)针饥，
       它不會(huì)影響B(tài)FC內(nèi)部Box的布局厂抽，BFC會(huì)通過變窄，而不與浮動(dòng)有重疊丁眼。
       同樣的筷凤，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局苞七，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度藐守。
       避免margin重疊也是這樣的一個(gè)道理

10. css樣式優(yōu)先級(jí)，各自的權(quán)重?
答:優(yōu)先級(jí)別：
    通用選擇器（*） < 元素(類型)選擇器 < 類選擇器 < 屬性選擇器 < 偽類 < ID 選擇器 < 內(nèi)聯(lián)樣式
  權(quán)重：
    1）內(nèi)聯(lián)樣式表的權(quán)值最高 1000蹂风；
    2）選擇器的權(quán)值為 100
    3）Class 類選擇器的權(quán)值為 10(屬性和偽類屬于class類)
    4）HTML 標(biāo)簽選擇器的權(quán)值為 1(偽元素屬于標(biāo)簽)

11.px和em的區(qū)別?
答:相同點(diǎn)：px和em都是長(zhǎng)度單位卢厂；
   異同點(diǎn)：px的值是固定的，指定是多少就是多少惠啄，計(jì)算比較容易慎恒。em得值不是固定的，并且em會(huì)繼承父級(jí)元素的字體大小撵渡。
   瀏覽器的默認(rèn)字體高都是16px融柬。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em姥闭。

13.簡(jiǎn)單的解釋下彈性盒模型的屬性和屬性值（至少寫出6個(gè)屬性）
答: display:flex;
    flex-direction:
    justify-content:
    align-items:
    align-self:
    align-content:
    flex-wrap:

14.談?wù)劃u進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的理解?
答:漸進(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)行兼容.

15.試著寫出HTML5新增的標(biāo)簽(16個(gè))
答:header nav footer article main aside section figure datalist video audio fieldest  legend  label caption canvas

16.網(wǎng)頁分成三個(gè)層次分別是什么?
答:①結(jié)構(gòu)層：由HTML或XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建铜跑，對(duì)網(wǎng)頁內(nèi)容的語義含義進(jìn)行描述门怪。
   ②表示層：由CSS負(fù)責(zé)創(chuàng)建，對(duì)“如何顯示有關(guān)內(nèi)容”的問題作出了解答锅纺。
   ③行為層：javascript語言和DOM主宰的領(lǐng)域掷空，負(fù)責(zé)回答“內(nèi)容應(yīng)如何對(duì)事件作出反應(yīng)”。

17.談?wù)勀銓?duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)囤锉？
答:（1）WEB標(biāo)準(zhǔn)
    什么是WEB標(biāo)準(zhǔn)：一系列標(biāo)準(zhǔn)的集合坦弟，包括結(jié)構(gòu)化標(biāo)準(zhǔn)語言（html等）、表現(xiàn)標(biāo)準(zhǔn)語言（css）官地、行為標(biāo)準(zhǔn)語言（ECMAScript等）
    這些標(biāo)準(zhǔn)大部分是由萬維網(wǎng)聯(lián)盟起草和發(fā)布酿傍。
    為什么使用web標(biāo)準(zhǔn)?
    為了解決因?yàn)g覽器版本不同、軟硬件設(shè)備不同導(dǎo)致的需多版本開發(fā)的問題驱入。
   （2）W3C（World WideWeb Consortium）
    萬維網(wǎng)聯(lián)盟赤炒，是一個(gè)web開發(fā)的國(guó)際性聯(lián)盟氯析，是Web技術(shù)領(lǐng)域最權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。

18.談?wù)勀銓?duì)canvas的理解莺褒？
答: HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像掩缓。畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素遵岩。
    Canvas擁有多種繪制路徑你辣、矩形、圓形旷余、字符以及添加圖像的方法绢记。canvas可以完成動(dòng)畫、游戲正卧、圖標(biāo)
    圖像處理等原來需要Flash完成的一些功能蠢熄。

19.img標(biāo)簽的title和alt有什么區(qū)別？
答:alt用于圖片無法加載時(shí)顯示炉旷，title為該屬性提供信息签孔，通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示.

20.表單提交中g(shù)et和post方式的區(qū)別?
答:（1）get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)窘行。
   （2）get 是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的 ACTION 屬性所指的URL中饥追，
        值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在 URL 中可以看到罐盔。post 是通過 HTTP post 機(jī)制
        將表單內(nèi)各個(gè)字段與其內(nèi)容放置在 HTML HEADER 內(nèi)一起傳送到ACTION 屬性所指的 URL 地址但绕，用戶看不到這個(gè)過程。
   （3）對(duì)于 get 方式惶看，服務(wù)器端用 Request.QueryString 獲取變量的值捏顺，對(duì)于 post 方式，
        服務(wù)器端用 Request.Form 獲取提交的數(shù)據(jù)纬黎。
   （4）get 傳送的數(shù)據(jù)量較小幅骄，不能大于2KB。post傳送的數(shù)據(jù)量較大本今，一般被默認(rèn)為不受限制拆座。
        但理論上，IIS4 中最大量為 80KB冠息，IIS5 中為 100KB 挪凑。
   （5）get 安全性低，post 安全性較高逛艰。

21.HTML5廢棄了哪些HTML4標(biāo)簽岖赋？
答: frame frameset noframe appletbig center basefront...

22.請(qǐng)你說說CSS選擇器的類型有哪些，并舉幾個(gè)例子說明其用法瓮孙？
答:CSS選擇器有以下：
    1.元素選擇器（又稱為類型選擇器）

    html{color:black;}

    h1{color:blue;}

    h2{color:silver;}

    2.類選擇器

    <h1class="important">

    Thisheading is very important.

    </h1>

    3.ID選擇器

    <pid="intro">This is a paragraph of introduction.</p>

    4.屬性選擇器

    a[href]{color:red;}

    5.后代選擇器（又稱為包含選擇器）

    h1em {color:red;}

    6.子元素選擇器

    h1> strong {color:red;}

    7.相鄰兄弟選擇器

    h1+ p {margin-top:50px;}

23.談?wù)凜SS中l(wèi)ink和@import的區(qū)別是唐断？
答:(1）link屬于HTML標(biāo)簽，而@import是CSS提供的杭抠；
 （2）頁面被加載時(shí)脸甘，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載偏灿；
 （3）import只在IE5以上才能識(shí)別丹诀，而link是HTML標(biāo)簽，無兼容問題翁垂；
 （4）link方式的樣式權(quán)重高于@import的權(quán)重铆遭。

24.談?wù)勀銓?duì)對(duì)HTML語義化的理解？
答:1.什么是HTML語義化沿猜？
    基本都是圍繞著幾個(gè)主要的標(biāo)簽枚荣，像標(biāo)題（H1~H6）、列表（li）啼肩、強(qiáng)調(diào)（strong em）等等）
    根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化）橄妆，選擇合適的標(biāo)簽（代碼語義化）
    便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。
   2.為什么要語義化祈坠？
    為了在沒有CSS的情況下害碾，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)赦拘；
    用戶體驗(yàn)：例如title慌随、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用躺同；
   有利于SEO：和搜索引擎建立良好溝通阁猜，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
   方便其他設(shè)備解析（如屏幕閱讀器笋籽、盲人閱讀器蹦漠、移動(dòng)設(shè)備）以意義的方法來渲染頁面；
   便于團(tuán)隊(duì)開發(fā)和維護(hù)车海，語義化更具可讀性笛园，是下一步頁面的重要?jiǎng)酉颍裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都要遵循這個(gè)標(biāo)準(zhǔn)侍芝，可以減少差異化研铆。
  3.語義化標(biāo)簽
    <header>頭部</header>
    <nav>導(dǎo)航</nav>
    <article>
     <section></section>
     <article>
    <footer>尾部</footer>

 25.display有哪些值？說明它們的作用?
 答:block 塊類型州叠。默認(rèn)寬度為父元素寬度棵红，可設(shè)置寬高，換行顯示咧栗。
    none 缺省值逆甜。像行內(nèi)元素類型一樣顯示虱肄。
    inline 行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度交煞，不可設(shè)置寬高咏窿，同行顯示。
    inline-block 默認(rèn)寬度為內(nèi)容寬度素征，可以設(shè)置寬高集嵌，同行顯示。
    list-item 像塊類型元素一樣顯示御毅，并添加樣式列表標(biāo)記根欧。
    table 此元素會(huì)作為塊級(jí)表格來顯示。
    inherit 規(guī)定應(yīng)該從父元素繼承display屬性的值端蛆。

 26.CSS3新特性有哪些?
 答:1凤粗、顏色：新增RGBA、HSLA模式
    2欺税、文字陰影(text-shadow)
    3侈沪、邊框：圓角（border-radius）邊框陰影：box-shadow
    4、盒子模型：box-sizing
    5晚凿、背景：background-size設(shè)置背景圖片的尺寸亭罪，background-origin設(shè)置背景圖片的原點(diǎn)，background-clip設(shè)置背景圖片的裁剪區(qū)           域歼秽，以“应役，”分隔可以設(shè)置多背景，用于自適應(yīng)布局
    6燥筷、漸變：linear-gradient箩祥、radial-gradient
    7、過渡：transition可實(shí)現(xiàn)動(dòng)畫
    8肆氓、自定義動(dòng)畫
    9袍祖、在CSS3中唯一引入的偽元素是::selection
    10、多媒體查詢谢揪、多欄布局
    11蕉陋、border-image
    12、2D轉(zhuǎn)換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
    13拨扶、3D轉(zhuǎn)換

 27.介紹一下標(biāo)準(zhǔn)css的盒子模型凳鬓？低版本IE的盒子模型有什么不同的？
 答:1患民、有兩種：IE盒子模型缩举、W3c盒子模型
    2、盒模型：內(nèi)容(content)、填充(padding)仅孩、邊界(margin)托猩、邊框(border)。
    3杠氢、區(qū)別：IE的content部分把border和padding計(jì)算了進(jìn)去

 28.什么是響應(yīng)式設(shè)計(jì)站刑？
 答:關(guān)于網(wǎng)頁制作的過程中讓不同的設(shè)備有不同的尺寸和不同的功能
 響應(yīng)式設(shè)計(jì)是讓所有的人能在這些設(shè)備上讓網(wǎng)站正常運(yùn)行

 29.關(guān)于 HTTP 協(xié)議，下面哪個(gè)說法是正確的鼻百？
    A．HTTP 協(xié)議是有狀態(tài)協(xié)議。
    B．以下是一個(gè) Http 鏈接的 response 的響應(yīng)頭： GET /xxx/xxx/js/lib/test.js HTTP/1.1 Host:
    127.0.0.1 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */*
    C．RESTful 接口中摆尝， 利用 HTTP 協(xié)議的 method 字段來描述要對(duì)資源操作的方式温艇， 比如 GET
    表示獲取資源， POST 表示新增一個(gè)資源堕汞， PUT 表示更新資源 ,DELETE 表示刪除資源等等勺爱。
    D．一個(gè) HTTP 請(qǐng)求返回的 HTTP 狀態(tài)碼中， 304 表示臨時(shí)重定向讯检。

 答案:C (A 錯(cuò)誤琐鲁， http 是無狀態(tài)的 B 錯(cuò)誤，后面的是 request 頭
    C 正確人灼，GET 表示獲取資源围段， POST 表示新增一個(gè)資源， PUT 表示更新資源 ,DELETE
    表示刪除資源等等
    D 錯(cuò)誤投放，狀態(tài)碼 304 表示：如果客戶端發(fā)送了一個(gè)帶條件的 GET 請(qǐng)求且該請(qǐng)求已
    被允許奈泪，而文檔的內(nèi)容（自上次訪問以來或者根據(jù)請(qǐng)求的條件）并沒有改變，則服務(wù)器
    應(yīng)當(dāng)返回這個(gè)狀態(tài)碼灸芳。 307 表示臨時(shí)重定向＠晕Α！烙样！ )

 30. 使用 CSS 的 flexbox 布局冯遂，不能實(shí)現(xiàn)以下哪一個(gè)效果?
    A．三列布局，隨容器寬度等寬彈性伸縮
    B．多列布局谒获，每列的高度按內(nèi)容最高的一列等高
    C．三列布局蛤肌，左列寬度像素?cái)?shù)確定，中究反、右列隨容器寬度等寬彈性伸縮
    D．多個(gè)寬高不等的元素寻定，實(shí)現(xiàn)無縫瀑布流布局

  答案:D

  31. margin坍塌?
  答：當(dāng)兩個(gè)盒子在垂直方向上設(shè)置margin值時(shí)，會(huì)出現(xiàn)塌陷現(xiàn)象
    1.給父盒子添加border
    2.給父盒子添加padding-top
    3.給父盒子添加overflow:hidden
    4.父盒子:position:fixed
    5.父盒子:display:table
    6.給子元素的前面添加一個(gè)兄弟元素
      屬性為:content:"";
      overflow:hidden;

  32.html與xhtml的區(qū)別:
  答:1精耐、HTML允許文檔中的標(biāo)簽大寫或小寫狼速，但XHTML中的標(biāo)簽必須全部小寫
     2、HTML中允許一寫結(jié)束標(biāo)間省略卦停，比如</li>或</p>,當(dāng)標(biāo)簽被省略時(shí)向胡，瀏覽器加載他們時(shí)恼蓬，會(huì)自己填補(bǔ)
     3、在XHTML中僵芹，所有的標(biāo)簽必須有閉合標(biāo)簽处硬，比如圖片標(biāo)簽以及換行標(biāo)簽都必須閉合，
      圖片：<img /> 換行<br />,為了與早期的瀏覽器保持兼容拇派，反斜杠的前面應(yīng)該加一個(gè)空格荷辕。
     4.聲明方式不同
     html <!DOCTYPE html>
     xhtml:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">聲明嚴(yán)格

JavaScript部分:
1.什么是JavaScript？
答:JavaScript是客戶端和服務(wù)器端腳本語言件豌，可以插入到HTML頁面中疮方，并且是目前較熱門的Web開發(fā)語言。
同時(shí)茧彤，JavaScript也是面向?qū)ο缶幊陶Z言.

2.列舉Java和JavaScript之間的區(qū)別骡显？
答:Java是一門十分完整、成熟的編程語言曾掂。相比之下惫谤，JavaScript是一個(gè)可以被引入HTML頁面的編程語言。這兩種語言并不完全相互依賴珠洗， 而是針對(duì)不同的意圖而設(shè)計(jì)的溜歪。 Java是一種面向?qū)ο缶幊蹋∣OPS）或結(jié)構(gòu)化編程語言，類似的如C ++或C险污，而JavaScript是客戶端腳本 語言,被稱為非結(jié)構(gòu)化編程.

3.介紹一下 JS 的基本數(shù)據(jù)類型痹愚？
答:5種基本類型: Undefined、Null蛔糯、Boolean拯腮、Number、String

4. 介紹一下 JS 有哪些內(nèi)置對(duì)象蚁飒？
   答:Object 是 JavaScript 中所有對(duì)象的父對(duì)象;
   數(shù)據(jù)封裝類對(duì)象：Object动壤、Array、Boolean淮逻、Number毕箍、String
   其他對(duì)象：Function欠母、Argument纷责、Math边器、Date、RegExp筛严、Error

5.null 和 undefined 有何區(qū)別醉旦？
答:(1) null 表示一個(gè)對(duì)象被定義了，值為“空值”； undefined 表示不存在這個(gè)值车胡。
typeof undefined //"undefined"
(2) undefined :是一個(gè)表示"無"的原始值或者說表示"缺少值"檬输，就是此處應(yīng)該有一個(gè)值，
但是還沒有定義匈棘。當(dāng)嘗試讀取時(shí)會(huì)返回,undefined丧慈； 例如變量被聲明了，但沒有賦值時(shí)主卫，就等于undefined逃默。
typeof null //"object" null : 是一個(gè)對(duì)象(空對(duì)象, 沒有任何屬性和方法)；
(3)注意:在驗(yàn)證null時(shí)队秩，一定要使用 === 笑旺，因?yàn)?== 無法分別 null 和 undefined
console.log(null === undefined);//false
console.log(null == undefined);//true

6.判斷數(shù)據(jù)類型有哪些方法？
答:1.typeof:
typeof 是一個(gè)操作符,其右側(cè)跟一個(gè)一元表達(dá)式,并返回這個(gè)表達(dá)式的數(shù)據(jù)類型.
返回的結(jié)果用該類型的字符串(全小寫字母)形式表示,包括以下 7 種：
number馍资、boolean、symbol关噪、string鸟蟹、object、undefined使兔、function等.

2.instanceof:
instanceof 是用來判斷 A 是否為 B 的實(shí)例建钥，表達(dá)式為：A instanceof B
如果 A 是 B 的實(shí)例，則返回 true,否則返回 false.
在這里需要特別注意的是：instanceof 檢測(cè)的是原型

3.constructor:
當(dāng)一個(gè)函數(shù) F被定義時(shí)虐沥，JS引擎會(huì)為F添加 prototype 原型
然后再在 prototype上添加一個(gè) constructor 屬性熊经，并讓其指向 F 的引用.

4.toString:
toString() 是 Object 的原型方法，調(diào)用該方法欲险，默認(rèn)返回當(dāng)前對(duì)象的 [[Class]]點(diǎn)擊并拖拽以移動(dòng).
這是一個(gè)內(nèi)部屬性镐依，其格式為 [object Xxx] ，其中 Xxx 就是對(duì)象的類型天试。對(duì)于 Object 對(duì)象
直接調(diào)用 toString() 就能返回 [object Object] 槐壳。而對(duì)于其他對(duì)象
則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。

7. JS中的== 與 ===的區(qū)別?
   答: ===叫做嚴(yán)格運(yùn)算符喜每，==叫做相等運(yùn)算符务唐。
   一.對(duì)于string,number等基礎(chǔ)類型，==和===是有區(qū)別的
   1）不同類型間比較带兜，==之比較“轉(zhuǎn)化成同一類型后的值”看“值”是否相等枫笛，===如果類型不同，其結(jié)果就是不等
   2）同類型比較刚照，直接進(jìn)行“值”比較刑巧，兩者結(jié)果一樣

   二、對(duì)于Array,Object等高級(jí)類型，==和===是沒有區(qū)別的
   當(dāng)一個(gè)變量定義為Arrary和一個(gè)變量定義為Object類型時(shí)海诲，但是其值相同時(shí)繁莹，==和===比較的結(jié)果是相同的
   因?yàn)樗沁M(jìn)行"指針地址"比較

   三、基礎(chǔ)類型與高級(jí)類型特幔，==和===是有區(qū)別的
   1）對(duì)于==咨演，將高級(jí)轉(zhuǎn)化為基礎(chǔ)類型，進(jìn)行“值”比較
   2）因?yàn)轭愋筒煌?==結(jié)果為false

   簡(jiǎn)單來說:"=="僅檢查值相等蚯斯，而"==="是一個(gè)更嚴(yán)格的等式判定薄风，如果兩個(gè)變量的值或類型不同，則返回false拍嵌。

8.什么是未聲明和未定義的變量遭赂？
答:未聲明的變量:是程序中不存在且未聲明的變量。如果程序嘗試讀取未聲明變量的值横辆，則會(huì)遇到運(yùn)行時(shí)錯(cuò)誤.
未定義的變量:是在程序中聲明但尚未給出任何值的變量撇他。如果程序嘗試讀取未定義變量的值，則返回未定義的值.

9.JavaScript中的循環(huán)結(jié)構(gòu)都有什么狈蚤？
答:For困肩、While、do-while loops

10.3 + 2 +"10"的結(jié)果是什么脆侮？
答:由于3和2是整數(shù)锌畸，它們將直接相加。由于7是一個(gè)字符串靖避，它將會(huì)被直接連接潭枣，所以結(jié)果將是510.
console.log(3 + 2 + "10");//510
console.log(typeof(3 + 2 + "10"));//string

11.JavaScript中有哪些類型的彈出框？
答:alert幻捏、confirm and盆犁、prompt

12.JavaScript中的break和continue語句的作用？
答:break語句從當(dāng)前循環(huán)中退出.
continue語句繼續(xù)下一個(gè)循環(huán)語句.

13.call（）和.apply（）之間有什么區(qū)別粘咖？
答:函數(shù).call（）和.apply（）在使用上非常相似蚣抗，只是有一點(diǎn)區(qū)別.
當(dāng)程序員知道函數(shù)參數(shù)的編號(hào)時(shí),使用.call（），因?yàn)樗鼈儽仨氃谡{(diào)用語句中被提及為參數(shù).
另一方面瓮下，當(dāng)不知道數(shù)字時(shí)使用.apply（）,函數(shù).apply（）期望參數(shù)為數(shù)組.
.call（）和.apply（）之間的基本區(qū)別在于將參數(shù)傳遞給函數(shù)翰铡。
它們的用法可以通過給定的例子進(jìn)行說明:
<script>
var someObject = {
myProperty:'Foo',
myMethod:function (prefix,posfix) {
alert(prefix + this.myProperty + posfix);
}
};
someObject.myMethod('<','>');//Foo

var someOtherObject = {
myProperty:'Bar'
};
someObject.myMethod.call(someOtherObject,'<','>');//Bar
someObject.myMethod.apply(someOtherObject,['<','>']);//Bar
</script>

14.push()-pop()-shift()-unshift()分別是什么功能？
答: // push 方法
// 將新元素添加到一個(gè)數(shù)組中讽坏，并返回?cái)?shù)組的新長(zhǎng)度值锭魔。
var a=[1,2,3,4];
a.push(5);

// pop 方法
// 移除數(shù)組中的最后一個(gè)元素并返回該元素。
var a=[1,2,3,4];
a.pop();

// shift 方法
// 移除數(shù)組中的第一個(gè)元素并返回該元素路呜。
var a=[1,2];
a.shift();

// unshift 方法
// 將指定的元素插入數(shù)組開始位置并返回該數(shù)組迷捧。
var a=[1,2];
a.unshift(0);

總結(jié):push()尾部添加 pop()尾部刪除 unshift()頭部添加 shift()頭部刪除

15.例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?
答:強(qiáng)制（parseInt,parseFloat,number）
隱式（== ===）

16.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫法?
答:var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

17.事件委托是什么?
答:利用事件冒泡的原理织咧，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行漠秋！

18.閉包是什么笙蒙，有什么特性，對(duì)頁面有什么影響?
答:閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
特性:使得函數(shù)不被GC回收
影響:如果過多使用閉包庆锦，容易導(dǎo)致內(nèi)存泄露

19.如何阻止事件冒泡?
答:IE:阻止冒泡ev.cancelBubble = true;
非IE ev.stopPropagation();

20. document.onload 和document ready的區(qū)別?
    答:document.onload 是在結(jié)構(gòu)和樣式,外部js以及圖片加載完才執(zhí)行js
    document.ready是dom樹創(chuàng)建完成就執(zhí)行的方法捅位，原生種沒有這個(gè)方法
    jquery中有 $().ready(function)

21.解釋jsonp的原理，以及為什么不是真正的ajax?
答:jsonp動(dòng)態(tài)創(chuàng)建script標(biāo)簽搂抒，回調(diào)函數(shù)
Ajax是頁面無刷新請(qǐng)求數(shù)據(jù)操作

22."=="和"==="的不同?
答:==會(huì)自動(dòng)轉(zhuǎn)換類型,再判斷是否相等
===不會(huì)自動(dòng)類型轉(zhuǎn)換艇搀，直接去比較

23.var的變量提升的底層原理是什么?
答:JS引擎的工作方式是:
1) 先解析代碼，獲取所有被聲明的變量求晶；
2)然后在運(yùn)行焰雕。也就是說分為預(yù)處理和執(zhí)行兩個(gè)階段。
變量提升：所有變量的聲明語句都會(huì)被提升到代碼頭部芳杏。但是變量提升只對(duì)var命令聲明的變量有效
如果一個(gè)變量不是用var命令聲明就不會(huì)發(fā)生變量提升矩屁。
js里的function也可看做變量，也存在變量提升情況爵赵。

24.判斷字符串以字母開頭档插，后面可以是數(shù)字，下劃線亚再，字母，長(zhǎng)度為6-20
答:var reg=/^[a-zA-Z]\w{5,19}$/;

25. javaScript的2種變量范圍有什么不同晨抡？
    答:全局變量：當(dāng)前頁面內(nèi)有效
    局部變量：函數(shù)方法內(nèi)有效

26.new操作符具體干了什么氛悬？
答:1)創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象耘柱。
2)屬性和方法被加入到 this 引用的對(duì)象中如捅。
3)新創(chuàng)建的對(duì)象由 this 所引用。

27.js延遲加載的方式有哪些调煎？
答:defer和async镜遣、動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中士袄，加載完畢后callBack）悲关、按需異步載入js

28.寫一個(gè)function，清除字符串前后的空格.（兼容所有瀏覽器）
答:String.prototype.trim= function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}

29. 列舉javaScript的3種主要數(shù)據(jù)類型娄柳，2種復(fù)合數(shù)據(jù)類型和2種特殊數(shù)據(jù)類型.
    答: 主要數(shù)據(jù)類型：string, boolean, number
    復(fù)合數(shù)據(jù)類型：function, object
    特殊類型：undefined寓辱，null

30.解釋什么是json?
答:(1)JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式。
(2)JSON 獨(dú)立于語言和平臺(tái)赤拒，JSON 解析器和 JSON 庫支持許多不同的編程語言秫筏。
(3)JSON的語法表示三種類型值诱鞠，簡(jiǎn)單值(字符串，數(shù)值这敬，布爾值航夺，null),數(shù)組，對(duì)象

31.innerHTML和outerHTML的區(qū)別?
答:innerHTML(元素內(nèi)包含的內(nèi)容）
outerHTML(自己以及元素內(nèi)的內(nèi)容）

32.閉包的好處?
答:(1)希望一個(gè)變量長(zhǎng)期駐扎在內(nèi)存當(dāng)中(不被垃圾回收機(jī)制回收)
(2)避免全局變量的污染
(3)私有成員的存在
(4)安全性提高

33.瀏覽器的滾動(dòng)距離?
答:可視區(qū)域距離頁面頂部的距離
代碼: scrollTop = document.documentElement.scrollTop || document.body.scrollTop

34.以下代碼執(zhí)行結(jié)果?
<script>
var name = 'jack';
function change() {
alert(name);//undefined
var name = 'lily';
alert(name)//lily
}
change();
alert(name);//jack
</script>
原理解釋:undefined是因?yàn)樽兞柯暶魈崆?/p>

35.程序中捕獲異常的方法崔涂？
答: try{
代碼...
}catch(e){
代碼...
}finally{
代碼...
}

36.希望獲取到頁面中所有的checkbox怎么做阳掐？(不使用第三方框架)
答:var inputs = document.getElementsByTagName("input");//獲取所有的input標(biāo)簽對(duì)象
var checkboxArray = [];//初始化空數(shù)組，用來存放checkbox對(duì)象堪伍。
for(var i=0;i<inputs.length;i++){
var obj = inputs[i];
if(obj.type=='checkbox'){
checkboxArray.push(obj);
}
}

37.回答以下代碼锚烦，alert的值分別是多少？
<script>
var a = 666;
function test(){
alert(a);
a = 6; //去掉了var 就變成定義了全局變量了
alert(a);
}
test();
alert(a);
</script>
//正確答案是： 666帝雇， 6涮俄， 6

38.看下面代碼，給出輸出結(jié)果?
<script>
for(var i = 1; i <= 5; i++){ //建議使用let 可正常輸出i的值
setTimeout(function(){
console.log(i);// 6 , 6, 6
},0);
};
</script>
//答案：6 6 6尸闸。
//原因：Javascript事件處理器在線程空閑之前不會(huì)運(yùn)行彻亲。

39.添加 刪除 替換 插入到某個(gè)接點(diǎn)的方法?
答: 1）創(chuàng)建新節(jié)點(diǎn)
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2）添加、移除吮廉、替換苞尝、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替換
insertBefore()      //插入

3）查找
getElementsByTagName()    //通過標(biāo)簽名稱
getElementsByName()     //通過元素的Name屬性的值
getElementById()        //通過元素Id，唯一性

40.JS的回收機(jī)制?
答:小編: 垃圾回收機(jī)制是為了以防內(nèi)存泄漏宦芦，(內(nèi)存泄漏: 當(dāng)已經(jīng)不需要某塊內(nèi)存時(shí)這塊內(nèi)存還存在著), 垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量宙址，并釋放掉它們所指向的內(nèi)存。

JS有兩種變量: 全局變量和在函數(shù)中產(chǎn)生的局部變量调卑。局部變量的生命周期在函數(shù)執(zhí)行過后就結(jié)束了
此時(shí)便可將它引用的內(nèi)存釋放（即垃圾回收）抡砂，但全局變量生命周期會(huì)持續(xù)到瀏覽器關(guān)閉頁面。

JS執(zhí)行環(huán)境中的垃圾回收器有兩種方式：標(biāo)記清除（mark and sweep）恬涧、引用計(jì)數(shù)(reference counting)注益。

標(biāo)記清除: 垃圾收集器給內(nèi)存中的所有變量都加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記溯捆。
在此之后再被加上的標(biāo)記的變量即為需要回收的變量丑搔，因?yàn)榄h(huán)境中的變量已經(jīng)無法訪問到這些變量。

引用計(jì)數(shù)(reference counting): 這種方式常常會(huì)引起內(nèi)存泄漏提揍，低版本的IE使用這種方式啤月。
機(jī)制就是跟蹤一個(gè)值的引用次數(shù)，當(dāng)聲明一個(gè)變量并將一個(gè)引用類型賦值給該變量時(shí)該值引用次數(shù)加1碳锈，
當(dāng)這個(gè)變量指向其他一個(gè)時(shí)該值的引用次數(shù)便減一顽冶。當(dāng)該值引用次數(shù)為0時(shí)就會(huì)被回收。

41.JS引擎的工作方式售碳？
答：1.先解析代碼强重，獲取所有被聲明的變量
2.然后再運(yùn)行
也就是說分為預(yù)處理與執(zhí)行兩個(gè)階段

變量提升：所有變量的聲明語句都會(huì)被提升到代碼頭部绞呈，但是變量提升只對(duì)var命令聲明的變量有效，如果一個(gè)變量
        不是用var聲明的间景，就不會(huì)發(fā)生變量提升

JS中的function也可看做變量佃声，也存在變量提升。

42.JS如何計(jì)算瀏覽器的渲染時(shí)間?
答： 瀏覽器的渲染過程主要包括以下幾步：
1.解析HTML代碼生成DOM樹
2.解析CSS生成CSSOM規(guī)則樹
3.將DOM樹與CSSOM規(guī)則樹合并在一起生成渲染樹
4.遍歷渲染樹開始布局倘要，計(jì)算每個(gè)節(jié)點(diǎn)位置大小信息
5.將渲染樹的每個(gè)節(jié)點(diǎn)繪制到屏幕

優(yōu)化考慮：
CSS優(yōu)先圾亏，引入順序方面，CSS資源優(yōu)先于JS資源
JS置后：通過把JS代碼置于頁面底部封拧，且JS應(yīng)盡量少影響DOM的構(gòu)建

43.如何判斷一個(gè)對(duì)象是否為數(shù)組?
答：1.isPrototypeof()方法志鹃，判斷Array是不是在object原型鏈中，如果是泽西，則返回true曹铃，否則返回false
2.obj instanceof Array
3.Object.prototype.toString.call(obj)
4.Array.isArray(obj)//不推薦

JQuery與Ajax部分:
1.你為什么要使用jquery？
答:因?yàn)閖Query是輕量級(jí)的框架捧杉，大小不到30kb,它有強(qiáng)大的選擇器陕见，出色的DOM操作的封裝
有可靠的事件處理機(jī)制(jQuery在處理事件綁定的時(shí)候相當(dāng)?shù)目煽?，
完善的ajax(它的ajax封裝的非常的好味抖，不需要考慮復(fù)雜瀏覽器的兼容性和XMLHttpRequest對(duì)象的創(chuàng)建和使用的問題
出色的瀏覽器的兼容性评甜。 而且支持鏈?zhǔn)讲僮鳎[式迭代仔涩。
行為層和結(jié)構(gòu)層的分離忍坷，還支持豐富的插件，jquery的文檔也非常的豐富

2.jQuery中有哪幾種類型的選擇器熔脂？
答：從我自己的角度來講承匣，可以有3種類型的選擇器，如下：
1锤悄、基本選擇器：直接根據(jù)id、css類名嘉抒、元素名返回匹配的dom元素零聚。
2、層次選擇器：也叫做路徑選擇器些侍，可以根據(jù)路徑層次來選擇相應(yīng)的DOM元素隶症。
3、過濾選擇器：在前面的基礎(chǔ)上過濾相關(guān)條件岗宣，得到匹配的dom元素蚂会。

3.你使用過jquery中的動(dòng)畫嗎，是怎樣用的耗式？
答:hide() 和 show() 同時(shí)修改多個(gè)樣式屬性胁住。像高度趁猴，寬度，不透明度
fadeIn() 和fadeOut() fadeTo() 只改變不透明度
slideUp() 和 slideDown() slideToggle() 只改變高度
animate() 屬于自定義動(dòng)畫的方法.

4.你一般用什么去提交數(shù)據(jù)彪见，為什么儡司？
答:一般我會(huì)使用的是.ajax()

5.你在jquery中使用過哪些插入節(jié)點(diǎn)的方法余指，它們的區(qū)別是什么捕犬？
答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter()，before(),insertBefore()
大致可以分為 內(nèi)部追加和外部追加append() 表式向每個(gè)元素內(nèi)部追加內(nèi)容酵镜。
appendTo()表示 講所有的元素追加到指定的元素中碉碉。例$(A)appendTo(B) 是將A追加到B中下面的方法解釋類似。

6.jQuery 能做什么淮韭？
答：1 獲取頁面的元素
2 修改頁面的外觀
3 改變頁面大的內(nèi)容
4 響應(yīng)用戶的頁面操作
5 為頁面添加動(dòng)態(tài)效果
6 無需刷新頁面垢粮，即可以從服務(wù)器獲取信息
7 簡(jiǎn)化常見的javascript任務(wù)

7.你使用過哪些數(shù)據(jù)格式，它們各有什么特點(diǎn)缸濒？
答: HTML格式 ,JSON格式,javascript格式,XML格式
1 HTML片段提供外部數(shù)據(jù)一般來說是最簡(jiǎn)單的足丢。
2 如果數(shù)據(jù)需要重用，而且其他應(yīng)用程序也可能一次受到影響庇配，那么在性能和文件大小方面具有優(yōu)勢(shì)的JSON通常是不錯(cuò)的選擇斩跌。
3 而當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí)，XML則能夠?yàn)榱己玫幕ゲ僮餍蕴峁┳羁煽康谋ＷC捞慌。

8.你知道jQuery中的事件冒泡嗎耀鸦，它是怎么執(zhí)行的，何如來停止冒泡事件啸澡？
答:知道 事件冒泡是從里面的往外面開始觸發(fā)袖订。
在jQuery中提供了stopPropagation()方法可以停止冒泡.

9.你讀過有關(guān)于jQuery的書嗎？
答:《jquery基礎(chǔ)教程》 《jquery實(shí)戰(zhàn)》《鋒利的jquery》 《巧用jquery》 《jQuery用戶界面庫學(xué)習(xí)指南》等

10.你是如何使用jquery中的ajax的嗅虏？
答:如果是一些常規(guī)的ajax程序的話洛姑，使用load(),.post(),就可以搞定了，一般我會(huì)使用的是.ajax()

11.jquery中有哪些方法可以遍歷節(jié)點(diǎn)？
答:children() 取得匹配元素的子元素集合,只考慮子元素不考慮后代元素 next() 取得匹配元素后面緊鄰的同輩元素
prev() 取得匹配元素前面緊鄰的同輩元素
siblings() 取得匹配元素前后的所有同輩元素
closest() 取得最近的匹配元素
find() 取得匹配元素中的元素集合 包括子代和后代

12.在jquery中你有沒有編寫過插件龄广，插件有什么好處硫眯？你編寫過那些插件？它應(yīng)該注意那些择同？
答: 插件的好處：對(duì)已有的一系列方法或函數(shù)的封裝两入，以便在其他地方重新利用，
方便后期維護(hù)和提高開發(fā)效率插件的分類：封裝對(duì)象方法插件 敲才、封裝全局函數(shù)插件裹纳、選擇器插件
注意的地方：
1.插件的文件名推薦命名為jquery.[插件名].js择葡，以免和其他的javaScript庫插件混淆
2.所有的對(duì)象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上
3.插件應(yīng)該返回一個(gè)jQuery對(duì)象痊夭，以保證插件的可鏈?zhǔn)讲僮?br> 4.避免在插件內(nèi)部使用.extent({})封裝全局函數(shù),選擇器插件番舆，擴(kuò)展已有的object對(duì)象通過$.fn.extend({})封裝對(duì)象方法插件

13.什么是AJAX?為什么要使用Ajax?（請(qǐng)談一下你對(duì)Ajax的認(rèn)識(shí)
答:什么是ajax：
AJAX是“Asynchronous JavaScript and XML”的縮寫酝碳。他是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
Ajax包含下列技術(shù)：
基于web標(biāo)準(zhǔn)（standards-basedpresentation）XHTML+CSS的表示恨狈；
使用 DOM（Document ObjectModel）進(jìn)行動(dòng)態(tài)顯示及交互疏哗；
使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作；
使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢禾怠、檢索返奉；
使用 JavaScript 將所有的東西綁定在一起。
2吗氏、為什么要用ajax：
Ajax應(yīng)用程序的優(yōu)勢(shì)在于：

1. 通過異步模式芽偏，提升了用戶體驗(yàn)
2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返弦讽，減少了帶寬占用
3. Ajax引擎在客戶端運(yùn)行污尉，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，從而減少了大用戶量下的服務(wù)器負(fù)載

14.AJAX最大的特點(diǎn)是什么?
答:Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）
就是能在不更新整個(gè)頁面的前提下維護(hù)數(shù)據(jù)往产。
這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶動(dòng)作被碗，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變過的信息

15.簡(jiǎn)述 AJAX的交互模型，以及同步和異步的區(qū)別?
答:AJAX主要用于實(shí)現(xiàn)從服務(wù)器獲取數(shù)據(jù)并局部刷新頁面仿村。其交互模型為锐朴，
AJAX在瀏覽器端引入一個(gè)執(zhí)行引擎，它一邊接收 user的請(qǐng)求蔼囊，一邊傳送數(shù)據(jù)給服務(wù)器包颁，并把服務(wù)器端返回的結(jié)果展現(xiàn)給 u se r。
同步：腳本會(huì)停留并等待服務(wù)器發(fā)送回復(fù)然后繼續(xù)压真。
異步：腳本不停留并處理可能的回復(fù)

16. 什么是跨域？跨域請(qǐng)求資源的方法有哪些蘑险？
    答:1滴肿、什么是跨域？
    由于瀏覽器同源策略佃迄，凡是發(fā)送請(qǐng)求url的協(xié)議泼差、域名贵少、端口三者之間任意一與當(dāng)前頁面地址不同即為跨域。存在跨域的情況：
    網(wǎng)絡(luò)協(xié)議不同堆缘，如http協(xié)議訪問https協(xié)議滔灶。
    端口不同，如80端口訪問8080端口吼肥。
    域名不同录平，如qianduanblog.com訪問baidu.com。
    子域名不同缀皱，如abc.qianduanblog.com訪問def.qianduanblog.com斗这。
    域名和域名對(duì)應(yīng)ip,如www.it.com訪問20.205.28.90.

2、跨域請(qǐng)求資源的方法：
(1)啤斗、porxy代理
定義和用法：proxy代理用于將請(qǐng)求發(fā)送給后臺(tái)服務(wù)器表箭，通過服務(wù)器來發(fā)送請(qǐng)求，然后將請(qǐng)求的結(jié)果傳遞給前端钮莲。
實(shí)現(xiàn)方法：通過nginx代理免钻；
注意點(diǎn)：1、如果你代理的是https協(xié)議的請(qǐng)求崔拥，那么你的proxy首先需要信任該證書（尤其是自定義證書）
或者忽略證書檢查极舔，否則你的請(qǐng)求無法成功。
(2)握童、CORS 【Cross-Origin Resource Sharing】
定義和用法：是現(xiàn)代瀏覽器支持跨域資源請(qǐng)求的一種最常用的方式姆怪。
使用方法：一般需要后端人員在處理請(qǐng)求數(shù)據(jù)的時(shí)候，添加允許跨域的相關(guān)操作澡绩。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)稽揭、jsonp
定義和用法：通過動(dòng)態(tài)插入一個(gè)script標(biāo)簽。瀏覽器對(duì)script的資源引用沒有同源限制
同時(shí)資源加載到頁面后會(huì)立即執(zhí)行（沒有阻塞的情況下）肥卡。
特點(diǎn)：通過情況下溪掀，通過動(dòng)態(tài)創(chuàng)建script來讀取他域的動(dòng)態(tài)資源，獲取的數(shù)據(jù)一般為json格式步鉴。
實(shí)例如下：
<script>
function testjsonp(data) {
console.log(data.name); // 獲取返回的結(jié)果
}
</script>
<script>
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=testjsonp";
document.head.appendChild(_script);
</script>
缺點(diǎn)：
　　1揪胃、這種方式無法發(fā)送post請(qǐng)求（這里）
　　2、另外要確定jsonp的請(qǐng)求是否失敗并不容易氛琢，大多數(shù)框架的實(shí)現(xiàn)都是結(jié)合超時(shí)時(shí)間來判定喊递。

17.Ajax的優(yōu)缺點(diǎn)及工作原理？
答:定義和用法:
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)阳似。Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下骚勘，能夠更新部分網(wǎng)頁的技術(shù)。
傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面俏讹。

優(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ù)

18.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.精簡(jiǎn) 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. 精簡(jiǎn) 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)化

19.瀏覽器是如何渲染頁面的户矢？
答:渲染的流程如下：
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）

20.TCP\IP三次握手?
答:過程
第一次握手：建立連接時(shí)，客戶端發(fā)送syn包（syn=j）到服務(wù)器荠藤，并進(jìn)入SYN_SENT狀態(tài)伙单，等待服務(wù)器確認(rèn)；
SYN同步序列編號(hào)（Synchronize Sequence Numbers）哈肖。
第二次握手：服務(wù)器收到syn包吻育，必須確認(rèn)客戶的SYN（ack=j+1），同時(shí)自己也發(fā)送一個(gè)SYN包（syn=k）淤井，即SYN+ACK包
此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài)布疼；
第三次握手：客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1）币狠，此包發(fā)送完畢
客戶端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)游两，完成三次握手。
完成三次握手漩绵，客戶端與服務(wù)器開始傳送數(shù)據(jù)

21.你所了解到的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)更新宝踪。

22.Http與https的理解?
答:https協(xié)議需要到ca申請(qǐng)證書，一般免費(fèi)證書較少碍扔，因而需要一定費(fèi)用瘩燥。
http是超文本傳輸協(xié)議，信息是明文傳輸不同，https則是具有安全性的ssl加密傳輸協(xié)議厉膀。
http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80站蝠，后者是443。
http的連接很簡(jiǎn)單卓鹿，是無狀態(tài)的菱魔；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議吟孙，比http協(xié)議安全澜倦。

23.規(guī)避javascript多人開發(fā)函數(shù)重名問題?
答: 命名空間
封閉空間
js模塊化mvc（數(shù)據(jù)層、表現(xiàn)層杰妓、控制層）
seajs
變量轉(zhuǎn)換成對(duì)象的屬性
對(duì)象化

24.Web Storage與Cookie相比存在的優(yōu)勢(shì)：
答: (1)藻治、存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同巷挥，但都比Cookie要大很多桩卵。
(2)、存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后倍宾，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器
這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)雏节。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互高职。
(3)钩乍、更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，如setItem,getItem,removeItem,clear等
使得數(shù)據(jù)操作更為簡(jiǎn)便怔锌。cookie需要自己封裝寥粹。
(4)、獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間埃元，各個(gè)存儲(chǔ)空間是完全獨(dú)立的涝涤，因此不會(huì)造成數(shù)據(jù)混亂。

25.響應(yīng)式開發(fā)-Less框架知識(shí)點(diǎn)
LESS:使用 LESS 簡(jiǎn)化層疊樣式表（CSS）的編寫
LESS 在服務(wù)器端的使用主要是借助于 LESS 的編譯器亚情，將 LESS 源文件編譯生成最終的 CSS 文件妄痪，目前常用的方式是利用 node 的包管理器 (npm) 安裝 LESS，安裝成功后就可以在 node 環(huán)境中對(duì) LESS 源文件進(jìn)行編譯

Less 特點(diǎn)
    變量
    混合
    嵌套規(guī)則
    運(yùn)算
    函數(shù)
    作用域
    命名空間
    注釋
    導(dǎo)入 import
    Less原理
    CSS預(yù)解析
    為css樣式生成工具

26.響應(yīng)式開發(fā)-Zepto知識(shí)點(diǎn)
移動(dòng)端開發(fā)框架Zepto
27.響應(yīng)式開發(fā)-Animate楞件、WOW知識(shí)點(diǎn)
Animate.css WOW.css實(shí)現(xiàn)各大網(wǎng)站常用的頁面加載動(dòng)畫
28.構(gòu)建工具-Gulp知識(shí)點(diǎn)
Gulp 和 Grunt 同為前端自動(dòng)化構(gòu)建工具衫生， 但在工作流程和效率等方面存在很大的差異，下面從工作流程土浸、使用方式罪针、效率和插件的重用性等多個(gè)方面進(jìn)行比較分析。
（1）工作流程
Grunt 的工作流程：重復(fù)著讀文件黄伊、修改文件泪酱、寫文件的流程。使用 Grunt 的 I/O 過程中會(huì)產(chǎn)生一些中間態(tài)的臨時(shí)文件，一些任務(wù)生成臨時(shí)文件墓阀，其它任務(wù)可能會(huì)基于臨時(shí)文
件再做處理并生成最終的構(gòu)建后文件毡惜。
Gulp 的工作流程：從文件流到文件流。使用 Gulp 的優(yōu)勢(shì)就是利用流的方式進(jìn)行文件的處理斯撮，通過管道將多個(gè)任務(wù)和操作連接起來经伙，因此只有一次 I/O 的過程，流程更清晰勿锅，
更純粹帕膜。
（2）使用方式：Grunt 是采用配置的策略處理任務(wù)，而Gulp 采用代碼優(yōu)于配置的策略溢十，使得復(fù)雜的任務(wù)便于管理垮刹，更易于維護(hù)。
（3）效率：因?yàn)?Grunt 操作會(huì)創(chuàng)建臨時(shí)文件张弛，會(huì)有頻繁的 I/O 操作荒典，而 Gulp 使用的是流操作，不需要往磁盤中寫中間文件乌庶，一直是在內(nèi)存中處理种蝶，直到輸出結(jié)果，可以更快地完成構(gòu)建瞒大。因此在效率上 Gulp 遠(yuǎn)勝 Grunt螃征。

29.構(gòu)建工具-webpack
說白了就是webpack = module bundler(加載器)，對(duì)于webpack來說透敌，所有的文件都是模塊盯滚，只是處理的方式不一樣罷了
30.構(gòu)建工具-Grunt
gulp作用
Sass、Less編譯
CSS JS 圖片壓縮
CSS JS合并
CSS JS 內(nèi)聯(lián)
自動(dòng)刷新
雪碧圖
ESLint
31.組件化開發(fā)-AMD/requirejs

32.組件化開發(fā)-CMD/seajs

CMD VS AMD
CMD與AMD都是為了javascript 組件化開發(fā) AMD是requireJS CMD是Seajs
AMD是提前執(zhí)行 不過requireJS從2.0開始也成為了延遲執(zhí)行 CMD是延遲執(zhí)行

33.平時(shí)用什么第三方插件 fullpage.js jq,zepto,swiper,jqueryUI ,animate.css

34.同步和異步的區(qū)別?
同步：阻塞的

-張三叫李四去吃飯酗电，李四一直忙得不停魄藕，張三一直等著，直到李四忙完兩個(gè)人一塊去吃飯

=瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)撵术，服務(wù)器比較忙背率，瀏覽器一直等著（頁面白屏），直到服務(wù)器返回?cái)?shù)據(jù)嫩与，瀏覽器才能顯示頁面

異步：非阻塞的

-張三叫李四去吃飯寝姿，李四在忙，張三說了一聲然后自己就去吃飯了划滋，李四忙完后自己去吃

=瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)饵筑，服務(wù)器比較忙，瀏覽器可以自如的干原來的事情（顯示頁面）处坪，服務(wù)器返回?cái)?shù)據(jù)的時(shí)候通知瀏覽器一聲根资，瀏覽器把返回的數(shù)據(jù)再渲染到頁面架专，局部更新

35.如何解決跨域問題?
理解跨域的概念：協(xié)議、域名玄帕、端口都相同才同域部脚，否則都是跨域
事先在頁面中定義回調(diào)函數(shù)，在回調(diào)函數(shù)中處理服務(wù)器返回的數(shù)據(jù)裤纹，這就是解決跨域問題的主流解決方案

36.頁面編碼和被請(qǐng)求的資源編碼如果不一致如何處理睛低？
對(duì)于ajax請(qǐng)求傳遞的參數(shù)，如果是get請(qǐng)求方式，參數(shù)如果傳遞中文，在有些瀏覽器會(huì)亂碼棠耕，
不同的瀏覽器對(duì)參數(shù)編碼的處理方式不同漫雕，所以對(duì)于get請(qǐng)求的參數(shù)需要使用 encodeURIComponent函數(shù)對(duì)參數(shù)進(jìn)行編碼處理，
后臺(tái)開發(fā)語言都有相應(yīng)的解碼api拉庵。對(duì)于post請(qǐng)求不需要進(jìn)行編碼

37.簡(jiǎn)述ajax 的過程?

1. 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象

2. 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法灿椅、URL及驗(yàn)證信息

3. 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)

4. 發(fā)送HTTP請(qǐng)求

5. 獲取異步調(diào)用返回的數(shù)據(jù)

6. 使用JavaScript和DOM實(shí)現(xiàn)局部刷新

38.闡述一下異步加載JS?

1. 異步加載的方案： 動(dòng)態(tài)插入 script 標(biāo)簽
2. 通過 ajax 去獲取 js 代碼，然后通過 eval 執(zhí)行
3. script 標(biāo)簽上添加 defer 或者 async 屬性
4. 創(chuàng)建并插入 iframe钞支，讓它異步執(zhí)行 js

38.請(qǐng)解釋一下 JavaScript 的同源策略?
同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)茫蛹。它最早出自Netscape Navigator2.0
其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。
所謂同源指的是：協(xié)議烁挟，域名婴洼，端口相同，同源策略是一種安全協(xié)議
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性

面試只是一個(gè)開始,未來的路還很長(zhǎng),最后希望即將畢業(yè)的你能順利拿到Offer

技術(shù)不需要不斷更新,讓我們一起探索更多的技術(shù)吧[公眾號(hào)IT程序員的日常]

作者：FengyCoder
原文：https://blog.csdn.net/FengyCoder/article/details/82841644