目錄

html相關(guān)

1）說(shuō)一下對(duì)cookie和Storage(localStorage和sessionStorage) 的認(rèn)識(shí)和區(qū)別？

2）link和@import的區(qū)別

3）瀏覽器如何實(shí)現(xiàn)不同標(biāo)簽頁(yè)的通信？

4）iframe的優(yōu)缺點(diǎn)

5）canvas

6）做項(xiàng)目用到哪些h5新特性和css3新特性？

7）用localstorage和sessionStorage寫(xiě)過(guò)什么？

8）如何解決頁(yè)面內(nèi)容加載緩慢的問(wèn)題？

9）cookie的特點(diǎn)*

10）頁(yè)面渲染過(guò)程

11）網(wǎng)頁(yè)上哪里可以看到請(qǐng)求的所有信息

12）HTML5的新特性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

13）localstore和sessionstore的區(qū)別

14）頁(yè)面之間是怎么傳參數(shù)的？

15）如何在瀏覽器查看和清除localstrorage保存的數(shù)據(jù)？

16）對(duì)H5新增的語(yǔ)義化標(biāo)簽的理解？

css相關(guān)

17）CSS選擇器的優(yōu)先級(jí)排序，怎么計(jì)算權(quán)值？

18）display：none和visibility：hidden的區(qū)別

19）CSS的繼承選擇器，.one. two和.one > .two的區(qū)別？?jī)蓚€(gè)同級(jí)類(lèi)選擇器連著一起寫(xiě)有什么作用？(權(quán)值相加)

20）CSS的引用方式有哪些？它們的區(qū)別？

21）css有哪些選擇符？可繼承的屬性有哪些？css3新增的偽元素有哪些？css優(yōu)先級(jí)的計(jì)算

22）fixed和absolute的區(qū)別？

23）如何實(shí)現(xiàn)水平、垂直居中？

24）實(shí)現(xiàn)左側(cè)邊欄固定，其他內(nèi)容自適應(yīng)?

25）css3的新特性

26）了解過(guò)哪些頁(yè)面布局？

27 用animation做過(guò)什么？做過(guò)哪些動(dòng)畫(huà)？

28 Sass寫(xiě)一個(gè)數(shù)組？

29）rem出現(xiàn)很小的小數(shù)手機(jī)上會(huì)發(fā)生什么，

30 什么時(shí)候用less

31 animation和transition

32 移入圖片讓那個(gè)圖片慢慢放大

33 盒子模型概念

34 引用樣式的方式有哪幾種？他們的優(yōu)先級(jí)排序怎么樣？

35 px,em,rem,%，vm,vh

36 display的值和作用

37列舉兩種清除浮動(dòng)的方法(代碼實(shí)現(xiàn)或者描述思路)

38 盒子模型（怪異模型）

39 談?wù)刦ixed ，relative?， absolute

40 float和absolute有什么區(qū)別？

41 代碼實(shí)現(xiàn)3欄效果，左右兩欄固定寬度，中間欄隨著瀏覽器寬度自適應(yīng)變化

42 css選擇器的權(quán)重

43 transition transform translate 之間的區(qū)別 transform的屬性有哪些？

44 css3中的選擇器

46 用CSS實(shí)現(xiàn)一個(gè)背景色為紅色，半徑為200px的圓，并設(shè)置不停的上下移動(dòng)動(dòng)畫(huà)

javascript以及es6相關(guān)

?null和undefined的區(qū)別？

?js的數(shù)據(jù)類(lèi)型

?js 的繼承實(shí)現(xiàn)方式有哪些，列舉兩個(gè)例子

eval是什么？

?用什么會(huì)導(dǎo)致內(nèi)存泄漏？

?js深度克隆的代碼實(shí)現(xiàn)？

?同源策略，跨域，后臺(tái)如何解決跨域，html有哪些標(biāo)簽可以跨域

es6

js自己封裝一個(gè)方法

?jq用過(guò)哪些方法？

?promise？

?觸摸有幾個(gè)事件？

什么時(shí)候會(huì)發(fā)生跨域問(wèn)題

?匿名函數(shù)

?This指向問(wèn)題

?JQ，JS，vue 三者的區(qū)別

?用jq實(shí)現(xiàn)雙向綁定！

?ajax的實(shí)現(xiàn)

ajax的實(shí)現(xiàn)

?在數(shù)組上新增一個(gè)方法，實(shí)現(xiàn)復(fù)制。

?期望：[1,2,3].copy() //輸出 [1,2,3,1,2,3]

?.使用閉包實(shí)現(xiàn)一個(gè)方法，第一次調(diào)用返回1，第二次返回2，第三次3，以此類(lèi)推。

?.封裝一個(gè)函數(shù)，參數(shù)是定時(shí)器的時(shí)間，.then執(zhí)行回調(diào)函數(shù)。

?說(shuō)一說(shuō)前端性能優(yōu)化有哪些方法？

?一個(gè)頁(yè)面上有大量的圖片（大型電商網(wǎng)站）,加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶(hù)更好的體驗(yàn)。

?.export和export default?

怎么去判斷出來(lái)數(shù)組里面值為1的元素

?有一個(gè)數(shù)組，怎么去修改每一個(gè)值？

?數(shù)組去重

?統(tǒng)計(jì)字符串中出現(xiàn)最多的字符

js垃圾回收機(jī)制

原型、原型鏈

作用域鏈

閉包

繼承方法

輾轉(zhuǎn)相除法

數(shù)組轉(zhuǎn)字符串

二級(jí)下拉菜單

圖片預(yù)加載和懶加載？

bind() apply()

const用法

Utf-8編碼漢字占多少個(gè)字節(jié)

ajax

js對(duì)數(shù)組的操作，包括向數(shù)組中插入刪除數(shù)據(jù)

兩種定時(shí)器，setinterval和settimeout。因?yàn)閟ettimeout是只執(zhí)行一次的，如果要執(zhí)行多次怎么做。（答案：設(shè)置一個(gè)回調(diào)函數(shù)，多次調(diào)用，大概是這樣，你可以去查查）

JS內(nèi)存回收機(jī)制

promise是什么？能解決什么問(wèn)題？

編程：連接兩個(gè)數(shù)組并返回？

冒泡排序？

創(chuàng)建新數(shù)組，向數(shù)組插入數(shù)據(jù)

es6新特性

js對(duì)數(shù)組有哪些操作方法

什么是ajax，可以用來(lái)做什么

講下你做輪播圖的思路，無(wú)縫輪播

js的選擇器

js數(shù)據(jù)類(lèi)型

減少頁(yè)面加載時(shí)間的方法

怎么理解模塊化開(kāi)發(fā)

什么是閉包，有什么作用？

定時(shí)器 settimeout和setinterval的區(qū)別，如果用settimeout實(shí)現(xiàn)每隔一定的時(shí)間就執(zhí)行一次，怎么實(shí)現(xiàn)

手機(jī)號(hào)的正則表達(dá)式(以1開(kāi)頭的11位數(shù)字)

結(jié)構(gòu)的html代碼，寫(xiě)原生js實(shí)現(xiàn)點(diǎn)擊某個(gè)li就彈出對(duì)應(yīng)的索引值

對(duì)數(shù)組進(jìn)行隨機(jī)排序， 要求數(shù)組中的每個(gè)元素不能停留在原來(lái)的位置

代碼實(shí)現(xiàn)parse方法，將有效的JSON字符串轉(zhuǎn)換成JavaScript對(duì)象

原生js的變量類(lèi)型有哪些？ES6新增哪幾個(gè)變量類(lèi)型？

js的數(shù)組方法有哪些？

es6的有哪些擴(kuò)展？新增的數(shù)組方法有哪些？用什么方法連接兩個(gè)數(shù)組？函數(shù)擴(kuò)展中的箭頭函數(shù)中的this所指向的是什么？一般函數(shù)的this指向的又是什么？

用什么方法判斷是否是數(shù)組？又用什么方法判斷是否是對(duì)象？

http相關(guān)

瀏覽器

bootstrap

vue相關(guān)

node相關(guān)

4? module.export和export？

微信小程序

react

數(shù)據(jù)庫(kù)相關(guān)

其他

html相關(guān)

1. 1）說(shuō)一下對(duì)cookie和Storage(localStorage和sessionStorage) 的認(rèn)識(shí)和區(qū)別？

   1. ?session 是一個(gè)后端存儲(chǔ)空間
      2. cookie / localStorage / sessionStorage 的區(qū)別
      存儲(chǔ)大小

      cookie 4kb??
      localStorage 5M?
      通訊相關(guān)

      cookie 隨請(qǐng)求攜帶
      storage 不會(huì)自動(dòng)攜帶
      操作相關(guān)

      cookie 操作復(fù)雜，沒(méi)有 api，前后端都可以操作
      storage 操作簡(jiǎn)單，有 api，只能前端操作
      存儲(chǔ)格式

      cookie：字符串格式
      storageL: 鍵值對(duì)
      時(shí)效相關(guān)

      cookie：默認(rèn)會(huì)話(huà)級(jí)別，可以手動(dòng)設(shè)置
      storage：localStorage的存儲(chǔ)是永久性的，只有在手動(dòng)刪除或者瀏覽器被卸載后才會(huì)被清除，sessionStorage 是會(huì)話(huà)，當(dāng)窗口或者頁(yè)面關(guān)閉后會(huì)被清除
      3.loaclStorage 和 sessionStorage 的區(qū)別
      跨頁(yè)面通訊能力
      localStorage 隨便跨頁(yè)面
      sessionStorage 只是在本頁(yè)面跳轉(zhuǎn)可以通訊
      時(shí)效性
      localStorage 是永久
      sessionStorage 是會(huì)話(huà)
      共同點(diǎn)
      不能存儲(chǔ)其他數(shù)據(jù)類(lèi)型，只能存儲(chǔ)字符串?dāng)?shù)據(jù)類(lèi)型
      如果一定要存儲(chǔ)其他數(shù)據(jù)類(lèi)型，轉(zhuǎn)成 json 格式存儲(chǔ)

2. 2）link和@import的區(qū)別

   1. ?

      都知道 ，外部引入 CSS 有2種方式，link標(biāo)簽和@import。
      但是它們有何本質(zhì)區(qū)別？
      本人項(xiàng)目中多數(shù)情況都使用link方式，但見(jiàn)過(guò)某些項(xiàng)目人，自以為@import高大上類(lèi)似es6，極力吹捧使用@import，就此找了一些資料對(duì)此進(jìn)行比較說(shuō)明：
      先上結(jié)論
      慎用@import方式。可以避免考慮@import的語(yǔ)法規(guī)則和注意事項(xiàng)，以及不合理的引入順序?qū)е碌馁Y源文件下載順序混亂和http請(qǐng)求過(guò)多。

      區(qū)別1：
      link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事物如引入網(wǎng)站標(biāo)題圖標(biāo)；@import屬于CSS范疇，只能加載CSS。

      <link rel="icon" type="image/x-icon" href="XXX.ico">
   2. 區(qū)別2：
      link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。所以會(huì)出現(xiàn)一開(kāi)始沒(méi)有css樣式，閃爍一下出現(xiàn)樣式后的頁(yè)面。

      區(qū)別3：
      link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

      區(qū)別4：
      link支持使用Javascript控制DOM去改變樣式；而@import不支持。

      順便總結(jié)下在html中css有四種引入方式：

      內(nèi)聯(lián)樣式
      內(nèi)聯(lián)CSS也可稱(chēng)為行內(nèi)CSS或者行級(jí)CSS，它直接在標(biāo)簽內(nèi)部引入，顯著的優(yōu)點(diǎn)是十分的便捷、高效
      示例：<div style="background:red"></div>
      這通常是個(gè)很糟糕的書(shū)寫(xiě)方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè)

      擁有相同的樣式，你不得不重復(fù)地為每個(gè)
      添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。
      嵌入樣式
      嵌入方式也稱(chēng)頁(yè)級(jí)CSS或內(nèi)部CSS，整體是放在head標(biāo)簽里邊的，在style標(biāo)簽里邊定義樣式，作用范圍和字面意思相同，僅限于本頁(yè)面的元素；如果你寫(xiě)的代碼超過(guò)了幾百行，想想每次把代碼頁(yè)拉到最上邊都很煩，所以它在可維護(hù)性方面較差。
      示例：

      嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫(xiě)模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。
      外部樣式
      鏈接方式指的是使用 HTML 頭部的 標(biāo)簽引入外部的 CSS 文件。
      示例：

      這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。
      導(dǎo)入樣式
      導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
      示例：

      或者寫(xiě)在css樣式中

      @charset “utf-8”;
      @import url(style.css);
      *{ margin:0; padding:0;}
      .notice-link a{ color:#999;}

      HTML加載過(guò)程：
      　　　　1) 加載HTML-DOM結(jié)構(gòu)

      2)CSS和JS

      3)圖片和多媒體

      4)加載事件觸發(fā)

      總結(jié)：　link和@import都沒(méi)有放置順序的要求，但是不同的放置位置可能會(huì)造成效果顯示的差異。對(duì)于link，無(wú)論放到哪個(gè)位置，都是一邊加載數(shù)據(jù)，一邊進(jìn)行優(yōu)化，視覺(jué)感受很好；而對(duì)于@import，放置到哪里，才從哪里開(kāi)始加載CSS樣式，即先加載數(shù)據(jù)，然后加載樣式，如果網(wǎng)速不佳，可能會(huì)造成只有數(shù)據(jù)出來(lái)，而樣式一點(diǎn)點(diǎn)加載的效果。并且在同一個(gè)頁(yè)面中，調(diào)用兩種方式，link永遠(yuǎn)比@import優(yōu)先級(jí)高。

      在項(xiàng)目中使用的時(shí)候，一般在頁(yè)面中調(diào)用方式為link，并且放在head標(biāo)簽中；使用@import除了在CSS文件中，在頁(yè)面調(diào)用時(shí)，一般加載第三方的樣式會(huì)使用到，并且需要放置在頁(yè)面的底部，不會(huì)影響自己的網(wǎng)站。
      ?

      ???????

3. 3）瀏覽器如何實(shí)現(xiàn)不同標(biāo)簽頁(yè)的通信？

   1. 瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間通信，通俗的講就是瀏覽器中開(kāi)了多個(gè)窗口，在其中一個(gè)窗口做了一些行為等其他窗口不用刷新也能有相關(guān)表現(xiàn)。

      一、cookie+setInterval方式
      要想在多個(gè)窗口中通信，通信的內(nèi)容一定不能放在window對(duì)象中，因?yàn)閣indow是當(dāng)前窗口的作用域，里面的內(nèi)容只屬于當(dāng)前窗口。而cookie是瀏覽器的本地存儲(chǔ)機(jī)制，和窗口無(wú)關(guān)。

      將要發(fā)送的信息寫(xiě)入cookie：

       var msg = documet.querySelector('#msg');
       if(msg.value.trim() != ""){
       	docment.cookie = "msg=" + msg.value.trim();
       }
      

      
      
      
      在另一個(gè)頁(yè)面讀取cookie：

      ??var recMsg = document.querySelector('#recMsg');
      ?function getValue(key){
      ?? ?var cookies = '{"'+document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'", "')+'"}';
      ? ? cookies = JSON.parse(cookies);
      ? ? return cookies[key];
      ?}
      ?setInterval(function(){
      ? ? recMsg.innerHTML = getValue("msg1");
      ?},500);

      
      
      但是由于僅僅從cookie讀取信息不能實(shí)時(shí)更新，需要手動(dòng)刷新，因此采用setInterval定時(shí)器解決，將讀取信息的代碼封裝成一個(gè)函數(shù)，在定時(shí)器內(nèi)調(diào)用即可

      缺點(diǎn)：

      1）cookie空間有限，容量4k
      2）每次http請(qǐng)求都會(huì)把當(dāng)前域的cookie發(fā)送到服務(wù)器上，浪費(fèi)帶寬
      3）setInterval評(píng)率設(shè)置過(guò)大會(huì)影響瀏覽器性能，過(guò)小會(huì)影響時(shí)效性

      優(yōu)點(diǎn)：每個(gè)瀏覽器都兼容

      二、websocket協(xié)議
      websocket是一種網(wǎng)絡(luò)通信協(xié)議，因?yàn)閔ttp有缺陷，通信只可以由客戶(hù)端發(fā)起，服務(wù)器無(wú)法主動(dòng)向客戶(hù)端發(fā)送消息，但如果這時(shí)服務(wù)器有連續(xù)變化的狀態(tài)，那么就只能使用輪詢(xún)（每個(gè)一段時(shí)間，就發(fā)出一個(gè)詢(xún)問(wèn)）的方式來(lái)詢(xún)問(wèn)。因?yàn)閣ebsocket擁有全雙工（full-duplex）通信自然可以實(shí)現(xiàn)多個(gè)標(biāo)簽頁(yè)之間的通信。
      發(fā)送方先發(fā)送消息到WebSocketServer，然后服務(wù)端再實(shí)時(shí)把消息發(fā)給接收方

      用法：新建webSocket文件夾，在該目錄下打開(kāi)終端，運(yùn)行npm init （npm安裝及配置步驟）初始化一個(gè)簡(jiǎn)單的node項(xiàng)目（因?yàn)樾枰雡s包），一直按回車(chē)到結(jié)束就初始了一個(gè)簡(jiǎn)單的node項(xiàng)目。再安裝ws包，依舊在當(dāng)前目錄下的終端運(yùn)行npm i -save ws，在webSocket目錄下新建sever.js、send.html、reveive.html文件

      三、localstorage

      四、html5瀏覽器新特性——SharedWorker
      WebWorker的升級(jí)版，webworker只能在一個(gè)窗口內(nèi)使用，而SharedWorker可以在多個(gè)窗口之間通信
      SharedWorker也是純客戶(hù)端的，沒(méi)有服務(wù)端參與
      SharedWorker在客戶(hù)端有一個(gè)自己維護(hù)的對(duì)象worker.js，消息存儲(chǔ)在worker.js的data中
      SharedWorker不如localStorage的是接收消息不是自動(dòng)的，也要用定時(shí)器實(shí)時(shí)從worker.js中獲取消息
      
      原文鏈接：https://blog.csdn.net/jewfer/article/details/122614963

4. 4）iframe的優(yōu)缺點(diǎn)

   1. ??

      一、iframe的優(yōu)點(diǎn)：
      1、　iframe能夠原封不動(dòng)地把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)。

      2、　如果有多個(gè)網(wǎng)頁(yè)調(diào)用iframe，只需要修改iframe的內(nèi)容，就可以實(shí)現(xiàn)對(duì)調(diào)用iframe的每一個(gè)頁(yè)面內(nèi)容的更改，方便快捷。

      3、　網(wǎng)頁(yè)如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫(xiě)成一個(gè)頁(yè)面，用iframe來(lái)嵌套，可以增加代碼的可重用性。

      4、　如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等，可以用iframe來(lái)解決。

      二、iframe的缺點(diǎn)：
      1、　會(huì)產(chǎn)生很多頁(yè)面，不容易管理。

      2、　在幾個(gè)框架中都出現(xiàn)上下、左右滾動(dòng)條時(shí)，這些滾動(dòng)條除了會(huì)擠占已經(jīng)非常有限的頁(yè)面空間外，還會(huì)分散訪問(wèn)者的注意力。

      3、　使用框架結(jié)構(gòu)時(shí)，必須保證正確設(shè)置所有的導(dǎo)航鏈接，否則會(huì)給訪問(wèn)者帶來(lái)很大的麻煩。比如被鏈接的頁(yè)面出現(xiàn)在導(dǎo)航框架內(nèi)，這種情況下會(huì)導(dǎo)致鏈接死循環(huán)。

      4、　很多的移動(dòng)設(shè)備（PDA手機(jī)）無(wú)法完全顯示框架，設(shè)備兼容性差。

      5、　iframe框架頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求，對(duì)于大型網(wǎng)站是不可取的。

      現(xiàn)在基本上都是用Ajax來(lái)代替iframe，iframe已漸漸退出了前端開(kāi)發(fā)。

5. 5）canvas

   1. Canvas介紹
      1.canvas是html5的一個(gè)新標(biāo)簽，屬于h5的新特性
      2.canvas標(biāo)簽是一個(gè)圖形的容器，簡(jiǎn)單點(diǎn)說(shuō)就是一塊畫(huà)布，你可以在上畫(huà)矩形，圓形，三角形，折線等等,也可以用來(lái)畫(huà)logo
      3.它是通過(guò)javascript來(lái)畫(huà)的，即腳本繪制圖形

      canvas可以用來(lái)干啥呢？
      1.制作web網(wǎng)頁(yè)游戲（但是如果代碼寫(xiě)的不咋的游戲可能會(huì)非?？ǎ?br> 2.數(shù)據(jù)可視化（這么說(shuō)你可能不明白，但我告訴你echarts就是基于canvas）
      3.廣告banner的動(dòng)態(tài)效果非常適合用canvas制作
      4.canvas還可以用來(lái)內(nèi)嵌一些網(wǎng)頁(yè)
      
      原文鏈接https://blog.csdn.net/u012468376/article/details/73350998

6. 6）做項(xiàng)目用到哪些h5新特性和css3新特性？

   1. 1 HTML5 的新特性
      增加了新標(biāo)簽、新表單和新特性；
      IE9以上才兼容，如不考慮兼容問(wèn)題，則可以大量使用（如移動(dòng)端）；

      1 重點(diǎn)是常用新特性；
      1.1 HTML5 新增的語(yǔ)義化標(biāo)簽
      div 對(duì)于搜索引擎來(lái)說(shuō)是沒(méi)有語(yǔ)義的；

      header：頭部標(biāo)簽
      nav：導(dǎo)航標(biāo)簽
      article：內(nèi)容標(biāo)簽
      section：定義文檔某個(gè)區(qū)域
      aside：側(cè)邊欄標(biāo)簽
      footer：尾部標(biāo)簽
      主要是針對(duì)搜索引擎的
      可以多次使用
      在IE9中需要轉(zhuǎn)為塊級(jí)元素才能使用
      1.2 HTML5 新增的多媒體標(biāo)簽
      1 音頻：audio；
      有 MP3 Wav Ogg 三種格式；
      語(yǔ)法
      <audio src="文件地址" controls="controls"></audio>
      1
      屬性
      autoplay autoplay 視頻就緒自動(dòng)播放（谷歌瀏覽器需要添加muted來(lái)解決自動(dòng)播放問(wèn)題）；
      controls controls 向用戶(hù)顯示播放器控件；
      loop loop 播放完是否繼續(xù)循環(huán)播放
      src url
      Chrome 把音頻和視頻自動(dòng)播放禁止了；
      2 視頻：video；
      盡量使用 MP4；
      另外還有 Ogg 格式；
      語(yǔ)法：
      <video src="文件地址" controls="controls"></video>
      1
      屬性
      autoplay autoplay 視頻就緒自動(dòng)播放（谷歌瀏覽器需要添加muted來(lái)解決自動(dòng)播放問(wèn)題）；
      controls controls 向用戶(hù)顯示播放器控件；
      width px
      height px
      loop loop 播放完是否繼續(xù)循環(huán)播放
      preload auto（預(yù)先加載視頻）| none（不應(yīng)加載視頻）
      src url
      poster Imgurl 加載等待的畫(huà)面圖片
      muted muted 靜音播放
      視頻靜音后可以自動(dòng)播放；
      從而不再使用flash等插件
      1.3 HTML5 新增的 input 類(lèi)型
      驗(yàn)證的時(shí)候必須添加 form 表單域；
      使用 submit 進(jìn)行提交；
      type="email"?? ?限制用戶(hù)輸入必須為 Email 類(lèi)型
      type="url"?? ?限制用戶(hù)輸入必須為 URL 類(lèi)型
      type="date"?? ?限制用戶(hù)輸入必須為 date 類(lèi)型
      type="time"?? ?限制用戶(hù)輸入必須為 time 類(lèi)型
      type="month"?? ?限制用戶(hù)輸入必須為 month 類(lèi)型
      type="week"?? ?限制用戶(hù)輸入必須為 week 類(lèi)型
      type="number"?? ?限制用戶(hù)輸入必須為 number 類(lèi)型
      type="tel"?? ?限制用戶(hù)輸入必須為 tel 類(lèi)型
      type="search"?? ?限制用戶(hù)輸入必須為 search 類(lèi)型
      type="color"?? ?限制用戶(hù)輸入必須為 color 類(lèi)型
      type="submit"?? ?提交按鈕
      1.4 HTML5 新增的表單屬性
      屬性?? ?值?? ?說(shuō)明
      required?? ?required?? ?表單擁有該屬性表示其內(nèi)容不能為空，必填
      placeholder?? ?提示文本?? ?表單的提示信息，存在默認(rèn)值將不顯示
      autofocus?? ?autofocus?? ?自動(dòng)聚焦屬性，頁(yè)面加載完成后聚焦到指定表單
      autocomplete?? ?off/on?? ?瀏覽器基于之前輸入的值，顯示出可能的選項(xiàng)，
      默認(rèn)已經(jīng)打開(kāi)，關(guān)閉autocomplete="off"
      需要放在表單內(nèi)，加上name屬性，同時(shí)提交成功
      multiple?? ?multiple?? ?可以多選文件提交
      ``` /* 設(shè)置占位符顏色 */ input::placeholder { color: springgreen; } ```
      2 CSS3
      存在兼容性問(wèn)題

      2.1 屬性選擇器
      屬性選擇器可以根據(jù)元素特定屬性來(lái)選擇元素，這樣就可以不用借助于類(lèi)或者 id 選擇器；
      權(quán)重為 0, 0, 1, 0；
      類(lèi)選擇器、屬性選擇器、偽類(lèi)選擇器權(quán)重相同；
      input[name="username"] {
      ? ? outline: none;
      ? ? border: 3px solid skyblue;
      }
      
      選擇符?? ?簡(jiǎn)介
      E[att]?? ?匹配有 att 屬性的 E 元素
      E[att="val"]?? ?匹配有 att 屬性且屬性等于 val 的 E 元素
      E[att^="val"]?? ?匹配有 att 屬性且值以 val 開(kāi)頭的 E 元素
      E[att$="val"]?? ?匹配有 att 屬性且值以 val 結(jié)尾的 E 元素
      E[att*="val"]?? ?匹配有 att 屬性且值中含有 val 的 E 元素
      2.2 結(jié)構(gòu)偽類(lèi)選擇器
      根據(jù)文檔結(jié)構(gòu)來(lái)選擇元素，常用于根據(jù)父級(jí)選擇器里面的子元素；
      /* 選擇第一個(gè)孩子，且必須是 li */
      ul li:first-child {
      ? ? color: red;
      }

      ul li:nth-child(2) {
      ? ? color: red;
      }

      // 使用 even 選出奇數(shù)行
      ul li:nth-child(even) {
      ? ? background-color: red;
      ? ? color: white;
      }
      
      ul li:nth-child(even) // 使用 even 選出奇數(shù)行
      ul li:nth-child(odd) // 使用 odd 選出偶數(shù)行
      ul li:nth-child(n) // n 是選擇所有
      n 可以被公示替代
      2n 取出偶數(shù)項(xiàng)
      2n + 1 取出奇數(shù)項(xiàng)
      5n 取出 5 的倍數(shù)項(xiàng)
      n + 5 從第五項(xiàng)開(kāi)始
      -n + 5 前五項(xiàng)
      數(shù)字可以是任何數(shù)字
      div:nth-child(n) 會(huì)包含所有標(biāo)簽類(lèi)型，同時(shí)需要滿(mǎn)足設(shè)置的標(biāo)簽類(lèi)型，都滿(mǎn)足方能選中；
      div:nth-of-type(n) 只包含指定元素，如此處為div；
      選擇符?? ?簡(jiǎn)介
      E:first-child?? ?匹配父元素中的第一個(gè)子元素 E
      E:last-child?? ?>匹配父元素中的最后一個(gè)子元素 E
      E:nth-child(n)?? ?>匹配父元素中的第 n 個(gè)子元素 E
      E:first-of-type?? ?指定類(lèi)型 E 的第一個(gè)
      E:last-of-type?? ?指定類(lèi)型 E 的最后一個(gè)
      E:nth-of-type(n)?? ?指定類(lèi)型 E 的第 n 個(gè)
      2.3 偽元素選擇器
      偽元素選擇器可以用于利用 css 創(chuàng)建新標(biāo)簽元素，不需要 HTML 標(biāo)簽，從而簡(jiǎn)化 HTML 結(jié)構(gòu)；

      after 和 before 創(chuàng)建的元素是行內(nèi)元素；

      新創(chuàng)建的元素在文檔樹(shù)中是找不到的；

      語(yǔ)法：element::before()；

      after 和 before 必須有 content 屬性；

      偽元素選擇器和標(biāo)簽選擇器一樣，權(quán)重為0, 0, 0, 1；

      選擇符?? ?簡(jiǎn)介
      ::before?? ?在元素內(nèi)部的前面插入內(nèi)容
      ::after?? ?在元素內(nèi)部的后面插入內(nèi)容
      div {
      ? ? width: 200px;
      ? ? height: 200px;
      ? ? background-color: pink;
      }

      div::before {
      ? ? /* content是必須要寫(xiě)的，元素內(nèi)容 */
      ? ? content: 'before 偽元素選擇器';
      }

      div::after {
      ? ? /* content是必須要寫(xiě)的，元素內(nèi)容 */
      ? ? content: 'after 偽元素選擇器';
      }
      
      content 必須填寫(xiě)，可以寫(xiě)空字符串；

      在偽元素中使用 iconfont：

      @font-face {
      ? ? font-family: "iconfont";
      ? ? src: url('iconfont.eot?t=1587189598280');
      ? ? /* IE9 */
      ? ? src: url('iconfont.eot?t=1587189598280#iefix') format('embedded-opentype'),
      ? ? ? ? /* IE6-IE8 */
      ? ? ? ? url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJwAAsAAAAABiAAAAIjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAooRgE2AiQDCAsGAAQgBYRtBzIbbgXILrBt2JMiJESQDXTjExAAiOD5/b7Nue9+1bRqcaNJFE0LNDyRiFs3oa1TOqFoJv/9X7p0TKPyfLfcQ01/I//fmLm0hedxGiERBoSECkU85Jegb+7hAvs8l9ObQAdyV32gXPegNQYNoF4cUKB7YBRZCWXcMHbBC3xMoG5GQ+7k7HiBqsxeFYj3b7QB1UJAllm6KpQbDmbxWUk1PaVv4FP0/finF1WSUsGuuny5smH6i5NVPE4ePQSEIAEdL6HAFpCJ28bEuYJgXEE9UbQAjlUe/DKZBHZxVItgf51d2gRTMBn84q0UIMFjUYYbkzYR5Rf7pEf216s366Re+xcwRT8rDtKBHILvT23nf7WRwc97HpmzYS5Q3cwZfL5s4EA2FLYtZU3WOJ6UD9tWV8cE9vT9TTWOrpUJVaMJrorpDIWqJTKzWyhp2EZZ1T7qNm2ONwywgsg1bPgACF2fSNp+oND1Q2b2FyVj/yjrRoG6+xhc2LASb+rHH8gQstF8R9eKI+U6pB6Xn0jfA4Pzioi/EWduGLutTjm9oYh4iS3ZQ/dEFCqOQ1yD5ygIYkw49siSliOS9Ntt1fSmlhWHUHeMEYMgNmR6h1yWWEQFk0W98vkTot0FDNzRV5e+ISzjzo66WjoDyI02GtT3KK9kHrQeIRSksFgIrcE8EgjEUNI8z0MsosWZEEv0tZ1Raqi2tb0+/LtTUGebUjg1herHN0akfQsAAAAA') format('woff2'),
      ? ? ? ? url('iconfont.woff?t=1587189598280') format('woff'),
      ? ? ? ? url('iconfont.ttf?t=1587189598280') format('truetype'),
      ? ? ? ? /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      ? ? ? ? url('iconfont.svg?t=1587189598280#iconfont') format('svg');
      ? ? /* iOS 4.1- */
      }

      .iconfont {
      ? ? font-family: "iconfont" !important;
      ? ? font-size: 16px;
      ? ? font-style: normal;
      ? ? -webkit-font-smoothing: antialiased;
      ? ? -webkit-text-stroke-width: 0.2px;
      ? ? -moz-osx-font-smoothing: grayscale;
      }

      div::after {
      ? ? position: absolute;
      ? ? font-family: "iconfont" !important;
      ? ? font-size: 16px;
      ? ? font-style: normal;
      ? ? -webkit-font-smoothing: antialiased;
      ? ? -webkit-text-stroke-width: 0.2px;
      ? ? -moz-osx-font-smoothing: grayscale;
      ? ? /* top: ; */
      ? ? content: '\e77b';
      }
      
      原本直接放在“ iconfont ”類(lèi)中的樣式放在對(duì)應(yīng)偽類(lèi)中，然后將“&#x”改為“\”即可（如  ，在content中變?yōu)?\e77b）；

      2.4 CSS3 盒子模型
      CSS3 中可以通過(guò) box-sizing 來(lái)指定盒模型，分別是 content-box、border-box；
      這樣就可以該表計(jì)算盒子大小的方式；
      可以分成兩種情況：
      1 box-sizing: content-box 盒子大小為 width + padding + border （默認(rèn)）；
      2 box-sizing: border-box 盒子大小為 width；
      .div2 {
      ? ? width: 200px;
      ? ? height: 200px;
      ? ? background-color: skyblue;
      ? ? border: 5px solid greenyellow;
      ? ? padding: 15px;
      ? ? box-sizing: border-box;
      }
      
      使用通配符進(jìn)行統(tǒng)一默認(rèn)配置；
      * {
      ? ? margin: 0;
      ? ? padding: 0;
      ? ? box-sizing: border-box;
      }
      
      2.5 CSS3 其他特性（了解）
      1 CSS3 濾鏡 filter；

      用于將模糊或顏色偏移等圖形效果應(yīng)用于元素；
      filter: 函數(shù)(); ? ??
      例如：filter: blur(5px); blur模糊處理 數(shù)值越大越模糊
      
      2 CSS3 calc 函數(shù)：

      calc() 使聲明css屬性值時(shí)執(zhí)行一些計(jì)算；
      width: calc(100% - 80px);
      1
      上例中使得子元素永遠(yuǎn)比父元素窄 80px；
      可以使用運(yùn)算符
      2.6 CSS3 過(guò)渡
      在不使用 Flash 動(dòng)畫(huà)或 javascript 的情況下，配置元素樣式變化過(guò)度效果；

      主要是過(guò)渡效果；
      與 :hover 搭配使用；
      transition: 要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始;
      1
      要過(guò)渡的屬性：如果是所有屬性，可以寫(xiě) all ；
      花費(fèi)時(shí)間：?jiǎn)挝粸槊耄仨殞?xiě)單位，如 0.5s；
      運(yùn)動(dòng)曲線：可以省略；
      linear：勻速；
      ease：緩慢減速；
      ease-in：加速；
      ease-out：減速；
      ease-in-out：先加速后減速；
      何時(shí)開(kāi)始：用于延遲，可以省略；
      div {
      ? ? width: 200px;
      ? ? height: 100px;
      ? ? background: no-repeat;
      ? ? background-image: url(../1.jpg);
      ? ? background-size: 100% 100%;
      ? ? transition: background-image 1s, width 1s;
      }

      div:hover {
      ? ? background-image: url(../2.jpg);
      ? ? width: 400px;
      }
      
      改變多個(gè)屬性則用逗號(hào)分開(kāi)，或用all；
      直接用 all 最常見(jiàn)；
      
      原文鏈接：https://blog.csdn.net/qq_42680313/article/details/105587567

7. 7）用localstorage和sessionStorage寫(xiě)過(guò)什么？

   1. sessionStorage用作臨時(shí)交流的留言板或是交流記錄

   2. 用localStorage做過(guò)記住用戶(hù)名和密碼的功能，做過(guò)小游戲最高分和排行榜

8. 8）如何解決頁(yè)面內(nèi)容加載緩慢的問(wèn)題？

   1. 一、優(yōu)化圖片

      幾乎沒(méi)有哪個(gè)網(wǎng)頁(yè)上是沒(méi)有圖片的。如果你經(jīng)歷過(guò)56K貓的年代，你一定不會(huì)很喜歡有大量圖片的網(wǎng)站。因?yàn)榧虞d那樣一個(gè)網(wǎng)頁(yè)會(huì)花費(fèi)大量的時(shí)間。

      即使在現(xiàn)在，網(wǎng)絡(luò)帶寬有了很多的提高，56K貓逐漸淡出，優(yōu)化圖片以加快網(wǎng)頁(yè)速度還是很有必要的。

      優(yōu)化圖片包括減少圖片數(shù)、降低圖像質(zhì)量、使用恰當(dāng)?shù)母袷健?/span>

      1、減少圖片數(shù)：去除不必要的圖片。可以將大量的背景圖整合成一張雪碧圖

      2、降低圖像質(zhì)量：如果不是很必要，嘗試降低圖像的質(zhì)量，尤其是jpg格式，降低5%的質(zhì)量看起來(lái)變化不是很大，但文件大小的變化是比較大的。

      3、使用恰當(dāng)?shù)母袷剑赫?qǐng)參閱下一點(diǎn)。

      因此，在上傳圖片之前，你需要對(duì)圖片進(jìn)行編輯，如果你覺(jué)得photoshop太麻煩，可以試試一些在線圖片編輯工具。懶得編輯而又想圖片有特殊的效果？可以試試用過(guò)調(diào)用javascript來(lái)實(shí)現(xiàn)圖片特效。

      二、圖像格式的選擇

      一般在網(wǎng)頁(yè)上使用的圖片格式有三種，jpg、png、gif。三種格式的具體技術(shù)指標(biāo)不是這篇文章探討的內(nèi)容，我們只需要知道在什么時(shí)候應(yīng)該使用什么格式，以減少網(wǎng)頁(yè)的加載時(shí)間。

      1、JPG：一般用于展示風(fēng)景、人物、藝術(shù)照的攝影作品。有時(shí)也用在電腦截屏上。

      2、GIF：提供的顏色較少，可用在一些對(duì)顏色要求不高的地方，比如網(wǎng)站logo、按鈕、表情等等。當(dāng)然，gif的一個(gè)重要的應(yīng)用是動(dòng)畫(huà)圖片。就像用Lunapic制作的倒映圖片。

      3、PNG：PNG格式能提供透明背景，是一種專(zhuān)為網(wǎng)頁(yè)展示而發(fā)明的圖片格式。一般用于需要背景透明顯示或?qū)D像質(zhì)量要求較高的網(wǎng)頁(yè)上。

      三、優(yōu)化CSS

      CSS疊層樣式表讓網(wǎng)頁(yè)加載起來(lái)更高效，瀏覽體驗(yàn)也得到提高。有了CSS，表格布局的方式可以退休了。

      但有時(shí)我們?cè)趯?xiě)CSS的時(shí)候會(huì)使用了一些比較羅嗦的語(yǔ)句，比如這句：

      以下為引用的內(nèi)容： margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;

      你可以將它簡(jiǎn)化為：

      margin: 10px 20px 10px 20px;

      又或者這句：

      以下為引用的內(nèi)容： <p class="decorated">A paragraph of decorated text</p> <p class="decorated">Second paragraph</p> <p class="decorated">Third paragraph</p> <p class="decorated">Forth paragraph</p>

      可以用div來(lái)包含：

      以下為引用的內(nèi)容： <div class="decorated"> <p>A paragraph of decorated text</p> <p>Second paragraph</p> <p>Third paragraph</p> <p>Forth paragraph</p> </div>

      簡(jiǎn)化CSS能去除冗余的屬性，提高運(yùn)行效率。如果你寫(xiě)好CSS后懶得去做簡(jiǎn)化，你可以使用一些在線的簡(jiǎn)化CSS工具，比如CleanCSS。

      四、網(wǎng)址后加斜杠

      有些網(wǎng)址，比如"www.kenengba.com/220"，當(dāng)服務(wù)器收到這樣一個(gè)地址請(qǐng)求的時(shí)候，它需要花費(fèi)時(shí)間去確定這個(gè)地址的文件類(lèi)型。如果220是一個(gè)目錄，不妨在網(wǎng)址后多加一個(gè)斜杠，讓其變成www.kenengba.com/220/，這樣服務(wù)器就能一目了然地知道要訪問(wèn)該目錄下的index或default文件，從而節(jié)省了加載時(shí)間。

      五、標(biāo)明高度和寬度

      這點(diǎn)很重要，但很多人由于懶惰或其它原因，總是將其忽視。當(dāng)你在網(wǎng)頁(yè)上添加圖片或表格時(shí)，你應(yīng)該指定它們的高度和寬度，也就是height和width參數(shù)。如果瀏覽器沒(méi)有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度，也影響瀏覽體驗(yàn)。

      下面是一個(gè)比較友好的圖片代碼：

      <img id="moon" height="200" width="450" src="http://www.kenengba.com/moon.png" alt="moon image" />

      當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無(wú)法顯示，頁(yè)面上也會(huì)騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了。

      六、減少http請(qǐng)求

      當(dāng)瀏覽者打開(kāi)某個(gè)網(wǎng)頁(yè)，瀏覽器會(huì)發(fā)出很多對(duì)象請(qǐng)求（圖像、腳本等等），視乎網(wǎng)絡(luò)延時(shí)情況，每個(gè)對(duì)象加載都會(huì)有所延遲。如果網(wǎng)頁(yè)上對(duì)象很多，這可以需要花費(fèi)大量的時(shí)間。

      因此，要為http請(qǐng)求減負(fù)。如何減負(fù)？

      1、去除一些不必要的對(duì)象。

      2、將臨近的兩張圖片合成一張。

      3、合并CSS

      看看下面這段代碼，需要加載三個(gè)CSS：

      以下為引用的內(nèi)容： <link rel="stylesheet" type="text/css" href="/body.css" /> <link rel="stylesheet" type="text/css" href="/side.css" /> <link rel="stylesheet" type="text/css" href="/footer.css" />

      我們可以將其合成一個(gè)：

      <link rel="stylesheet" type="text/css" href="/style.css" />

      從而減少http請(qǐng)求。

      七、其它小技巧（譯者添加）

      1、去除不必要加載項(xiàng)。

      2、如果在網(wǎng)頁(yè)上嵌入了其它網(wǎng)站的widget，如果有選擇余地，一定要選擇速度快的。

      3、盡量用圖片代替flash，這對(duì)SEO也有好處。

      4、有些內(nèi)容可以靜態(tài)化就將其靜態(tài)化，以減少服務(wù)器的負(fù)擔(dān)。

      5、統(tǒng)計(jì)代碼放在頁(yè)尾。

      6、盡量不要用一個(gè)很小的圖片當(dāng)背景，這樣做會(huì)加大客戶(hù)端CPU處理時(shí)間

      7，靜態(tài)資源使用cdn? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 8，增加服務(wù)器帶寬? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?9，如果用戶(hù)多的話(huà)，使用高并發(fā)? ? ? ? ? ? ? ? ? ? ? ? ? ?

9. 9）cookie的特點(diǎn)*

   1. 一、cookie的特點(diǎn)：
      1、cookie不可跨域
      2、cookie存儲(chǔ)在瀏覽器里面
      3、cookie有數(shù)量與大小的限制
      1）數(shù)量在50個(gè)左右
      2）大小在4kb左右
      4、cookie的存儲(chǔ)時(shí)間非常靈活
      5、cookie不光可以服務(wù)器設(shè)置（用set-cookie），也可以客戶(hù)端設(shè)置。
      document.cookie
      key:value

      二、cookie的屬性
      1、name cookie的名字，唯一性
      2、value cookie的值
      3、domain 設(shè)置cookie在哪個(gè)域名下是有效的
      4、path cookie的路徑
      5、expires cookie的過(guò)期時(shí)間
      6、max-age cookie的有效期,
      值：-1 臨時(shí)cookie，0有效期夠了的 cookie，正數(shù)存活周期
      7、HttpOnly 有這個(gè)標(biāo)記的cookie，前端是無(wú)法獲取的
      8、Secure 設(shè)置cookie只能通過(guò)https協(xié)議傳輸
      9、SameSite 設(shè)置cookie在跨域請(qǐng)求的時(shí)候不能被發(fā)送。
      ?

10. 10）頁(yè)面渲染過(guò)程

    1. 1、解析HMTML標(biāo)簽，構(gòu)建DOM樹(shù)
       ? ? ? ?HTML 文檔中的所有內(nèi)容皆是節(jié)點(diǎn)，各節(jié)點(diǎn)之間擁有層級(jí)關(guān)系，如父子關(guān)系、兄弟關(guān)系等，彼此相連，構(gòu)成DOM樹(shù)。最常見(jiàn)的幾種節(jié)點(diǎn)有：文檔節(jié)點(diǎn)、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)、注釋節(jié)點(diǎn)。

       DOM節(jié)點(diǎn)樹(shù)中節(jié)點(diǎn)與HTML文檔中內(nèi)容一一對(duì)應(yīng)，DOM樹(shù)構(gòu)建過(guò)程：讀取html文檔，將字節(jié)轉(zhuǎn)換成字符，確定tokens（標(biāo)簽），再將tokens轉(zhuǎn)換成節(jié)點(diǎn)，以節(jié)點(diǎn)構(gòu)建 DOM 樹(shù)。

       2、解析CSS，構(gòu)建CSSOM樹(shù)
       ? ? ? ? CSS文檔中，所有元素皆是節(jié)點(diǎn)，與HTML文件中的標(biāo)簽節(jié)點(diǎn)一一對(duì)應(yīng)。CSS中各節(jié)點(diǎn)之間同樣擁有層級(jí)關(guān)系，如父子關(guān)系、兄弟關(guān)系等，彼此相連，構(gòu)成CSSOM樹(shù)。

       在構(gòu)建DOM樹(shù)的過(guò)程中，在 HTML 文檔的 head 標(biāo)簽中遇到 link 標(biāo)簽，該標(biāo)簽引用了一個(gè)外部CSS樣式表。由于預(yù)見(jiàn)到需要利用該CSS資源來(lái)渲染頁(yè)面，瀏覽器會(huì)立即發(fā)出對(duì)該CSS資源的請(qǐng)求，并進(jìn)行CSSDOM樹(shù)的構(gòu)建。

       CSSOM樹(shù)構(gòu)建過(guò)程與DOM樹(shù)構(gòu)建流程一致：讀取CSS文檔，將字節(jié)轉(zhuǎn)換成字符，確定tokens（標(biāo)簽），再將tokens轉(zhuǎn)換成節(jié)點(diǎn)，以節(jié)點(diǎn)構(gòu)建 CSSOM 樹(shù)。

       3、把DOM和CSSOM組合成渲染樹(shù)（render tree）
       ? ? ??

       ? ? ? ? 渲染樹(shù)（Render Tree）由DOM樹(shù)、CSSOM樹(shù)合并而成，但并不是必須等DOM樹(shù)及CSSOM樹(shù)加載完成后才開(kāi)始合并構(gòu)建渲染樹(shù)。三者的構(gòu)建并無(wú)先后條件，亦非完全獨(dú)立，而是會(huì)有交叉，并行構(gòu)建。因此會(huì)形成一邊加載，一邊解析，一邊渲染的工作現(xiàn)象。

       構(gòu)建渲染樹(shù)，根據(jù)渲染樹(shù)計(jì)算每個(gè)可見(jiàn)元素的布局，并輸出到繪制流程，將像素渲染到屏幕上。

       4.在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
       ?4.1重繪（repaint）：屏幕的一部分要重繪。渲染樹(shù)節(jié)點(diǎn)發(fā)生改變，但不影響該節(jié)點(diǎn)在頁(yè)面當(dāng)中的空間位置及大小。譬如某個(gè)div標(biāo)簽節(jié)點(diǎn)的背景顏色、字體顏色等等發(fā)生改變，但是該div標(biāo)簽節(jié)點(diǎn)的寬、高、內(nèi)外邊距并不發(fā)生變化，此時(shí)觸發(fā)瀏覽器重繪（repaint）。

       ?4.2重排（reflow）：也有稱(chēng)回流，當(dāng)渲染樹(shù)節(jié)點(diǎn)發(fā)生改變，影響了節(jié)點(diǎn)的幾何屬性（如寬、高、內(nèi)邊距、外邊距、或是float、position、display：none;等等），導(dǎo)致節(jié)點(diǎn)位置發(fā)生變化，此時(shí)觸發(fā)瀏覽器重排（reflow），需要重新生成渲染樹(shù)。譬如JS為某個(gè)p標(biāo)簽節(jié)點(diǎn)添加新的樣式："display:none;"。導(dǎo)致該p標(biāo)簽被隱藏起來(lái)，該p標(biāo)簽之后的所有節(jié)點(diǎn)位置都會(huì)發(fā)生改變。此時(shí)瀏覽器需要重新生成渲染樹(shù)，重新布局，即重排（reflow）。

       注意：重排必將引起重繪，而重繪不一定會(huì)引起重排。

       何時(shí)回引起重排？

       當(dāng)頁(yè)面布局和幾何屬性改變時(shí)就需要重排。下述情況會(huì)發(fā)生瀏覽器重排：

       1、添加或者刪除可見(jiàn)的DOM元素；

       2、元素位置改變——display、float、position、overflow等等；

       3、元素尺寸改變——邊距、填充、邊框、寬度和高度

       4、內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計(jì)算值寬度和高度改變；

       5、頁(yè)面渲染初始化；

       6、瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)；

       4.3如何減少和避免重排

       Reflow 的成本比 Repaint 的成本高得多的多。一個(gè)節(jié)點(diǎn)的 Reflow 很有可能導(dǎo)致子節(jié)點(diǎn)，甚至父節(jié)點(diǎn)以及兄弟節(jié)點(diǎn)的 Reflow 。在一些高性能的電腦上也許還沒(méi)什么，但是如果 Reflow 發(fā)生在手機(jī)上，那么這個(gè)過(guò)程是延慢加載和耗電的。----瀏覽器的渲染原理簡(jiǎn)介

       1. 直接改變className，如果動(dòng)態(tài)改變樣式，則使用cssText（考慮沒(méi)有優(yōu)化的瀏覽器）；

       2. 讓要操作的元素進(jìn)行”離線處理”，處理完后一起更新；

       a) 使用DocumentFragment進(jìn)行緩存操作,引發(fā)一次回流和重繪；
       b) 使用display:none技術(shù)，只引發(fā)兩次回流和重繪；
       c) 使用cloneNode(true or false) 和 replaceChild 技術(shù)，引發(fā)一次回流和重繪；

       3.不要經(jīng)常訪問(wèn)會(huì)引起瀏覽器flush隊(duì)列的屬性，如果你確實(shí)要訪問(wèn)，利用緩存；

       4. 讓元素脫離動(dòng)畫(huà)流，減少回流的Render Tree的規(guī)模；

       5、把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）
       
       原文鏈接：https://blog.csdn.net/m0_56551554/article/details/121789562https://blog.csdn.net/m0_56551554/article/details/121789562

11. 11）網(wǎng)頁(yè)上哪里可以看到請(qǐng)求的所有信息

    1. ?

       以谷歌瀏覽器為例：

       按下f12打開(kāi)控制臺(tái) 找到Network就可以看見(jiàn)網(wǎng)頁(yè)請(qǐng)求的所有信息了

       ? ? ? ? ? ? ? ??

12. 12）HTML5的新特性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

    HTML新特性
    1：語(yǔ)義化標(biāo)簽
    通過(guò)語(yǔ)義化標(biāo)簽，可以讓頁(yè)面有更加完善的結(jié)構(gòu)，讓頁(yè)面的元素有含義，同時(shí)利于被搜索引擎解析，有利于SEO，主要標(biāo)簽包括下面的標(biāo)簽：

    標(biāo)簽?? ?描述
    header?? ?表示文檔的頭部區(qū)域
    footer?? ?表示文檔的尾部區(qū)域
    nav?? ?表示文檔導(dǎo)航部分
    section?? ?表示文檔的某一節(jié)
    article?? ?表示文章
    main?? ?表示文檔主要的內(nèi)容區(qū)域
    2：增強(qiáng)型表單
    例如可以通過(guò)input的type屬性指定類(lèi)型是number還是date或者url，同時(shí)還添加了placeholder和required等表單屬性。

    3. 媒體元素
    新增了audio和video兩個(gè)媒體相關(guān)的標(biāo)簽，可以讓開(kāi)發(fā)人員不必以來(lái)任何插件就能在網(wǎng)頁(yè)中嵌入瀏覽器的音頻和視頻內(nèi)容。

    4. canvas繪圖
    canvas繪圖指的是在頁(yè)面中設(shè)定一個(gè)區(qū)域，然后通過(guò)JS動(dòng)態(tài)的在這個(gè)區(qū)域繪制圖形。

    5. svg繪圖
    這一部分不詳細(xì)展開(kāi)，想要了解的小伙伴可以參考其他文章~

    6. 地理定位
    使用getCurrentPosition()方法來(lái)獲取用戶(hù)的位置，從而實(shí)現(xiàn)隊(duì)地理位置的定位。

    7. 拖放API
    通過(guò)給標(biāo)簽元素設(shè)置屬性draggable值為true，能夠?qū)崿F(xiàn)對(duì)目標(biāo)元素的拖動(dòng)。

    8. Web Worker
    Web Worker通過(guò)加載一個(gè)腳本文件，進(jìn)而創(chuàng)建一個(gè)獨(dú)立工作的線程，在主線程之外運(yùn)行，worker線程運(yùn)行結(jié)束之后會(huì)把結(jié)果返回給主線程，worker線程可以處理一些計(jì)算密集型的任務(wù)，這樣主線程就會(huì)變得相對(duì)輕松，這并不是說(shuō)JS具備了多線程的能力，而實(shí)瀏覽器作為宿主環(huán)境提供了一個(gè)JS多線程運(yùn)行的環(huán)境。

    9. Web Storage
    關(guān)于Web Storage部分，大家需要重點(diǎn)掌握的是cookie、Localstorage和SessionStorage三者之間的區(qū)別：

    10. Websocket
    關(guān)于websocket協(xié)議，大家主要需要記住的就是websocket和HTTP的區(qū)別。

    相同點(diǎn)
    HTTP和Websocket都是基于TCP的應(yīng)用層協(xié)議。

    不同點(diǎn)
    websocket是雙向通信協(xié)議，模擬socket協(xié)議，可以雙向發(fā)送和接受消息，HTTP是單向的，意思是說(shuō)通信只能由客戶(hù)端發(fā)起。
    websocket是需要瀏覽器和服務(wù)器通過(guò)握手建立連接，但是HTTP是瀏覽器向服務(wù)器發(fā)送連接，服務(wù)器預(yù)先不知道這個(gè)連接。

    聯(lián)系
    websocket建立握手時(shí)需要基于HTTP進(jìn)行傳輸，建立連接之后呢便不再需要HTTP協(xié)議了。
    
    原文鏈接：https://blog.csdn.net/sinat_41696687/article/details/123159705

13. 13）localstore和sessionstore的區(qū)別

????????????????

LocalStorge和sessionStorage之間的區(qū)別
localStorage
localStorage的生命周期是永久性的，也就是說(shuō)使用localStorage存儲(chǔ)數(shù)據(jù)，數(shù)據(jù)會(huì)被永久保存，數(shù)據(jù)不會(huì)因?yàn)榇翱诨驗(yàn)g覽器的關(guān)閉而消失，除非主動(dòng)的去刪除數(shù)據(jù)。

localStorage有l(wèi)ength屬性，可以通過(guò)控制臺(tái)查看其有多少條記錄的數(shù)據(jù)。

var storage = null;
storage.setItem("key","value") ? //調(diào)用setItem方法存儲(chǔ)數(shù)據(jù)
storage.getItem("key")?? ??? ??? ?//調(diào)用getItem方法獲取key的值
stroage.removeItem("key")?? ??? ?//刪除key對(duì)應(yīng)的值
stroage.clear()?? ??? ??? ??? ? ? //清空數(shù)據(jù)

sessionStorage
sessionStorage的生命周期相比localStorage來(lái)說(shuō)很短，其周期在窗口關(guān)閉時(shí)結(jié)束。也就是說(shuō)，當(dāng)瀏覽器窗口關(guān)閉，sessionStorage的使命就已經(jīng)結(jié)束，其保留的數(shù)據(jù)也會(huì)被清除。

sessionStorage也擁有l(wèi)ength屬性，兩者的使用方法也是一致的，但和localstorage比較，仍有一些區(qū)別。

頁(yè)面刷新不會(huì)消除已獲得的數(shù)據(jù)
這里我寫(xiě)了兩個(gè)html文件(test1.html / test2.html)來(lái)進(jìn)行說(shuō)明：

因?yàn)槠鶈?wèn)題，所以只取了部分需要注意的代碼段

這是test1.html的部分代碼：

<body>
? ? <button>跳轉(zhuǎn)按鈕</button>
? ? <div>頁(yè)面的作用:在 sessionStorage 中存數(shù)據(jù)</div>
? ? <script>
? ? ? ? var Data = window.sessionStorage;
? ? ? ? console.log(Data)
? ? ? ? var str = 'sessionData'
? ? ? ? // sessionStorage 存儲(chǔ)數(shù)據(jù)?
? ? ? ? Data.setItem('code',str)
? ? ? ? document.getElementsByTagName('button')[0].onclick = function(){
? ? ? ? ? ? window.location.href = './test2.html'
? ? ? ? }
? ? </script>
</body>

test2.html的部分代碼：

<body>
? ? <div>我是test2頁(yè)面</div>
? ? <script>
? ? ? ??
? ? ? var sessionData = sessionStorage.getItem('code')
? ? ? console.log(sessionData)
? ? ? console.log(sessionStorage.getItem('code'))
? ? </script>
</body>

打開(kāi)test1頁(yè)面，可以看見(jiàn)跳轉(zhuǎn)按鈕以及一段文字：頁(yè)面的作用:在 sessionStorage 中存數(shù)據(jù)；

打開(kāi)控制器，可以看見(jiàn)已經(jīng)傳入了 code 以及它的值 sessionData;

這時(shí)點(diǎn)擊跳轉(zhuǎn)按鈕，會(huì)看見(jiàn)頁(yè)面刷新，進(jìn)入test2頁(yè)面，顯示“我是test2頁(yè)面”

sessionStorage 在test1窗口關(guān)閉前；就保存數(shù)據(jù)了。換一個(gè)新的窗口(test2)；也不會(huì)有數(shù)據(jù)改變

sessionStorage.getItem(key) 獲取sessionStorage的數(shù)據(jù)中value值
?

• 14）頁(yè)面之間是怎么傳參數(shù)的？

????????????????

1.cookie 傳值。

?缺點(diǎn): cookie儲(chǔ)存是需要服務(wù)器支持的，本地直接運(yùn)行靜態(tài)文件是實(shí)現(xiàn)不了的。cookie能夠存儲(chǔ)少量數(shù)據(jù)到客戶(hù)端的磁盤(pán)中，特定的網(wǎng)頁(yè)之間是可以共享cookie中的數(shù)據(jù)。

2.LocalStorage和SessionStorage傳值。

?優(yōu)點(diǎn):本地靜態(tài)文件可支持。在HTML5中，新加入了一個(gè)localStorage特性，這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的，解決了cookie存儲(chǔ)空間不足的問(wèn)題(cookie中每條cookie的存儲(chǔ)空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同。此方法類(lèi)似cookie，將數(shù)據(jù)存在一個(gè)公共的地方，實(shí)現(xiàn)頁(yè)面之間傳值。

?3.get方式，Url傳值.。

優(yōu)點(diǎn): 速度快. cookie 和 LocalStorage和SessionStorage 都存在速度慢,反應(yīng)不過(guò)來(lái)的問(wèn)題, 我在a頁(yè)面寫(xiě)進(jìn)去,在b頁(yè)面讀出來(lái).有時(shí)會(huì)讀到空值。post提交表單跳轉(zhuǎn)的方式肯定不行了，因服務(wù)端并不處理這些請(qǐng)求參數(shù)，連到達(dá)客戶(hù)端的機(jī)會(huì)都沒(méi)有。

4.window.open和window.opener之間傳值

window.open可以打開(kāi)一個(gè)新的頁(yè)面，在新的頁(yè)面中可以通過(guò)window.opener獲取父頁(yè)面的窗口對(duì)象，從而可以獲取父窗口中的參數(shù)。

如：var content = window.opener.document.getElementById("open").innerHTML;?
?

• 15）如何在瀏覽器查看和清除localstrorage保存的數(shù)據(jù)？

????????1.按下F12打開(kāi)開(kāi)發(fā)人員工具
????????2.點(diǎn)擊切換到 Application
????????3.點(diǎn)擊LocalStorage?即可查看到保存過(guò)的數(shù)據(jù)信息

如何清除數(shù)據(jù)？
點(diǎn)擊上方的Clear storage 點(diǎn)擊 Clear site data即可刪除數(shù)據(jù)

• 16）對(duì)H5新增的語(yǔ)義化標(biāo)簽的理解？

一、 語(yǔ)義化標(biāo)簽是什么？

常用的語(yǔ)義化標(biāo)簽包括

<header></header>頭部

<nav></nav>導(dǎo)航欄

<section></section>區(qū)塊（有語(yǔ)義化的div）

<main></main>主要區(qū)域

<artical></artical>主要內(nèi)容

<aside></aside>側(cè)邊欄

<footer></footer>底部

二、 為什么會(huì)用語(yǔ)義化標(biāo)簽？

平時(shí)，我們都會(huì)采用DIV+CSS布局我們的頁(yè)面。但是這樣的布局方式不僅使我們的文檔結(jié)構(gòu)不夠清晰，而且不利于瀏覽器對(duì)頁(yè)面的讀取。所以HTML5新增了很多新的語(yǔ)義化標(biāo)簽。并且，在我們未給頁(yè)面添加css樣式時(shí)，用戶(hù)體驗(yàn)并不好。語(yǔ)義化標(biāo)簽也能讓瀏覽器更好的讀取頁(yè)面結(jié)構(gòu)。再就是便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

css相關(guān)

• 17）CSS選擇器的優(yōu)先級(jí)排序，怎么計(jì)算權(quán)值？

一、各個(gè)類(lèi)型選擇器的權(quán)重

* 第零等：!important，大過(guò)了其它任何設(shè)置。
* 第一等：代表內(nèi)聯(lián)樣式，如：style=''，權(quán)值為1000。
* 第二等：代表ID選擇器，如：#content，權(quán)值為0100。
* 第三等：代表類(lèi)、偽類(lèi)和屬性選擇器，如.content，權(quán)值為0010。
* 第四等：代表標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)值為0001。
* 第五等：通配符、子選擇器、相鄰選擇器等的。如*、>、+，權(quán)值為0000。
* 第六等：繼承的樣式?jīng)]有權(quán)值，通配選擇器定義的規(guī)則優(yōu)先級(jí)高于元素繼承過(guò)來(lái)的規(guī)則的優(yōu)先級(jí)。

二、!important
!important的作用是提升優(yōu)先級(jí)，換句話(huà)說(shuō)，加了這句的樣式的優(yōu)先級(jí)是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級(jí)還高)。
1
三、CSS優(yōu)先級(jí)規(guī)則

* css選擇器的權(quán)值不同時(shí)，權(quán)值高的選擇器優(yōu)先；
* css選擇器的權(quán)值相同時(shí)，后定義的選擇器優(yōu)先；
* css屬性后面加!important時(shí)，無(wú)條件絕對(duì)優(yōu)先；
* 總結(jié)：
* !important > 行內(nèi)樣式 > id選擇器 > 類(lèi)選擇器 || 偽類(lèi)選擇器 || 屬性選擇器 > 標(biāo)簽選擇器 || 偽元素選擇器 > 通配符選擇器 || 子選擇器 || 相鄰選擇器 > 繼承樣式

* 注意:
* !important規(guī)則被應(yīng)用在一個(gè)樣式聲明中時(shí)，該樣式聲明會(huì)覆蓋CSS中任何其他對(duì)該元素的聲明，無(wú)論它處在聲明列表中的哪個(gè)位置。
* 但是注意，使用!important樣式很難調(diào)試，因?yàn)樗淖兞四銟邮奖緛?lái)的權(quán)值規(guī)則。

四、權(quán)值如何進(jìn)行比較
?

* 當(dāng)兩個(gè)權(quán)值進(jìn)行比較時(shí)，從高位到低位逐位進(jìn)行比較，從高等級(jí)開(kāi)始比較。
* 如果相同等級(jí)的權(quán)值相同，再繼續(xù)進(jìn)行下一個(gè)等級(jí)的比較。
* 如果不相同，直接應(yīng)用相同等級(jí)權(quán)值比較大的選擇器對(duì)應(yīng)的樣式。而不是把四個(gè)等級(jí)的權(quán)值加起來(lái)進(jìn)行比較。
* 如果某個(gè)樣式后面加了!important，則絕對(duì)優(yōu)先，比內(nèi)聯(lián)樣式更優(yōu)先。

同一個(gè)選擇器，同一個(gè)屬性設(shè)置了兩次或多次樣式，則后設(shè)置的樣式會(huì)覆蓋之前的樣式

原文鏈接：https://blog.csdn.net/qq_39090575/article/details/110703916

• 18）display：none和visibility：hidden的區(qū)別

很多人認(rèn)為visibility: hidden和display: none的區(qū)別僅僅在于display: none隱藏后的元素不占據(jù)任何空間，而visibility: hidden隱藏后的元素空間依舊保留 ，實(shí)際上沒(méi)那么簡(jiǎn)單，visibility是一個(gè)非常有故事性的屬性

visibility具有繼承性，給父元素設(shè)置visibility:hidden;子元素也會(huì)繼承這個(gè)屬性。但是如果重新給子元素設(shè)置visibility: visible,則子元素又會(huì)顯示出來(lái)。這個(gè)和display: none有著質(zhì)的區(qū)別 ：父元素設(shè)置display:none; 子元素設(shè)置display:block;后子元素不會(huì)顯示

visibility: hidden不會(huì)影響計(jì)數(shù)器的計(jì)數(shù)，visibility: hidden雖然讓一個(gè)元素不見(jiàn)了，但是其計(jì)數(shù)器仍在運(yùn)行。這和display: none完全不一樣

• 19）CSS的繼承選擇器，.one. two和.one > .two的區(qū)別？?jī)蓚€(gè)同級(jí)類(lèi)選擇器連著一起寫(xiě)有什么作用？(權(quán)值相加)

1、CSS的繼承選擇器，.one .two和.one>.two的區(qū)別？
.one .two，匹配.one下所有包含.two的標(biāo)簽，包含所有后代元素

.one>.two，匹配.one下子元素中包含.two的標(biāo)簽，只包含.one的子級(jí)元素

2、兩個(gè)同級(jí)類(lèi)選擇器連著一起寫(xiě)有什么作用？（.one.two）
權(quán)值相加，匹配既包含.one又包含.two類(lèi)名的標(biāo)簽

原文鏈接：https://blog.csdn.net/qq_39090575/article/details/113074619

• 20）CSS的引用方式有哪些？它們的區(qū)別？

方式一：內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式也叫行內(nèi)樣式，指的是直接在HTML標(biāo)簽中的 style 屬性中添加 css。

示例：

<div style="width: 100px; height: 100px"></div>

這種方式只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) div 標(biāo)簽擁有相同的樣式，就只能重復(fù)的為每個(gè) div 添加和修改相同的樣式，還會(huì)使HTML代碼變得冗長(zhǎng)，并且難以維護(hù)。所以一般不推薦使用內(nèi)聯(lián)樣式引入CSS樣式。

方式二：嵌入樣式

嵌入樣式指的是在HTML頭部中的 style 標(biāo)簽中寫(xiě)入CSS代碼。

示例：

<head>
? ? <style>
? ? .div {
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? }
? ? </style>
</head>

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 樣式時(shí)，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。但是，因?yàn)?CSS 代碼在HTML文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫(xiě)模板網(wǎng)頁(yè)時(shí)，這樣比較寫(xiě)比較好，因?yàn)榭梢宰屓艘荒苛巳坏夭榭?HTML 結(jié)構(gòu)和 CSS 樣式。

方式三：鏈接樣式

鏈接方式指的是使用HTML頭部的標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
? ? <link rel="stylesheet" type="text/css" href="index.css">
</head>

鏈接方式是最常見(jiàn)也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性，并且所有的 CSS 代碼只存在于 CSS 文件中，CSS文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可，并且其他頁(yè)面需要相同的 CSS 樣式時(shí)可以復(fù)用。

方式四：導(dǎo)入樣式

導(dǎo)入樣式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例;

<style type="text/css">
? ? @import url(style.css);
</style>

或者

<style type="text/css">
? ? @import url("index.css");
</style>

或者

<style type="text/css">
? ? @import "index.css";
</style>

原文鏈接：https://blog.csdn.net/m0_48298027/article/details/110651878

• 21）css有哪些選擇符？可繼承的屬性有哪些？css3新增的偽元素有哪些？css優(yōu)先級(jí)的計(jì)算

一、CSS 選擇符：
1.id選擇器(# myid)
2.類(lèi)選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p，span)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li,ol>li)
6.后代選擇器(li a)
7.通配符選擇器，也稱(chēng)全局選擇器( * )
8.屬性選擇器(a[rel = “external”])
9.偽類(lèi)選擇器(a: hover, li:nth-child)

二、可繼承的樣式：
1.font-size
2.font-family
3.color
4.text-indent

三、不可繼承的樣式：
1.border
2.padding
3.margin
4.width
5.height

四、優(yōu)先級(jí)算法：
1.優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
2.載入樣式以最后載入的定位為準(zhǔn);
3.!important > 內(nèi)聯(lián)樣式>id選擇器>calss選擇器>標(biāo)簽選擇器和偽元素選擇器>通配符、子選擇器、相鄰選擇器等>繼承的樣式?jīng)]有權(quán)值
4.important 比 內(nèi)聯(lián)優(yōu)先級(jí)高，但內(nèi)聯(lián)比 id 要高

五、CSS3新增偽類(lèi)舉例：
p:first-of-type：選擇屬于其父元素的首個(gè)p元素的每個(gè)p元素。
p:last-of-type：選擇屬于其父元素的最后p元素的每個(gè)p元素。
p:only-of-type：選擇屬于其父元素唯一的p元素的每個(gè)p元素。
p:only-child：選擇屬于其父元素的唯一子元素的每個(gè)p元素。
p:nth-child(2)：選擇屬于其父元素的第二個(gè)子元素的每個(gè)p元素。
:enabled： disabled 控制表單控件的禁用狀態(tài)。
:checked： 單選框或復(fù)選框被選中。
?

• 22）fixed和absolute的區(qū)別？

fixed:固定定位? ? absolute:絕對(duì)定位? 兩者都會(huì)使元素脫離文檔流

區(qū)別很簡(jiǎn)單：

1、沒(méi)有滾動(dòng)條的情況下沒(méi)有差異

2、在有滾動(dòng)條的情況下，fixed定位不會(huì)隨滾動(dòng)條移動(dòng)而移動(dòng)，而absolute則會(huì)隨滾動(dòng)條移動(dòng)

常用場(chǎng)合：

1.fixed固定定位，只針對(duì)瀏覽器窗口定位，上下左右，不會(huì)隨著窗口大小改變，固定不變，例如固定位置的小廣告，常用于網(wǎng)站邊緣的公司聯(lián)系方式和快速回到頂部

2.absolute絕對(duì)定位，脫離文檔流，相對(duì)于有最近的具有相對(duì)定位的上級(jí)父元素或者祖宗元素定位，如果依次向上找沒(méi)找到具有相對(duì)定位的上級(jí)元素，則相對(duì)于瀏覽器窗口定位
?

• 23）如何實(shí)現(xiàn)水平、垂直居中？

1、利用定位+margin:auto
父級(jí)設(shè)置為相對(duì)定位，子級(jí)絕對(duì)定位 ，并且四個(gè)定位屬性的值都設(shè)置了0，那么這時(shí)候如果子級(jí)沒(méi)有設(shè)置寬高，則會(huì)和父元素寬高相同，完全覆蓋

這里子元素設(shè)置了寬高，所以寬高會(huì)按照我們的設(shè)置來(lái)顯示，但是實(shí)際上子級(jí)的虛擬占位已經(jīng)撐滿(mǎn)了整個(gè)父級(jí)，這時(shí)候再給它一個(gè)margin：auto它就可以上下左右都居中了

<style>
? ? .father{
? ? ? ? width:500px;
? ? ? ? height:300px;
? ? ? ? border:1px solid #0a3b98;
? ? ? ? position: relative;
? ? }
? ? .son{
? ? ? ? width:100px;
? ? ? ? height:40px;
? ? ? ? background: #f0a238;
? ? ? ? position: absolute;
? ? ? ? top:0;
? ? ? ? left:0;
? ? ? ? right:0;
? ? ? ? bottom:0;
? ? ? ? margin:auto;
? ? }
</style>
<div class="father">
? ? <div class="son"></div>
</div>

2、利用定位+margin:負(fù)值

<style>
? ? .father {
? ? ? ? position: relative;
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: skyblue;
? ? }
? ? .son {
? ? ? ? position: absolute;
? ? ? ? top: 50%;
? ? ? ? left: 50%;
? ? ? ? margin-left:-50px;
? ? ? ? margin-top:-50px;
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? background: red;
? ? }
</style>
<div class="father">
? ? <div class="son"></div>
</div>

初始位置為方塊1的位置
當(dāng)設(shè)置left、top為50%的時(shí)候，內(nèi)部子元素為方塊2的位置
設(shè)置margin為負(fù)數(shù)時(shí)，使內(nèi)部子元素到方塊3的位置，即中間位置
這種方案不要求父元素的高度，也就是即使父元素的高度變化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一樣的操作

但是該方案需要知道子元素自身的寬高，但是我們可以通過(guò)下面transform屬性進(jìn)行移動(dòng)

3、利用定位+transform
translate(-50%, -50%)將會(huì)將元素位移自己寬度和高度的-50%

這種方法其實(shí)和最上面被否定掉的margin負(fù)值用法一樣，可以說(shuō)是margin負(fù)值的替代方案，并不需要知道自身元素的寬高

<style>
? ? .father {
? ? ? ? position: relative;
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: skyblue;
? ? }
? ? .son {
? ? ? ? position: absolute;
? ? ? ? top: 50%;
? ? ? ? left: 50%;
? transform: translate(-50%,-50%);
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? background: red;
? ? }
</style>
<div class="father">
? ? <div class="son"></div>
</div>

4、table布局

<style>
? ? .father {
? ? ? ? display: table-cell;
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: skyblue;
? ? ? ? vertical-align: middle;
? ? ? ? text-align: center;
? ? }
? ? .son {
? ? ? ? display: inline-block;
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? background: red;
? ? }
</style>
<div class="father">
? ? <div class="son"></div>
</div>

5、flex布局

<style>
? ? .father {
? ? ? ? display: flex;
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: skyblue;
? ? }
? ? .son {
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? background: red;
? ? }
</style>
<div class="father">
? ? <div class="son"></div>
</div>

css3中了flex布局，可以非常簡(jiǎn)單實(shí)現(xiàn)垂直水平居中

這里可以簡(jiǎn)單看看flex布局的關(guān)鍵屬性作用：

display: flex時(shí)，表示該容器內(nèi)部的元素將按照f(shuō)lex進(jìn)行布局

align-items: center表示這些元素將相對(duì)于本容器水平居中

justify-content: center也是同樣的道理垂直居中

6、gird布局

<style>
? ? .father {
? ? ? ? ? ? display: grid;
? ? ? ? ? ? align-items:center;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background: skyblue;
?
? ? ? ? }
? ? ? ? .son {
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? border: 1px solid red ? ? ? ?}
</style>
<div class="father">
? ? <div class="son"></div>
</div>

?

• 24）實(shí)現(xiàn)左側(cè)邊欄固定，其他內(nèi)容自適應(yīng)?

HTML
?

<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge" />
? ? <title>Static Template</title>
? ? <link rel="stylesheet" href="./index.css" />
? </head>
? <body>
? ? <div id="box">
? ? ? <div id="left"></div>
? ? ? <div id="right"></div>
? ? </div>
? ? <div id="box2"></div>
? </body>
</html>

方案一：左側(cè)固定寬度，右側(cè)flex自適應(yīng) flex：1； 占據(jù)剩余空間

#box {
? width: 100%;
? height: 400px;
? display: flex;
}
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
}
#right {
? flex: 1;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案二：左側(cè)浮動(dòng)，右側(cè)設(shè)置寬度100%，占據(jù)左側(cè)普通流位置

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
}
#left {
? width: 100px;
? height: 100%;
? float: left;
? background-color: lightgreen;
}
#right {
? width: 100%;
? height: 100%;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案三：左側(cè)固定寬度左浮動(dòng)，右側(cè)設(shè)margin-left等于左側(cè)寬度

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
}
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
? float: left;
}
#right {
? width: calc(100% - 100px);
? margin-left: 100px;
? height: 100%;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案四：左側(cè)固定寬度、固定定位，右側(cè)寬度100%

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
? position: relative;
}
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
? position: absolute;
? top: 0;
? left: 0;
}
#right {
? width: 100%;
? height: 100%;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案五：左側(cè)寬度固定、固定定位，右側(cè)左邊距等于左側(cè)寬度：

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
? position: relative;
}
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
? position: absolute;
? top: 0;
? left: 0;
}
#right {
? width: calc(100% - 100px);
? margin-left: 100px;
? height: 100%;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案六：雙左浮動(dòng)，右側(cè)計(jì)算屬性計(jì)算寬度

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
}
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
? float: left;
}
#right {
? width: calc(100% - 100px);
? height: 100%;
? float: left;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案七：左側(cè)左浮，右側(cè)右浮動(dòng)，右側(cè)計(jì)算寬度：

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
}
/* #box::after {
? content: " ";
? display: block;
? clear: both;
} */
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
? float: left;
}
#right {
? width: calc(100% - 100px);
? float: right;
? height: 100%;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

方案八：左側(cè)固定寬度，display:inline-block，右側(cè)右浮動(dòng)，計(jì)算寬度

#box {
? width: 100%;
? height: 400px;
? background-color: #aaaaaa;
}
/* #box::after {
? content: " ";
? display: block;
? clear: both;
} */
#left {
? width: 100px;
? height: 100%;
? background-color: lightgreen;
? display: inline-block;
}
#right {
? width: calc(100% - 100px);
? float: right;
? height: 100%;
? background-color: lightblue;
}

#box2 {
? width: 500px;
? height: 500px;
? background-color: plum;
}

• 25）css3的新特性

二、選擇器
css3中新增了一些選擇器，主要為如下圖所示：

三、新樣式
邊框
css3新增了三個(gè)邊框?qū)傩?，分別是：

border-radius：創(chuàng)建圓角邊框

box-shadow：為元素添加陰影

border-image：使用圖片來(lái)繪制邊框

box-shadow

設(shè)置元素陰影，設(shè)置屬性如下：

水平陰影

垂直陰影

模糊距離(虛實(shí))

陰影尺寸(影子大小)

陰影顏色

內(nèi)/外陰影

其中水平陰影和垂直陰影是必須設(shè)置的

背景
新增了幾個(gè)關(guān)于背景的屬性，分別是background-clip、background-origin、background-size和background-break

background-clip

用于確定背景畫(huà)區(qū)，有以下幾種可能的屬性：

background-clip: border-box; 背景從border開(kāi)始顯示

background-clip: padding-box; 背景從padding開(kāi)始顯示

background-clip: content-box; 背景顯content區(qū)域開(kāi)始顯示

background-clip: no-clip; 默認(rèn)屬性，等同于border-box

通常情況，背景都是覆蓋整個(gè)元素的，利用這個(gè)屬性可以設(shè)定背景顏色或圖片的覆蓋范圍

background-origin

當(dāng)我們?cè)O(shè)置背景圖片時(shí)，圖片是會(huì)以左上角對(duì)齊，但是是以border的左上角對(duì)齊還是以padding的左上角或者content的左上角對(duì)齊? border-origin正是用來(lái)設(shè)置這個(gè)的

background-origin: border-box; 從border開(kāi)始計(jì)算background-position

background-origin: padding-box; 從padding開(kāi)始計(jì)算background-position

background-origin: content-box; 從content開(kāi)始計(jì)算background-position

默認(rèn)情況是padding-box，即以padding的左上角為原點(diǎn)

background-size

background-size屬性常用來(lái)調(diào)整背景圖片的大小，主要用于設(shè)定圖片本身。有以下可能的屬性：

background-size: contain; 縮小圖片以適合元素（維持像素長(zhǎng)寬比）

background-size: cover; 擴(kuò)展元素以填補(bǔ)元素（維持像素長(zhǎng)寬比）

background-size: 100px 100px; 縮小圖片至指定的大小

background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對(duì)包 含元素的尺寸

background-break
元素可以被分成幾個(gè)獨(dú)立的盒子（如使內(nèi)聯(lián)元素span跨越多行），background-break 屬性用來(lái)控制背景怎樣在這些不同的盒子中顯示

background-break: continuous; 默認(rèn)值。忽略盒之間的距離（也就是像元素沒(méi)有分成多個(gè)盒子，依然是一個(gè)整體一樣）

background-break: bounding-box; 把盒之間的距離計(jì)算在內(nèi)；

background-break: each-box; 為每個(gè)盒子單獨(dú)重繪背景

文字
word-wrap
語(yǔ)法：word-wrap: normal|break-word

normal：使用瀏覽器默認(rèn)的換行

break-all：允許在單詞內(nèi)換行

text-overflow
text-overflow設(shè)置或檢索當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)如何顯示，屬性有兩個(gè)值選擇：

clip：修剪文本

ellipsis：顯示省略符號(hào)來(lái)代表被修剪的文本

text-shadow
text-shadow可向文本應(yīng)用陰影。能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色

text-decoration
CSS3里面開(kāi)始支持對(duì)文字的更深層次的渲染，具體有三個(gè)屬性可供設(shè)置：

text-fill-color: 設(shè)置文字內(nèi)部填充顏色

text-stroke-color: 設(shè)置文字邊界填充顏色

text-stroke-width: 設(shè)置文字邊界寬度

顏色
css3新增了新的顏色表示方式rgba與hsla

rgba分為兩部分，rgb為顏色值，a為透明度

hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度

四、transition 過(guò)渡
transition屬性可以被指定為一個(gè)或多個(gè)CSS屬性的過(guò)渡效果，多個(gè)屬性之間用逗號(hào)進(jìn)行分隔，必須規(guī)定兩項(xiàng)內(nèi)容：

過(guò)度效果

持續(xù)時(shí)間

語(yǔ)法如下：

transition： CSS屬性，花費(fèi)時(shí)間，效果曲線(默認(rèn)ease)，延遲時(shí)間(默認(rèn)0)
上面為簡(jiǎn)寫(xiě)模式，也可以分開(kāi)寫(xiě)各個(gè)屬性

transition-property: width;?
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
五、transform 轉(zhuǎn)換
transform屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素

transform-origin：轉(zhuǎn)換元素的位置（圍繞那個(gè)點(diǎn)進(jìn)行轉(zhuǎn)換），默認(rèn)值為(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移

transform: scale(2, 0.5)：縮放

transform: rotate(0.5turn)：旋轉(zhuǎn)

transform: skew(30deg, 20deg)：傾斜

六、animation 動(dòng)畫(huà)
動(dòng)畫(huà)這個(gè)平常用的也很多，主要是做一個(gè)預(yù)設(shè)的動(dòng)畫(huà)。和一些頁(yè)面交互的動(dòng)畫(huà)效果，結(jié)果和過(guò)渡應(yīng)該一樣，讓頁(yè)面不會(huì)那么生硬

animation也有很多的屬性

animation-name：動(dòng)畫(huà)名稱(chēng)

animation-duration：動(dòng)畫(huà)持續(xù)時(shí)間

animation-timing-function：動(dòng)畫(huà)時(shí)間函數(shù)

animation-delay：動(dòng)畫(huà)延遲時(shí)間

animation-iteration-count：動(dòng)畫(huà)執(zhí)行次數(shù)，可以設(shè)置為一個(gè)整數(shù)，也可以設(shè)置為infinite，意思是無(wú)限循環(huán)

animation-direction：動(dòng)畫(huà)執(zhí)行方向

animation-paly-state：動(dòng)畫(huà)播放狀態(tài)

animation-fill-mode：動(dòng)畫(huà)填充模式

七、漸變
顏色漸變是指在兩個(gè)顏色之間平穩(wěn)的過(guò)渡，css3漸變包括

linear-gradient：線性漸變

?
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

?
radial-gradient：徑向漸變

?
linear-gradient(0deg, red, green);

?
八、其他
關(guān)于css3其他的新特性還包括flex彈性布局、Grid柵格布局，

除此之外，還包括多列布局、媒體查詢(xún)、混合模式等等
?

• 26）了解過(guò)哪些頁(yè)面布局？

幾種常見(jiàn)布局
table布局
父級(jí)容器—display: table
子級(jí)容器—display:table-cell
例子

<!DOCTYPE html>
<html lang="zh_CN">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Document</title>
? ? <style>
? ? ? .box {
? ? ? ? width: 600px;
? ? ? ? height: 100px;
? ? ? ? display: table;
? ? ? }
? ? ? .left,
? ? ? .right {
? ? ? ? display: table-cell;
? ? ? }
? ? ? .left {
? ? ? ? background: yellowgreen;
? ? ? }
? ? ? .right {
? ? ? ? background: skyblue;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <div class="box">
? ? ? <div class="left"></div>
? ? ? <div class="right"></div>
? ? </div>
? </body>
</html>

float布局
特點(diǎn):

元素"浮動(dòng)"
脫離文檔流
但不脫離文本流
對(duì)自身的影響: 形成"塊"(BFC，具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素)、位置盡量靠上、位置盡量靠左(右)，無(wú)法滿(mǎn)足會(huì)靠下
對(duì)兄弟的影響: 上面貼非float元素、旁邊貼float元素、不影響其它塊級(jí)元素位置、影響其它塊級(jí)元素內(nèi)部文本

flexbox布局
布局的傳統(tǒng)解決方案，基于盒狀模型，依賴(lài) display 屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)；2009年，W3C 提出了一種新的方案----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。
Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性；任何一個(gè)容器都可以指定為Flex布局，行內(nèi)元素也可以使用Flex布局; webkit內(nèi)核的瀏覽器，必須加上-webkit-前綴。

彈性盒子
盒子本來(lái)就是并列的
指定寬度即可
水平豎直居中 flex 實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge" />
? ? <title>水平豎直居中布局解決方案-flex+justify-content</title>
? ? <style>
? ? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? }
? ? ? #parent {
? ? ? ? width: 100%;
? ? ? ? height: 400px;
? ? ? ? background: #ccc;
? ? ? ? display: flex;
? ? ? ? align-items: center;
? ? ? ? justify-content: center;
? ? ? }
? ? ? #child {
? ? ? ? width: 300px;
? ? ? ? height: 200px;
? ? ? ? background: #c9394a;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <!-- 定義父級(jí)元素 -->
? ? <div id="parent">
? ? ? <!-- 定義子級(jí)元素 -->
? ? ? <div id="child"></div>
? ? </div>
? </body>
</html>

Grid布局
網(wǎng)格布局（Grid）是最強(qiáng)大的 CSS 布局方案。
它將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。以前，只能通過(guò)復(fù)雜的CSS框架達(dá)到的效果，現(xiàn)在瀏覽器內(nèi)置了;Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置。但是，它們也存在重大區(qū)別。Flex 布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。Grid 布局遠(yuǎn)比Flex布局強(qiáng)大。

<!DOCTYPE html>
<html lang="zh_CN">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Document</title>
? ? <style>
? ? ? .wrapper {
? ? ? ? display: grid;
? ? ? ? grid-template-columns: repeat(3, 1fr);
? ? ? ? grid-gap: 10px;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <div class="wrapper">
? ? ? <div>One</div>
? ? ? <div>Two</div>
? ? ? <div>Three</div>
? ? ? <div>Four</div>
? ? ? <div>Five</div>
? ? </div>
? </body>
</html>

?

columns布局
CSS屬性 columns 用來(lái)設(shè)置元素的列寬和列數(shù)。
例子

<!DOCTYPE html>
<html lang="zh_CN">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Document</title>
? ? <style>
? ? ? .content-box {
? ? ? ? columns: 3 auto;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <p class="content-box">
? ? ? JavaScript 框架 WHY VUE.JS?起步 GITHUB 易用 已經(jīng)會(huì)了
? ? ? HTML、CSS、JavaScript?即刻閱讀指南開(kāi)始構(gòu)建應(yīng)用! 靈活
? ? ? 不斷繁榮的生態(tài)系統(tǒng),可以在一個(gè)庫(kù)和一套完整框架之間自如伸.JavaScript 框架
? ? ? WHY VUE.JS?起步 GITHUB 易用 已經(jīng)會(huì)了
? ? ? HTML、CSS、JavaScript?即刻閱讀指南開(kāi)始構(gòu)建應(yīng)用! 靈活
? ? ? 不斷繁榮的生態(tài)系統(tǒng),可以在一個(gè)庫(kù)和一套完整框架之間自如伸.JavaScript 框架
? ? ? WHY VUE.JS?起步 GITHUB 易用 已經(jīng)會(huì)了
? ? ? HTML、CSS、JavaScript?即刻閱讀指南開(kāi)始構(gòu)建應(yīng)用! 靈活
? ? ? 不斷繁榮的生態(tài)系統(tǒng),可以在一個(gè)庫(kù)和一套完整框架之間自如伸.JavaScript 框架
? ? ? WHY VUE.JS?起步 GITHUB 易用 已經(jīng)會(huì)了
? ? ? HTML、CSS、JavaScript?即刻閱讀指南開(kāi)始構(gòu)建應(yīng)用! 靈活
? ? ? 不斷繁榮的生態(tài)系統(tǒng),可以在一個(gè)庫(kù)和一套完整框架之間自如伸.JavaScript 框架
? ? ? WHY VUE.JS?起步 GITHUB 易用 已經(jīng)會(huì)了
? ? ? HTML、CSS、JavaScript?即刻閱讀指南開(kāi)始構(gòu)建應(yīng)用! 靈活
? ? ? 不斷繁榮的生態(tài)系統(tǒng),可以在一個(gè)庫(kù)和一套完整框架之間自如伸.
? ? </p>
? </body>
</html>

• 27 用animation做過(guò)什么？做過(guò)哪些動(dòng)畫(huà)？

做走馬燈??原文鏈接：用animation制作走馬燈 - 掘金

做3d魔方? ? ? 本文鏈接：使用 C3 Animation 做一個(gè)3D魔方_Jaosncode的博客-CSDN博客?

用animation做無(wú)縫勻速滾動(dòng)? ?本文鏈接：用animation做無(wú)縫勻速滾動(dòng)_是黃小仙呀的博客-CSDN博客_如何設(shè)置animation動(dòng)畫(huà)為勻速運(yùn)動(dòng)

?做彈力球? ? ? ? ? ? 本文鏈接：用動(dòng)畫(huà)（animation）做彈力球_lxhby520的博客-CSDN博客?

使用animation制作進(jìn)度條???本文鏈接：使用animation制作進(jìn)度條_樂(lè)之者java的博客-CSDN博客

• 28 Sass寫(xiě)一個(gè)數(shù)組？

// 定義數(shù)組，數(shù)組元素用逗號(hào)隔開(kāi)
$liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278;
 
// 開(kāi)始 @each 循環(huán)遍歷數(shù)組
// $c 作為循環(huán)變量，代表了數(shù)組的元素，不是索引~?。?！
@each $c in $liColor{
     $i:index($liColor,$c);        // 獲取 $c 在數(shù)組中的索引，并賦值給 $i 賦值用冒號(hào)，不是等號(hào)~！
     li:nth-child( #{$i} ){      // 經(jīng)典的地方來(lái)了，SCSS 循環(huán)是從 1 開(kāi)始，不是 0 哦~
       background: $c;           // 背景色
       &:hover{
         background: lighten($c,10%);    // hover 后的顏色
       }
     }
}

• 29）rem出現(xiàn)很小的小數(shù)手機(jī)上會(huì)發(fā)生什么，

為了保證大部分分辨率下計(jì)算出的根字體大小都為整數(shù)，所以約定根字體大小的計(jì)算公式為：
分辨率寬度 / 10；

在iPhone6下，如果一個(gè)元素的寬和高都是1.75rem，其在瀏覽器內(nèi)的渲染尺寸
應(yīng)該是1.75 * 37.5 = 65.625px；

但真實(shí)渲染尺寸卻是另外一種情況：

? ? 有的寬度是66px，有的卻是65px，而且順序上毫無(wú)規(guī)律。
? ??
? ? 如果瀏覽器統(tǒng)一做四舍五入處理，那么所有的色塊尺寸也應(yīng)該是一樣的，不會(huì)出現(xiàn)部分向上取整，
部分向下取整。

設(shè)想：

? ? 瀏覽器在渲染時(shí)所做的舍入處理只是應(yīng)用在元素的渲染尺寸上，其真實(shí)占據(jù)的空間依舊是原始大小。
? ??
? ? 也就是說(shuō)如果一個(gè)元素尺寸是0.625px，那么其渲染尺寸應(yīng)該是1px，空出的0.375px空間由
其臨近的元素填充；
? ??
? ? 同樣道理，如果一個(gè)元素尺寸是0.375px，其渲染尺寸就應(yīng)該是0，但是其會(huì)占據(jù)
臨近元素0.375px的空間。

• 30 什么時(shí)候用less

1. 函數(shù)式編程css
2. 自定義變量用于整體主題調(diào)整
3. 嵌套語(yǔ)法簡(jiǎn)化開(kāi)發(fā)復(fù)雜度

頁(yè)面層級(jí)結(jié)構(gòu)多，重復(fù)使用的css代碼較多時(shí)

• 31 animation和transition

1.animation概念
可以用 name 設(shè)置動(dòng)畫(huà)的名稱(chēng)，用 duration 設(shè)置動(dòng)畫(huà)完成的周期，用 timing-function 設(shè)置動(dòng)
畫(huà)的速度曲線，delay 設(shè)置動(dòng)畫(huà)什么時(shí)候開(kāi)始，iteration-count 設(shè)置動(dòng)畫(huà)播放的次數(shù)，direction 規(guī)定下一
個(gè)周期是否逆向的播放，play-state 動(dòng)畫(huà)是否正在進(jìn)行或者暫停，fill-mode 設(shè)置動(dòng)畫(huà)停了之后位置什么狀態(tài)

animation 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置六個(gè)動(dòng)畫(huà)屬性：
animation-name?? ?規(guī)定需要綁定到選擇器的 keyframe 名稱(chēng)。
animation-duration?? ?規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
animation-timing-function?? ?規(guī)定動(dòng)畫(huà)的速度曲線。
animation-delay?? ?規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。
animation-iteration-count?? ?規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。
animation-direction?? ?規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

2.transition概念
用 property 去設(shè)置過(guò)渡效果的屬性名稱(chēng)，duration 設(shè)置過(guò)渡效果的周期，timing-function 規(guī)
定速度效果的速度曲線，delay 設(shè)定過(guò)渡效果什么時(shí)候開(kāi)始；

transition 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè)過(guò)渡屬性：
transition-property?? ?規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱(chēng)。
transition-duration?? ?規(guī)定完成過(guò)渡效果需要多少秒或毫秒。
transition-timing-function?? ?規(guī)定速度效果的速度曲線。
transition-delay?? ?定義過(guò)渡效果何時(shí)開(kāi)始。

3.區(qū)別

1）transition 是過(guò)渡，是樣式值的變化的過(guò)程，只有開(kāi)始和結(jié)束；animation 其實(shí)也叫關(guān)鍵幀，通過(guò)和 keyframe 結(jié)合可以設(shè)置中間幀的一個(gè)狀態(tài)；
2）animation 配合 @keyframe 可以不觸發(fā)時(shí)間就觸發(fā)這個(gè)過(guò)程，而 transition 需要通過(guò) hover 或者 js 事件來(lái)配合觸發(fā)；
3）animation 可以設(shè)置很多的屬性，比如循環(huán)次數(shù)，動(dòng)畫(huà)結(jié)束的狀態(tài)等等，transition 只能觸發(fā)一次；
4）animation 可以結(jié)合 keyframe 設(shè)置每一幀，但是 transition 只有兩幀；
?

transition可以實(shí)現(xiàn)簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)效果，而animation可以實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果?

• 32 移入圖片讓那個(gè)圖片慢慢放大

DOM

<body>
? ? <div class="box">
? ? ? ? <div class="img">
? ? ? ? ? ? 圖片
? ? ? ? </div>
? ? </div>
</body>

CSS
?

<style>
? ? body {
? ? ? ? width: 100vw;
? ? ? ? height: 100vh;
? ? ? ? display: flex;
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? }

? ? .box {
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? border: 1px solid black;
? ? ? ? position: relative;
? ? }

? ? .img {
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? background-color: red;
? ? ? ? font-size: 24px;
? ? ? ? line-height: 300px;
? ? ? ? text-align: center;
? ? ? ? position: absolute;
? ? ? ? transform-origin: right center;
? ? ? ? animation: animate 3s linear;/*使用動(dòng)畫(huà)*/
? ? }

? ? /*圖片的運(yùn)動(dòng)動(dòng)畫(huà)*/
? ? @keyframes animate {
? ? ? ? from {
? ? ? ? ? ? transform: scale(0);
? ? ? ? ? ? left: -110%;
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: scale(1);
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? }
</style>

• 33 盒子模型概念

盒模型的概念

盒模型是CSS布局的基石，規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。CSS定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內(nèi)容區(qū)、補(bǔ)白（內(nèi)填充）、邊框、邊界(外邊距)這就是盒模型。

盒模型的組成

盒模型組成 = content(內(nèi)容) + padding(內(nèi)填充) + border(邊框) + margin(外邊距)

內(nèi)填充：padding,在設(shè)定頁(yè)面中一個(gè)元素內(nèi)容到元素的邊緣(邊 ? 框) 之間的距離。 也稱(chēng)補(bǔ)白。padding不可以寫(xiě)負(fù)值！
?

• 34 引用樣式的方式有哪幾種？他們的優(yōu)先級(jí)排序怎么樣？

一共有4中方式，分別為內(nèi)聯(lián)、內(nèi)嵌、外聯(lián)、導(dǎo)入。

1、內(nèi)聯(lián)（行內(nèi)樣式） - 在標(biāo)簽內(nèi)直接寫(xiě)樣式，

style=""<div style="width: 300px;height: 300px"></div>

2、內(nèi)嵌（內(nèi)部樣式） - 在head標(biāo)簽里，加一個(gè)style標(biāo)簽，在style里寫(xiě)樣式

<head>
? ? <meta charset="UTF-8"/>
? ? <title>document</title>
? ? <style>
? ? ? ? div {
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? </style>
</head>

3、外聯(lián)（外部樣式） - 新建一個(gè).css文件，通過(guò)link來(lái)引入樣式

<link rel="stylesheet" href="css/index.css">

4、導(dǎo)入（導(dǎo)入樣式） - 在head標(biāo)簽里，加一個(gè)style標(biāo)簽，再寫(xiě)@import url()，跟用link的方式差不多

<head>
? ? <meta charset="UTF-8"/>
? ? <title>document</title>
? ? <style>
? ? ? ? @import url(css/index.css);
? ? </style>
</head>

5、優(yōu)先級(jí)

1、就近原則

2.理論上：內(nèi)聯(lián)>內(nèi)嵌>外聯(lián)>導(dǎo)入

3.實(shí)際上：內(nèi)嵌、外聯(lián)、導(dǎo)入在同一個(gè)文件頭部，在CSS選擇器權(quán)值相同的情況下，誰(shuí)離相應(yīng)的代碼近，誰(shuí)的優(yōu)先級(jí)高
?

• 35 px,em,rem,%，vm,vh

1.px

px就是像素，也是我們現(xiàn)在經(jīng)常使用的基本單位，比如常常聽(tīng)到的電腦像素是1024x768的，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)。

2.em

em參考物是父元素的font-size，默認(rèn)字體大小是16px，所以1em不是固定值，因?yàn)樗鼤?huì)繼承父元素的字體大小

3.rem

rem參考物是相對(duì)于根元素，我們?cè)谑褂脮r(shí)可以在根元素設(shè)置一個(gè)參考值即可，相對(duì)于em使用，減少很大運(yùn)算工作量，例：html大小為10px，12rem就是120px

4.%

% 是相對(duì)于父元素的大小設(shè)定的比率，position:absolute;的元素是相對(duì)于已經(jīng)定位的父元素，position：fixed；的元素是相對(duì)可視窗口

5、vw

css3新單位，viewpoint width的縮寫(xiě)，視窗寬度，1vw等于視窗寬度的1%。

舉個(gè)例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

再舉個(gè)例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vm相對(duì)于視口的寬度。視口被均分為100單位

h1 {
?? ?font-size: 8vh;
}

再舉個(gè)例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px

總結(jié)：

? 1.vw：1vw等于視口寬度的1%。
? 2.vh：1vh等于視口高度的1%。
?

• 36 display的值和作用

1、display的值有：

none，inline，block，list-item，inline-block，table，inline-table，table-caption，table-cell，table-row，table-row-group，table-column，table-column-group，table-footer-group，table-header-group，run-in，box，inline-box，flexbox，inline-flexbox，flex，inline-flex

2、作用：

none： 表示隱藏對(duì)象，與visibility屬性的hidden值不同，display：none不為被隱藏的對(duì)象保留物理空間 ，然visibility：hidden就保留

inline（默認(rèn)值）：表示指定對(duì)象為內(nèi)聯(lián)元素

block： 指定對(duì)象為塊元素。

list-item： 指定對(duì)象為列表項(xiàng)目

inline-block： 指定對(duì)象為內(nèi)聯(lián)塊元素。（這是CSS2中的屬性）

table： 指定對(duì)象作為塊元素級(jí)的表格。類(lèi)同于html標(biāo)簽table（CSS2）

inline-table： 指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類(lèi)同于html標(biāo)簽table（CSS2）

table-caption： 指定對(duì)象作為表格標(biāo)題。類(lèi)同于html標(biāo)簽caption（CSS2）

table-cell： 指定對(duì)象作為表格單元格。類(lèi)同于html標(biāo)簽td（CSS2）

table-row： 指定對(duì)象作為表格行。類(lèi)同于html標(biāo)簽tr（CSS2）

table-row-group： 指定對(duì)象作為表格行組。類(lèi)同于html標(biāo)簽tbody（CSS2）

table-column： 指定對(duì)象作為表格列。類(lèi)同于html標(biāo)簽col（CSS2）

table-column-group： 指定對(duì)象作為表格列組顯示。類(lèi)同于html標(biāo)簽colgroup（CSS2）

table-header-group： 指定對(duì)象作為表格標(biāo)題組。類(lèi)同于html標(biāo)簽thead（CSS2）

table-footer-group： 指定對(duì)象作為表格腳注組。類(lèi)同于html標(biāo)簽tfoot（CSS2）

run-in： 根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。（CSS3）

box： 將對(duì)象作為彈性伸縮盒顯示。（伸縮盒的最老版本中屬性）（CSS3）

inline-box： 將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒的最老版本中屬性）（CSS3）

flexbox： 將對(duì)象作為彈性伸縮盒顯示。（伸縮盒的最老版本中屬性）（CSS3）

inline-flexbox： 將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒的最老版本中屬性）（CSS3）

flex： 將對(duì)象作為彈性伸縮盒顯示。（伸縮盒的最老版本中屬性）（CSS3）

inline-flex： 將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒的最老版本中屬性）（CSS3）
?

• 37列舉兩種清除浮動(dòng)的方法(代碼實(shí)現(xiàn)或者描述思路)

實(shí)例：

??HTML代碼代碼

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>清除浮動(dòng)</title>
? ? <style>
? ? ? ? #parent{
? ? ? ? ? ? border: 1px solid black;
? ? ? ? }
? ? ? ? #child{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background: red;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="parent">
? ? ? ? <div id="child"></div>
? ? </div> ??
</body>
</html>

效果圖-----未清除浮動(dòng)

??效果圖-----已清除浮動(dòng)

?當(dāng)為子元素設(shè)置了浮動(dòng)，如果不清除浮動(dòng)，那么父元素將會(huì)出現(xiàn)高度塌陷的現(xiàn)象。所以當(dāng)我們?cè)O(shè)置了浮動(dòng)后，就要解決浮動(dòng)帶來(lái)的影響。下面就要我們介紹幾種清除浮動(dòng)的方法！

方法一：額外標(biāo)簽法

??給誰(shuí)清除浮動(dòng)，就在其后額外添加一個(gè)空白標(biāo)簽 ，給其設(shè)置clear：both。

??優(yōu)點(diǎn)：通俗易懂，書(shū)寫(xiě)方便。

??缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化比較差。

??clear：both：本質(zhì)就是閉合浮動(dòng)， 就是讓父盒子閉合出口和入口，不讓子盒子出來(lái) 。

??css樣式

#clear{
? ? clear: both;
}

??html代碼

<div id="parent">
? ? <div id="child"></div>
? ? <!-- 方法一 ?額外標(biāo)簽法 -->
? ? <div id="clear"></div>
</div>

方法二：父元素添加overflow:hidden

??通過(guò)觸發(fā)BFC方式，實(shí)現(xiàn)清除浮動(dòng)

??優(yōu)點(diǎn)：代碼簡(jiǎn)潔

??缺點(diǎn)：內(nèi)容增多的時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示要溢出的元素。

??css樣式

#parent{
? ? overflow: hidden;
}

方法三：使用after偽元素清除浮動(dòng)

??優(yōu)點(diǎn)：符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確。

??缺點(diǎn)：ie6-7不支持偽元素：after，使用zoom:1觸發(fā)hasLayout。

??css樣式

方法四：使用before和after雙偽元素清除浮動(dòng)

??優(yōu)點(diǎn)：代碼更簡(jiǎn)潔

??缺點(diǎn)：用zoom:1觸發(fā)hasLayout.

??css樣式

#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
? ? clear: both;
}
#parent{
? ? *zoom: 1;
}

方法五：為父元素設(shè)置高度

??缺點(diǎn): 需要手動(dòng)添加高度，如何后面的高度發(fā)生變化，還要再次修改高度，給后期的維護(hù)帶來(lái)麻煩。

??優(yōu)點(diǎn): 簡(jiǎn)單粗暴直接有效，清除了浮動(dòng)帶來(lái)的影響。
?

• 38 盒子模型（怪異模型）

標(biāo)準(zhǔn)盒子模型和怪異盒子模型（IE盒子模型）?

在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度 = 內(nèi)容的width + padding(左右) + border(左右) + margin(左右)

設(shè)置padding和border會(huì)將盒子撐大，在設(shè)置的寬高外產(chǎn)生

?

在怪異模式下，一個(gè)塊的總寬度 = 內(nèi)容的width + margin(左右)（這里的width包含了padding(左右)和border(左右)的值），設(shè)置的padding和border會(huì)在原有的寬高里面產(chǎn)生，不會(huì)撐開(kāi)盒子

例如一個(gè)div：

?div{
? ? ? ? width:100px;
? ? ? ? height:100px;
? ? ? ? padding:20px;
? ? ? ? border:2px solid #000;
? ? }

在標(biāo)準(zhǔn)模式下：總寬度為100px;

在怪異模式下：總寬度為144px;

4.兩種模式的轉(zhuǎn)換（通過(guò)box-sizing）
box-sizing中比較常用的兩個(gè)屬性值為 content-box 和 border-box ，它可以改變盒子模型的解析計(jì)算模式，可以參考上面的代碼案例。

當(dāng)設(shè)置box-sizing:content-box時(shí)，采用標(biāo)準(zhǔn)模式進(jìn)行計(jì)算，默認(rèn)就是這種模式；
當(dāng)設(shè)置box-sizing:border-box時(shí)，采用怪異模式進(jìn)行計(jì)算；
?

• 39 談?wù)刦ixed ，relative?， absolute

.relative相對(duì)定位

相對(duì)定位：設(shè)置相對(duì)定位的盒子會(huì)相對(duì)它原來(lái)的位置，通過(guò)指定偏移，到達(dá)新的位置，但是原來(lái)的位置會(huì)被保留下來(lái)，且仍在標(biāo)準(zhǔn)文檔流中，它對(duì)父級(jí)盒子和相鄰的盒子都沒(méi)有任何影響。

absolute 絕對(duì)定位

絕對(duì)定位：設(shè)置絕對(duì)定位的盒子會(huì)相對(duì)于距離最近的設(shè)置了相對(duì)定位的祖先元素進(jìn)行定位，如果一直找不到具有相對(duì)定位的祖先元素，就相對(duì)于瀏覽器窗口定位，且會(huì)使元素脫離文檔流。

fixed 固定定位

固定定位：設(shè)置了固定定位的盒子只會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位，也就是窗口中左上角的原點(diǎn)

• 40 float和absolute有什么區(qū)別？

1》文字內(nèi)容是否會(huì)被覆蓋

float浮動(dòng)，當(dāng)元素通過(guò)float來(lái)脫離文檔流時(shí)，雖然其他的元素會(huì)當(dāng)其不存在，但其他元素的內(nèi)容還是會(huì)把這個(gè)元素占的位置讓出來(lái)。也就是該元素浮動(dòng)在另外一個(gè)有文字內(nèi)容的元素上時(shí)，文字內(nèi)容并不會(huì)被浮動(dòng)的元素覆蓋，而是環(huán)繞在周?chē)?。如?/p>

absolute脫離文檔流的時(shí)候，其他元素和元素中的文本都會(huì)無(wú)視掉他，因此不會(huì)像float那樣將其他元素的內(nèi)容擠到旁邊去。如：

2》相對(duì)何處進(jìn)行定位

當(dāng)一個(gè)元素浮動(dòng)之后，它會(huì)被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個(gè)浮動(dòng)的元素。

設(shè)置絕對(duì)定位的盒子會(huì)相對(duì)于距離最近的設(shè)置了相對(duì)定位的祖先元素進(jìn)行定位，且會(huì)使元素脫離文檔流，如果一直找不到具有相對(duì)定位的祖先元素，就相對(duì)于瀏覽器窗口定位。

• 41 代碼實(shí)現(xiàn)3欄效果，左右兩欄固定寬度，中間欄隨著瀏覽器寬度自適應(yīng)變化

1 flex布局

<section class="layout flexbox">
    <style>
        .layout.flexbox{
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
    </style>
    <h1>三欄布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
        <h2>flexbox解決方案</h2>
        1.這是三欄布局的felx解決方案；
        2.這是三欄布局的flex解決方案；
        </div>
        <div class="right"></div>
    </article>
</section>

felxbox布局是css3里新出的一個(gè)，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個(gè)。目前移動(dòng)端的布局也都是用flexbox。?
felxbox的缺點(diǎn)就是不能兼容IE8及以下瀏覽器。

2 表格布局?

<section class="layout table">
    <style>
        .layout.table .left-center-right{
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
    </style>
    <h1>三欄布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
        <h2>表格布局解決方案</h2>
        1.這是三欄布局的表格解決方案；
        2.這是三欄布局的表格解決方案;
        </div>
        <div class="right"></div>
    </article>
</section>

?5.網(wǎng)格布局

<section class="layout grid">
    <style>
        .layout.grid .left-center-right{
          width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left-center-right>div{
 
        }
        .layout.grid .left{
          width: 300px;
          background: red;
        }
        .layout.grid .center{
          background: yellow;
        }
        .layout.grid .right{
 
          background: blue;
        }
    </style>
    <h1>三欄布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
        <h2>網(wǎng)格布局解決方案</h2>
        1.這是三欄布局的網(wǎng)格布局解決方案；
        2.這是三欄布局的網(wǎng)格布局解決方案;
        </div>
        <div class="right"></div>
    </article>
</section>

• 42 css選擇器的權(quán)重

* 第零等：!important，大過(guò)了其它任何設(shè)置 權(quán)值為 infinity 。
* 第一等：代表內(nèi)聯(lián)樣式，如：style=''，權(quán)值為1000。
* 第二等：代表ID選擇器，如：#content，權(quán)值為0100。
* 第三等：代表類(lèi)、偽類(lèi)和屬性選擇器，如.content，權(quán)值為0010。
* 第四等：代表標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)值為0001。
* 第五等：通配符、子選擇器、相鄰選擇器等的。如*、>、+，權(quán)值為0000。
* 第六等：繼承的樣式?jīng)]有權(quán)值，通配選擇器定義的規(guī)則優(yōu)先級(jí)高于元素繼承過(guò)來(lái)的規(guī)則的優(yōu)先級(jí)。

• 43 transition transform translate 之間的區(qū)別 transform的屬性有哪些？

transition的優(yōu)點(diǎn)在于簡(jiǎn)單易用，但是它有幾個(gè)很大的局限。
（1）transition需要事件觸發(fā)，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。
（2）transition是一次性的，不能重復(fù)發(fā)生，除非再次觸發(fā)。
（3）transition只有兩個(gè)狀態(tài)，開(kāi)始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)。
（4）一條transition規(guī)則，只能定義一個(gè)屬性的變化，不能涉及多個(gè)屬性。

transform是使元素變換，變形

?transform中的四個(gè)方法

1.旋轉(zhuǎn)rotate
rotate：通過(guò)指定的角度參數(shù)對(duì)原元素指定一個(gè)效果。
如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg)；

2.移動(dòng)translate
translate() 根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。

如：transform:translate(100px,20px):

translateX
通過(guò)給定一個(gè)X方向上的數(shù)目指定一個(gè)translation。只向x軸進(jìn)行移動(dòng)元素，同樣其基點(diǎn)是元素中心點(diǎn)，也可以根據(jù)transform-origin改變基點(diǎn)位置
transform:translateX(100px):

translateY
通過(guò)給定Y方向的數(shù)目指定一個(gè)translation。只向Y軸進(jìn)行移動(dòng)，基點(diǎn)在元素心點(diǎn)，可以通過(guò)transform-origin改變基點(diǎn)位置。
transform:translateY(20px):

3.縮放scale
縮放scale和移動(dòng)translate是有點(diǎn)相似的，也是有三種情況：下面我們具體來(lái)看看這三種情況具體使用方法：
注意：默認(rèn)值是1，它的值放大是比1大，縮小比1小。
1、scale(x,y) 定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾群透叨取?/p>

如：transform:scale(2,1.5);?

如果只寫(xiě)入一個(gè)參數(shù)就按照等比例寬高同時(shí)縮放 如transform:scale(1.5);? 寬高都變?yōu)?.5倍

2、scaleX(n) 定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾取?/p>

如：transform:scaleX(2):

3、scaleY(n) 定義 2D 縮放轉(zhuǎn)換，改變?cè)氐母叨取?/p>

如：transform:scaleY(2):

4.扭曲skew
1、skew(x-angle,y-angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。

如：transform:skew(30deg,10deg);

2、skewX(angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。

如：transform:skewX(30deg);

3、skewY(angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。

如：transform:skewY(10deg);

?當(dāng)然還有3d的效果

• 44 css3中的選擇器

?

?

?

• 46 用CSS實(shí)現(xiàn)一個(gè)背景色為紅色，半徑為200px的圓，并設(shè)置不停的上下移動(dòng)動(dòng)畫(huà)

一、DOM

<body>
? ? <div class="box"></div>
</body>

二、CSS

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        position: relative;
        left: 0;
        top: 0;
        animation: move 2s linear infinite;
    }

    /*
        此方式為動(dòng)畫(huà)方式，使用的是定位的top屬性
        還可以設(shè)置
            transform: translateY();
            margin-top
    */
    @keyframes move {
        form {
            top: 0;
        }

        50% {
            top: 100px;
        }

        to {
            top: 0;
        }
    }
</style>

三、結(jié)果

javascript以及es6相關(guān)

?null和undefined的區(qū)別？ js的數(shù)據(jù)類(lèi)型？

一、基本數(shù)據(jù)類(lèi)型

在介紹undefined與null之前，我們先來(lái)了解一下ECMAScript中的數(shù)據(jù)類(lèi)型。在ECMAScript中有六種簡(jiǎn)單數(shù)據(jù)類(lèi)型(也稱(chēng)為基本數(shù)據(jù)類(lèi)型): Undefined、Null、Boolean、Number 和 String、Symbol (ES6中引入) 。還有一種復(fù)雜數(shù)據(jù)類(lèi)型——Object。

Undefined和Null都只有一個(gè)值，分別對(duì)應(yīng)著undefined和null。這兩種不同類(lèi)型的值，既有著不同的語(yǔ)義和場(chǎng)景，又表現(xiàn)出較為相似的行為。

二、undefined

undefined 的字面意思就是：未定義的值 。這個(gè)值的語(yǔ)義是，希望表示一個(gè)變量最原始的狀態(tài)，而非人為操作的結(jié)果 。 這種原始狀態(tài)會(huì)在以下 4 種場(chǎng)景中出現(xiàn)：

1、聲明一個(gè)變量，但是沒(méi)有賦值

1. var foo;

2. console.log(foo); // undefined

3. 復(fù)制代碼

訪問(wèn) foo，返回了 undefined，表示這個(gè)變量自從聲明了以后，就從來(lái)沒(méi)有使用過(guò)，也沒(méi)有定義過(guò)任何有效的值。

2、訪問(wèn)對(duì)象上不存在的屬性或者未定義的變量

1. console.log(Object.foo); // undefined

2. console.log(typeof demo); // undefined

3. 復(fù)制代碼

訪問(wèn) Object 對(duì)象上的 foo 屬性，返回 undefined ， 表示Object 上不存在或者沒(méi)有定義名為 foo 的屬性；對(duì)未聲明的變量執(zhí)行typeof操作符返回了undefined值。

3、函數(shù)定義了形參，但沒(méi)有傳遞實(shí)參

1. //函數(shù)定義了形參 a

2. function fn(a) {

3. console.log(a); // undefined

4. }

5. fn(); //未傳遞實(shí)參

6. 復(fù)制代碼

函數(shù) fn 定義了形參 a，但 fn 被調(diào)用時(shí)沒(méi)有傳遞參數(shù)，因此，fn 運(yùn)行時(shí)的參數(shù) a 就是一個(gè)原始的、未被賦值的變量。

4、使用void對(duì)表達(dá)式求值

1. void 0 ; // undefined

2. void false; // undefined

3. void []; // undefined

4. void null; // undefined

5. void function fn(){} ; // undefined

6. 復(fù)制代碼

ECMAScript 明確規(guī)定 void 操作符 對(duì)任何表達(dá)式求值都返回 undefined ，這和函數(shù)執(zhí)行操作后沒(méi)有返回值的作用是一樣的，JavaScript 中的函數(shù)都有返回值，當(dāng)沒(méi)有 return 操作時(shí)，就默認(rèn)返回一個(gè)原始的狀態(tài)值，這個(gè)值就是 undefined，表明函數(shù)的返回值未被定義。

因此，undefined 一般都來(lái)自于某個(gè)表達(dá)式最原始的狀態(tài)值，不是人為操作的結(jié)果。當(dāng)然，你也可以手動(dòng)給一個(gè)變量賦值 undefined，但這樣做沒(méi)有意義，因?yàn)橐粋€(gè)變量不賦值就是 undefined 。

三、null

null 的字面意思是：空值 。這個(gè)值的語(yǔ)義是，希望表示一個(gè)對(duì)象被人為的重置為空對(duì)象，而非一個(gè)變量最原始的狀態(tài) 。 在內(nèi)存里的表示就是，棧中的變量沒(méi)有指向堆中的內(nèi)存對(duì)象。

1、一般在以下兩種情況下我們會(huì)將變量賦值為null

• 如果定義的變量在將來(lái)用于保存對(duì)象，那么最好將該變量初始化為null，而不是其他值。換句話(huà)說(shuō)，只要意在保存對(duì)象的變量還沒(méi)有真正保存對(duì)象，就應(yīng)該明確地讓該變量保存null值，這樣有助于進(jìn)一步區(qū)分null和undefined。

• 當(dāng)一個(gè)數(shù)據(jù)不再需要使用時(shí)，我們最好通過(guò)將其值設(shè)置為null來(lái)釋放其引用，這個(gè)做法叫做解除引用。不過(guò)解除一個(gè)值的引用并不意味著自動(dòng)回收改值所占用的內(nèi)存。解除引用的真正作用是讓值脫離執(zhí)行環(huán)境，以便垃圾收集器在下次運(yùn)行時(shí)將其回收。解除引用還有助于消除有可能出現(xiàn)的循環(huán)引用的情況。這一做法適用于大多數(shù)全局變量和全局對(duì)象的屬性，局部變量會(huì)在它們離開(kāi)執(zhí)行環(huán)境時(shí)(函數(shù)執(zhí)行完時(shí))自動(dòng)被解除引用。

2、特殊的typeof null

當(dāng)我們使用typeof操作符檢測(cè)null值，我們理所應(yīng)當(dāng)?shù)卣J(rèn)為應(yīng)該返"Null"類(lèi)型呀，但是事實(shí)返回的類(lèi)型卻是"object"。

1. var data = null;

2. console.log(typeof data); // "object"

3. 復(fù)制代碼

是不是很奇怪？其實(shí)我們可以從兩方面來(lái)理解這個(gè)結(jié)果:

• 一方面從邏輯角度來(lái)看，null值表示一個(gè)空對(duì)象指針，它代表的其實(shí)就是一個(gè)空對(duì)象，所以使用typeof操作符檢測(cè)時(shí)返回"object"也是可以理解的。

• 另一方面，其實(shí)在JavaScript 最初的實(shí)現(xiàn)中，JavaScript 中的值是由一個(gè)表示類(lèi)型的標(biāo)簽和實(shí)際數(shù)據(jù)值表示的(對(duì)象的類(lèi)型標(biāo)簽是 0)。由于 null 代表的是空指針（大多數(shù)平臺(tái)下值為 0x00），因此，null的類(lèi)型標(biāo)簽也成為了 0，typeof null就錯(cuò)誤的返回了"object"。在ES6中，當(dāng)時(shí)曾經(jīng)有提案為歷史平凡, 將type null的值糾正為null, 但最后提案被拒了,所以還是保持"object"類(lèi)型。

四、總結(jié)

用一句話(huà)總結(jié)兩者的區(qū)別就是：undefined 表示一個(gè)變量自然的、最原始的狀態(tài)值，而 null 則表示一個(gè)變量被人為的設(shè)置為空對(duì)象，而不是原始狀態(tài)。所以，在實(shí)際使用過(guò)程中，為了保證變量所代表的語(yǔ)義，不要對(duì)一個(gè)變量顯式的賦值 undefined，當(dāng)需要釋放一個(gè)對(duì)象時(shí)，直接賦值為 null 即可，重點(diǎn)：給一個(gè)變量賦值為null，可以手動(dòng)釋放該變量占用的內(nèi)存，而給變量賦值為undefined，依舊會(huì)給該變量分配內(nèi)存空間

?js 的繼承實(shí)現(xiàn)方式有哪些，列舉兩個(gè)例子

寄生組合繼承
這個(gè)方法有點(diǎn)意思，融合了原型繼承和call繼承的優(yōu)點(diǎn)，真正實(shí)現(xiàn)了私對(duì)私，公對(duì)公~為此，我們需要在call繼承的基礎(chǔ)上加上原型繼承。

原型繼承的思想是讓子類(lèi)原型=父類(lèi)的一個(gè)實(shí)例，即Child.prototype = new Parent，換句話(huà)說(shuō)，即Child.prototype.__proto__ = Parent.prototype(父類(lèi)實(shí)例原型鏈指向父類(lèi)原型，沒(méi)毛病吧)。
從另一個(gè)角度看，我們不創(chuàng)建新的父類(lèi)實(shí)例了！而是讓子類(lèi)原型的__proto__重定向，原本指向Object.prototype，現(xiàn)在讓它指向Parent.prototype。實(shí)現(xiàn)了原型繼承同樣的效果?！獙?shí)際上就是原型繼承。

但還有一個(gè)問(wèn)題，IE6~8下是不允許我們操作__proto__的，我們使用Object.create的方法代替。
Object.create(A)：創(chuàng)建一個(gè)空對(duì)象，讓這個(gè)空對(duì)象的__proto__指向A。

// 寄生組合繼承
function Parent(){
?? ?this.x = 100;
}
Parent.prototype.getX = function getX(){
?? ?return this.x;
}
function Child(){
?? ?Parent.call(this); ? ? ?// call繼承當(dāng)然要保留，實(shí)現(xiàn)私對(duì)私
?? ?this.y = 200;
}
Child.prototype = Object.create(Parent.prototype); ? ?// 另類(lèi)原型繼承
Child.prototype.getY = function getY(){
?? ?return this.y;
}
let c1 = new Child;
console.log(c1);

Child.prototype = Object.create(Parent.prototype)這句核心代碼實(shí)際上和Child.prototype = new Parent別無(wú)二致，只是創(chuàng)建的不是父類(lèi)的實(shí)例，而是一個(gè)空對(duì)象，然后手動(dòng)更改原型鏈指向而已。這個(gè)操作也可以讓父類(lèi)的公有屬性方法成為子類(lèi)的公有屬性方法。

ES6中的類(lèi)和繼承

class Parent{
?? ?constructor(){ ? ? ? ? // constructor函數(shù)實(shí)際上是Parent函數(shù)的私有屬性方法
?? ??? ?this.x = 100;
?? ?}
?? ?getX(){ ? ? ? ? ? ? // 在Parent.prototype上的公有屬性方法
?? ??? ?return this.x;
?? ?}
}
// 原本毫無(wú)關(guān)聯(lián)的兩個(gè)類(lèi)，因?yàn)閑xtends而成為了父子
class Child extends Parent{
?? ?constructor(){
?? ??? ?super(); ? ? ? ? ? ?// 只要用extends實(shí)現(xiàn)繼承，就要在constructor函數(shù)的第一行加一句super()，否則會(huì)報(bào)錯(cuò) ? ? ? ??
?? ??? ?this.y = 200;
?? ?}
?? ?getY(){ ? ? ? ? ?
?? ??? ?return this.y;
?? ?}
}

ES6中的繼承可以實(shí)現(xiàn)與寄生組合繼承同樣的效果，但寫(xiě)法是不是極其簡(jiǎn)單吶~
?

eval是什么？

?用什么會(huì)導(dǎo)致內(nèi)存泄漏？

?js深度克隆的代碼實(shí)現(xiàn)？

?同源策略，跨域，后臺(tái)如何解決跨域，html有哪些標(biāo)簽可以跨域

es6

js自己封裝一個(gè)方法

?jq用過(guò)哪些方法？

?promise？

?觸摸有幾個(gè)事件？

什么時(shí)候會(huì)發(fā)生跨域問(wèn)題

?匿名函數(shù)

?This指向問(wèn)題

?JQ，JS，vue 三者的區(qū)別

?用jq實(shí)現(xiàn)雙向綁定！

?ajax的實(shí)現(xiàn)

ajax的實(shí)現(xiàn)

?在數(shù)組上新增一個(gè)方法，實(shí)現(xiàn)復(fù)制。

?期望：[1,2,3].copy() //輸出 [1,2,3,1,2,3]

?.使用閉包實(shí)現(xiàn)一個(gè)方法，第一次調(diào)用返回1，第二次返回2，第三次3，以此類(lèi)推。

? ? ? ?期望

count()//輸出1
count()//輸出2
count()//輸出3
……

? ? ? 實(shí)現(xiàn)

<script>
    function outer() {
        let number = 0;
        return function inner() {
            console.log(++number);
        }
    }
    let count = outer();
    count();
    count();
    count();
</script>

?.封裝一個(gè)函數(shù)，參數(shù)是定時(shí)器的時(shí)間，.then執(zhí)行回調(diào)函數(shù)。

期望

sleep(5000).then(() => console.log('我會(huì)在5秒后打印'));

Promise創(chuàng)建

var promise = new Promise(function(resolve, reject) {
? ? //異步處理
? ? //處理結(jié)束后、調(diào)用resolve或reject，當(dāng)異步代碼執(zhí)行成功時(shí)，我們才會(huì)調(diào)用resolve(...)，當(dāng)異步代碼失敗時(shí)就會(huì)調(diào)用reject(...)
? ? //對(duì)于已經(jīng)實(shí)例化過(guò)的promise對(duì)象可以調(diào)用promise.then()方法，傳遞resolve和reject方法作為回調(diào)
});

程序?qū)崿F(xiàn)

<script>
? ? function sleep(time) {
? ? ? ? return new Promise((resolve) => setTimeout(resolve, time));
? ? }
? ? sleep(5000).then(() => console.log('我會(huì)在5秒后打印'));
</script>

?說(shuō)一說(shuō)前端性能優(yōu)化有哪些方法？

這里說(shuō)一下前端性能優(yōu)化的七大手段，包括減少請(qǐng)求數(shù)量、減小資源大小、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載、減少重繪回流、使用性能更好的API和構(gòu)建優(yōu)化

減少請(qǐng)求數(shù)量

【合并】

　　如果不進(jìn)行文件合并，有如下3個(gè)隱患

　　1、文件與文件之間有插入的上行請(qǐng)求，增加了N-1個(gè)網(wǎng)絡(luò)延遲

　　2、受丟包問(wèn)題影響更嚴(yán)重

　　3、經(jīng)過(guò)代理服務(wù)器時(shí)可能會(huì)被斷開(kāi)

　　但是，文件合并本身也有自己的問(wèn)題

　　1、首屏渲染問(wèn)題

　　2、緩存失效問(wèn)題

　　所以，對(duì)于文件合并，有如下改進(jìn)建議

　　1、公共庫(kù)合并

　　2、不同頁(yè)面單獨(dú)合并

【圖片處理】

　　1、雪碧圖

　　CSS雪碧圖是以前非常流行的技術(shù)，把網(wǎng)站上的一些圖片整合到一張單獨(dú)的圖片中，可以減少網(wǎng)站的HTTP請(qǐng)求數(shù)量，但是當(dāng)整合圖片比較大時(shí)，一次加載比較慢。隨著字體圖片、SVG圖片的流行，該技術(shù)漸漸退出了歷史舞臺(tái)

　　2、Base64

　　將圖片的內(nèi)容以Base64格式內(nèi)嵌到HTML中，可以減少HTTP請(qǐng)求數(shù)量。但是，由于Base64編碼用8位字符表示信息中的6個(gè)位，所以編碼后大小大約比原始值擴(kuò)大了 33%

　　3、使用字體圖標(biāo)來(lái)代替圖片

【減少重定向】

　　盡量避免使用重定向，當(dāng)頁(yè)面發(fā)生了重定向，就會(huì)延遲整個(gè)HTML文檔的傳輸。在HTML文檔到達(dá)之前，頁(yè)面中不會(huì)呈現(xiàn)任何東西，也沒(méi)有任何組件會(huì)被下載，降低了用戶(hù)體驗(yàn)

　　如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302臨時(shí)重定向。因?yàn)?，如果使?02，則每一次訪問(wèn)http，都會(huì)被重定向到https的頁(yè)面。而永久重定向，在第一次從http重定向到https之后 ，每次訪問(wèn)http，會(huì)直接返回https的頁(yè)面

【使用緩存】

　　使用cach-control或expires這類(lèi)強(qiáng)緩存時(shí)，緩存不過(guò)期的情況下，不向服務(wù)器發(fā)送請(qǐng)求。強(qiáng)緩存過(guò)期時(shí)，會(huì)使用last-modified或etag這類(lèi)協(xié)商緩存，向服務(wù)器發(fā)送請(qǐng)求，如果資源沒(méi)有變化，則服務(wù)器返回304響應(yīng)，瀏覽器繼續(xù)從本地緩存加載資源；如果資源更新了，則服務(wù)器將更新后的資源發(fā)送到瀏覽器，并返回200響應(yīng)

【不使用CSS @import】

　　CSS的@import會(huì)造成額外的請(qǐng)求

【避免使用空的src和href】

　　a標(biāo)簽設(shè)置空的href，會(huì)重定向到當(dāng)前的頁(yè)面地址

　　form設(shè)置空的method，會(huì)提交表單到當(dāng)前的頁(yè)面地址

減小資源大小

【壓縮】

　　1、HTML壓縮

　　HTML代碼壓縮就是壓縮在文本文件中有意義，但是在HTML中不顯示的字符，包括空格，制表符，換行符等

　　2、CSS壓縮

　　CSS壓縮包括無(wú)效代碼刪除與CSS語(yǔ)義合并

　　3、JS壓縮與混亂

　　JS壓縮與混亂包括無(wú)效字符及注釋的刪除、代碼語(yǔ)義的縮減和優(yōu)化、降低代碼可讀性，實(shí)現(xiàn)代碼保護(hù)

　　4、圖片壓縮

　　針對(duì)真實(shí)圖片情況，舍棄一些相對(duì)無(wú)關(guān)緊要的色彩信息

【webp】

　　在安卓下可以使用webp格式的圖片，它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來(lái)更小的圖片體積，同等畫(huà)面質(zhì)量下，體積比jpg、png少了25%以上，而且同時(shí)具備了無(wú)損和有損的壓縮模式、Alpha 透明以及動(dòng)畫(huà)的特性

【開(kāi)啟gzip】

　　HTTP協(xié)議上的GZIP編碼是一種用來(lái)改進(jìn)WEB應(yīng)用程序性能的技術(shù)。大流量的WEB站點(diǎn)常常使用GZIP壓縮技術(shù)來(lái)讓用戶(hù)感受更快的速度。這一般是指WWW服務(wù)器中安裝的一個(gè)功能，當(dāng)有人來(lái)訪問(wèn)這個(gè)服務(wù)器中的網(wǎng)站時(shí)，服務(wù)器中的這個(gè)功能就將網(wǎng)頁(yè)內(nèi)容壓縮后傳輸?shù)絹?lái)訪的電腦瀏覽器中顯示出來(lái)。一般對(duì)純文本內(nèi)容可壓縮到原大小的40%

優(yōu)化網(wǎng)絡(luò)連接

【使用CDN】

　　CDN全稱(chēng)是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)，它能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶(hù)的距離和響應(yīng)時(shí)間等綜合信息將用戶(hù)的請(qǐng)求重新導(dǎo)向離用戶(hù)最近的服務(wù)節(jié)點(diǎn)上。其目的是使用戶(hù)可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶(hù)訪問(wèn)網(wǎng)站的響應(yīng)速度

【使用DNS預(yù)解析】

　　當(dāng)瀏覽器訪問(wèn)一個(gè)域名的時(shí)候，需要解析一次DNS，獲得對(duì)應(yīng)域名的ip地址。在解析過(guò)程中，按照瀏覽器緩存、系統(tǒng)緩存、路由器緩存、ISP(運(yùn)營(yíng)商)DNS緩存、根域名服務(wù)器、頂級(jí)域名服務(wù)器、主域名服務(wù)器的順序，逐步讀取緩存，直到拿到IP地址

　　DNS Prefetch，即DNS預(yù)解析就是根據(jù)瀏覽器定義的規(guī)則，提前解析之后可能會(huì)用到的域名，使解析結(jié)果緩存到系統(tǒng)緩存中，縮短DNS解析時(shí)間，來(lái)提高網(wǎng)站的訪問(wèn)速度

　　方法是在 head 標(biāo)簽里面寫(xiě)上幾個(gè) link 標(biāo)簽

1. <link rel="dns-prefecth" >

2. <link rel="dns-prefecth" >

　　對(duì)以上幾個(gè)網(wǎng)站提前解析 DNS，由于它是并行的，不會(huì)堵塞頁(yè)面渲染，這樣可以縮短資源加載的時(shí)間

【并行連接】

　　由于在HTTP1.1協(xié)議下，chrome每個(gè)域名的最大并發(fā)數(shù)是6個(gè)。使用多個(gè)域名，可以增加并發(fā)數(shù)

【持久連接】

　　使用keep-alive或presistent來(lái)建立持久連接，持久連接降低了時(shí)延和連接建立的開(kāi)銷(xiāo)，將連接保持在已調(diào)諧狀態(tài)，而且減少了打開(kāi)連接的潛在數(shù)量

【管道化連接】

　　在HTTP2協(xié)議中，可以開(kāi)啟管道化連接，即單條連接的多路復(fù)用，每條連接中并發(fā)傳輸多個(gè)資源，這里就不需要添加域名來(lái)增加并發(fā)數(shù)了

優(yōu)化資源加載

【資源加載位置】

　　通過(guò)優(yōu)化資源加載位置，更改資源加載時(shí)機(jī)，使盡可能快地展示出頁(yè)面內(nèi)容，盡可能快地使功能可用

　　1、CSS文件放在head中，先外鏈，后本頁(yè)

　　2、JS文件放在body底部，先外鏈，后本頁(yè)

　　3、處理頁(yè)面、處理頁(yè)面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件

　　4、body中間盡量不寫(xiě)style標(biāo)簽和script標(biāo)簽

【資源加載時(shí)機(jī)】

　　1、異步script標(biāo)簽

　　defer:? 異步加載，在HTML解析完成后執(zhí)行。defer的實(shí)際效果與將代碼放在body底部類(lèi)似

　　async:?異步加載，加載完成后立即執(zhí)行

　　2、模塊按需加載

　　在SPA等業(yè)務(wù)邏輯比較復(fù)雜的系統(tǒng)中，需要根據(jù)路由來(lái)加載當(dāng)前頁(yè)面需要的業(yè)務(wù)模塊

　　按需加載，是一種很好的優(yōu)化網(wǎng)頁(yè)或應(yīng)用的方式。這種方式實(shí)際上是先把代碼在一些邏輯斷點(diǎn)處分離開(kāi)，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應(yīng)用的初始加載速度，減輕了它的總體體積，因?yàn)槟承┐a塊可能永遠(yuǎn)不會(huì)被加載

　　webpack 提供了兩個(gè)類(lèi)似的技術(shù)，優(yōu)先選擇的方式是使用符合 ECMAScript 提案 的 import() 語(yǔ)法。第二種則是使用 webpack 特定的 require.ensure

　　3、使用資源預(yù)加載preload和資源預(yù)讀取prefetch

　　preload讓瀏覽器提前加載指定資源，需要執(zhí)行時(shí)再執(zhí)行，可以加速本頁(yè)面的加載速度

　　prefetch告訴瀏覽器加載下一頁(yè)面可能會(huì)用到的資源，可以加速下一個(gè)頁(yè)面的加載速度

　　4、資源懶加載與資源預(yù)加載

　　資源延遲加載也稱(chēng)為懶加載，延遲加載資源或符合某些條件時(shí)才加載某些資源

　　資源預(yù)加載是提前加載用戶(hù)所需的資源，保證良好的用戶(hù)體驗(yàn)

　　資源懶加載和資源預(yù)加載都是一種錯(cuò)峰操作，在瀏覽器忙碌的時(shí)候不做操作，瀏覽器空間時(shí)，再加載資源，優(yōu)化了網(wǎng)絡(luò)性能

減少重繪回流

【樣式設(shè)置】

　　1、避免使用層級(jí)較深的選擇器，或其他一些復(fù)雜的選擇器，以提高CSS渲染效率

　　2、避免使用CSS表達(dá)式，CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大但危險(xiǎn)方法，它的問(wèn)題就在于計(jì)算頻率很快。不僅僅是在頁(yè)面顯示和縮放時(shí)，就是在頁(yè)面滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次

　　3、元素適當(dāng)?shù)囟x高度或最小高度，否則元素的動(dòng)態(tài)內(nèi)容載入時(shí)，會(huì)出現(xiàn)頁(yè)面元素的晃動(dòng)或位置，造成回流

　　4、給圖片設(shè)置尺寸。如果圖片不設(shè)置尺寸，首次載入時(shí)，占據(jù)空間會(huì)從0到完全出現(xiàn)，上下左右都可能位移，發(fā)生回流

　　5、不要使用table布局，因?yàn)橐粋€(gè)小改動(dòng)可能會(huì)造成整個(gè)table重新布局。而且table渲染通常要3倍于同等元素時(shí)間

　　6、能夠使用CSS實(shí)現(xiàn)的效果，盡量使用CSS而不使用JS實(shí)現(xiàn)

【渲染層】

　　1、此外，將需要多次重繪的元素獨(dú)立為render layer渲染層，如設(shè)置absolute，可以減少重繪范圍

　　2、對(duì)于一些進(jìn)行動(dòng)畫(huà)的元素，使用硬件渲染，從而避免重繪和回流

【DOM優(yōu)化】

　　1、緩存DOM

const div = document.getElementById('div')

　　由于查詢(xún)DOM比較耗時(shí)，在同一個(gè)節(jié)點(diǎn)無(wú)需多次查詢(xún)的情況下，可以緩存DOM

　　2、減少DOM深度及DOM數(shù)量

　　HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析DOM并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和層級(jí)較少。

　　3、批量操作DOM

　　由于DOM操作比較耗時(shí)，且可能會(huì)造成回流，因此要避免頻繁操作DOM，可以批量操作DOM，先用字符串拼接完畢，再用innerHTML更新DOM

　　4、批量操作CSS樣式

　　通過(guò)切換class或者使用元素的style.csstext屬性去批量操作元素樣式

　　5、在內(nèi)存中操作DOM

　　使用DocumentFragment對(duì)象，讓DOM操作發(fā)生在內(nèi)存中，而不是頁(yè)面上

　　6、DOM元素離線更新

　　對(duì)DOM進(jìn)行相關(guān)操作時(shí)，例、appendChild等都可以使用Document Fragment對(duì)象進(jìn)行離線操作，帶元素“組裝”完成后再一次插入頁(yè)面，或者使用display:none 對(duì)元素隱藏，在元素“消失”后進(jìn)行相關(guān)操作

　　7、DOM讀寫(xiě)分離

　　瀏覽器具有惰性渲染機(jī)制，連接多次修改DOM可能只觸發(fā)瀏覽器的一次渲染。而如果修改DOM后，立即讀取DOM。為了保證讀取到正確的DOM值，會(huì)觸發(fā)瀏覽器的一次渲染。因此，修改DOM的操作要與訪問(wèn)DOM分開(kāi)進(jìn)行

　　8、事件代理

　　事件代理是指將事件監(jiān)聽(tīng)器注冊(cè)在父級(jí)元素上，由于子元素的事件會(huì)通過(guò)事件冒泡的方式向上傳播到父節(jié)點(diǎn)，因此，可以由父節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)統(tǒng)一處理多個(gè)子元素的事件

　　利用事件代理，可以減少內(nèi)存使用，提高性能及降低代碼復(fù)雜度

　　9、防抖和節(jié)流

　　使用函數(shù)節(jié)流（throttle）或函數(shù)去抖（debounce），限制某一個(gè)方法的頻繁觸發(fā)

　　10、及時(shí)清理環(huán)境

　　及時(shí)消除對(duì)象引用，清除定時(shí)器，清除事件監(jiān)聽(tīng)器，創(chuàng)建最小作用域變量，可以及時(shí)回收內(nèi)存

性能更好的API

　　1、用對(duì)選擇器

　　選擇器的性能排序如下所示，盡量選擇性能更好的選擇器

1. id選擇器（#myid）

2. 類(lèi)選擇器（.myclassname）

3. 標(biāo)簽選擇器（div,h1,p）

4. 相鄰選擇器（h1+p）

5. 子選擇器（ul > li）

6. 后代選擇器（li a）

7. 通配符選擇器（*）

8. 屬性選擇器（a[rel="external"]）

9. 偽類(lèi)選擇器（a:hover,li:nth-child）

　　2、使用requestAnimationFrame來(lái)替代setTimeout和setInterval

　　希望在每一幀剛開(kāi)始的時(shí)候?qū)?yè)面進(jìn)行更改，目前只有使用 requestAnimationFrame 能夠保證這一點(diǎn)。使用 setTimeout 或者 setInterval 來(lái)觸發(fā)更新頁(yè)面的函數(shù)，該函數(shù)可能在一幀的中間或者結(jié)束的時(shí)間點(diǎn)上調(diào)用，進(jìn)而導(dǎo)致該幀后面需要進(jìn)行的事情沒(méi)有完成，引發(fā)丟幀

　　3、使用IntersectionObserver來(lái)實(shí)現(xiàn)圖片可視區(qū)域的懶加載

　　傳統(tǒng)的做法中，需要使用scroll事件，并調(diào)用getBoundingClientRect方法，來(lái)實(shí)現(xiàn)可視區(qū)域的判斷，即使使用了函數(shù)節(jié)流，也會(huì)造成頁(yè)面回流。使用IntersectionObserver，則沒(méi)有上述問(wèn)題

　　4、使用web worker

　　客戶(hù)端javascript一個(gè)基本的特性是單線程：比如，瀏覽器無(wú)法同時(shí)運(yùn)行兩個(gè)事件處理程序，它也無(wú)法在一個(gè)事件處理程序運(yùn)行的時(shí)候觸發(fā)一個(gè)計(jì)時(shí)器。Web Worker是HTML5提供的一個(gè)javascript多線程解決方案，可以將一些大計(jì)算量的代碼交由web Worker運(yùn)行，從而避免阻塞用戶(hù)界面，在執(zhí)行復(fù)雜計(jì)算和數(shù)據(jù)處理時(shí)，這個(gè)API非常有用

　　但是，使用一些新的API的同時(shí)，也要注意其瀏覽器兼容性

webpack優(yōu)化

【打包公共代碼】

　　使用CommonsChunkPlugin插件，將公共模塊拆出來(lái)，最終合成的文件能夠在最開(kāi)始的時(shí)候加載一次，便存到緩存中供后續(xù)使用。這會(huì)帶來(lái)速度上的提升，因?yàn)闉g覽器會(huì)迅速將公共的代碼從緩存中取出來(lái)，而不是每次訪問(wèn)一個(gè)新頁(yè)面時(shí)，再去加載一個(gè)更大的文件

　　webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個(gè)新的配置項(xiàng) optimization.splitChunks 和 optimization.runtimeChunk

　　通過(guò)設(shè)置 optimization.splitChunks.chunks: "all" 來(lái)啟動(dòng)默認(rèn)的代碼分割配置項(xiàng)

【動(dòng)態(tài)導(dǎo)入和按需加載】

　　webpack提供了兩種技術(shù)通過(guò)模塊的內(nèi)聯(lián)函數(shù)調(diào)用來(lái)分離代碼，優(yōu)先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語(yǔ)法。第二種，則是使用 webpack 特定的 require.ensure

【剔除無(wú)用代碼】

　　tree shaking 是一個(gè)術(shù)語(yǔ)，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴(lài)于 ES2015 模塊系統(tǒng)中的靜態(tài)結(jié)構(gòu)特性，例如 import 和 export。這個(gè)術(shù)語(yǔ)和概念實(shí)際上是興起于 ES2015 模塊打包工具 rollup

　　JS的tree shaking主要通過(guò)uglifyjs插件來(lái)完成，CSS的tree shaking主要通過(guò)purify CSS來(lái)實(shí)現(xiàn)的

【長(zhǎng)緩存優(yōu)化】

　　1、將hash替換為chunkhash，這樣當(dāng)chunk不變時(shí)，緩存依然有效

　　2、使用Name而不是id

　　每個(gè) module.id 會(huì)基于默認(rèn)的解析順序(resolve order)進(jìn)行增量。也就是說(shuō)，當(dāng)解析順序發(fā)生變化，ID 也會(huì)隨之改變

　　下面來(lái)使用兩個(gè)插件解決這個(gè)問(wèn)題。第一個(gè)插件是 NamedModulesPlugin，將使用模塊的路徑，而不是數(shù)字標(biāo)識(shí)符。雖然此插件有助于在開(kāi)發(fā)過(guò)程中輸出結(jié)果的可讀性，然而執(zhí)行時(shí)間會(huì)長(zhǎng)一些。第二個(gè)選擇是使用 HashedModuleIdsPlugin，推薦用于生產(chǎn)環(huán)境構(gòu)建

【公用代碼內(nèi)聯(lián)】

　　使用html-webpack-inline-chunk-plugin插件將mainfest.js內(nèi)聯(lián)到html文件中

?一個(gè)頁(yè)面上有大量的圖片（大型電商網(wǎng)站）,加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶(hù)更好的體驗(yàn)。

1. 圖片懶加載，在頁(yè)面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁(yè)面的距離，如果前者小于后者，優(yōu)先加載。
2. 如果為幻燈片、相冊(cè)等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
3. 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
4. 如果圖片過(guò)大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶(hù)體驗(yàn)。
5. 如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。
   ?

?.export和export default?

使用export和export default進(jìn)行暴露
每一個(gè)js文件相當(dāng)于在一個(gè)函數(shù)中運(yùn)行，而函數(shù)的作用域是局部作用域，所以?xún)蓚€(gè)js文件之間的作用域不是共享的。
此時(shí)ES6規(guī)范就為我們提供了export和export default幫助我們將想要暴露的對(duì)象暴露出去。

export
export的暴露格式：

暴露一個(gè)變量：
export 變量名
或者定義的時(shí)候就進(jìn)行了暴露
export var 變量名 = 變量值
暴露多個(gè)變量：
export {量名1,變量2,變量3}
注意： 在js中如果對(duì)直接聲明的變量進(jìn)行暴露是沒(méi)有意義的，因?yàn)椴皇褂萌稳魏侮P(guān)鍵字（如：var）直接生命的變量本事就是全局的如果再使用export進(jìn)行暴露是沒(méi)有意義的。

export default
使用格式：
定義一個(gè)對(duì)象，將對(duì)象暴露出去：

const 對(duì)象名 = {
? ? 屬性：值
}
export default 對(duì)象名

import進(jìn)行引入
針對(duì) export暴露的引入
格式：import {暴露的變量名1,暴露的變量名1,...} from '文件路徑名'

針對(duì) export default暴露的引入
格式：import 自定義的名字 from '文件路徑名'

export和export default區(qū)別
export 和 export default 都可用于導(dǎo)出常量、函數(shù)、文件、模塊等
在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，且不能自定義名字，export default不用加{ }，且可以自定義名字
export使用例子
a.js:

var a = 100
function fun_a() {
? ?console.log("我是a中的函數(shù)")
}
export {
? ? a,
? ? fun_a
}
export var b = 200

b.js

import {a,b,fun_a} from './a'
console.log(a)
fun_a()
console.log(b)

運(yùn)行b.js,報(bào)錯(cuò)
（安裝node環(huán)境所致，安裝了node環(huán)境默認(rèn)使用的是commomJS規(guī)范而不是ES6規(guī)范，所以報(bào)錯(cuò)。沒(méi)有安裝node可能不會(huì)報(bào)該錯(cuò)）

(node:12892) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\Users\86198\VScode\qianDuan\Node.js\b.js:1
import {a,b,fun_a} from './a'
^^^^^^

SyntaxError: Cannot use import statement outside a module

解決：
在b所在的文件夾添加package.json文件，添加"type": "module",指定規(guī)范模式為ES6模式
再次運(yùn)行如果報(bào)如下錯(cuò)誤

Error [ERR_MODULE_NOT_FOUND]: Cannot find module
 'C:\Users\86198\VScode\qianDuan\Node.js\a' 
imported from C:\Users\86198\VScode\qianDuan\Node.js\b.js
Did you mean to import ../a.js?

是因?yàn)閕mport的文件路徑?jīng)]寫(xiě)全，將路徑進(jìn)行補(bǔ)全
再次運(yùn)行，運(yùn)行成功：

100
我是a中的函數(shù)
200

export default使用例子
a.js

const module_a = {
? ? getName (){
? ? ? ?console.log("我是a中的函數(shù)")
? ? },
? ? a:100
}
export default module_a

b.js

import module_a from './a.js'
console.log(module_a.a)
module_a.getName()

運(yùn)行b.js

100
我是a中的函數(shù)

?

怎么去判斷出來(lái)數(shù)組里面值為1的元素

1.該值在數(shù)組中有多個(gè)，找出所有位置

   //封裝函數(shù) 在數(shù)組中找到某個(gè)值所在的所有索引位置 
        function indexOfAll(arr, val) {
            let idxArr = [],
                obj = {}
            arr.forEach((item, index) => {
                if (item == val) {

                    idxArr.push(index)
                }
            })
            return obj = {
                [val]: idxArr
            };
        }

        let arr = [1, 2, 3, 'hello', 'world', 23, 23, 3, 67, 3, 100];
        console.log(indexOfAll(arr, 3))//{3:[2, 7, 9]}

?2，該值在數(shù)組中只有一個(gè)

返回true或者false

some（）

  console.log(arr.some((item) => {
            return item == 1//這里放要判斷的條件和值
        }))

返回索引

arr.indexOf(val)? arr.lastIndexOf(val) val為要找的值

?有一個(gè)數(shù)組，怎么去修改每一個(gè)值？

    let arr = [1, 2, 3, 4, 5];
    
    //方法1，通過(guò)索引下標(biāo)，找到要修改的元素，重新賦值
    arr[0] = 10;
    console.log(arr);//[10, 2, 3, 4, 5]
    
    //方法2，使用數(shù)組的spliceAPI，參數(shù)(起始下標(biāo), 要?jiǎng)h除元素的個(gè)數(shù), 要插入的元素)
    arr.splice(1, 1, 20);
    console.log(arr);//[10, 20, 3, 4, 5]

    //方法3，都修改成同一個(gè)值
    arr.fill(0);
    console.log(arr);//[0, 0, 0, 0, 0]


//  方法四  使用map()方法
 let arr = [1, 2, 3, 'hello', 'world', 23, 23, 3, 67, 3, 100];
 let arr2 = arr.map((item, index) => {
            return item + "元"
        })
        console.log(arr2)//['1元', '2元', '3元', 'hello元', 'world元', '23元', '23元', '3元', '67元', '3元', '100元']

//方法五  使用循環(huán) foreach  、for 、for of、for in ....  

?數(shù)組去重

Methods 1: 思路：定義一個(gè)新數(shù)組，并存放原數(shù)組的第一個(gè)元素，然后將元素組一一和新數(shù)組的元素對(duì)比，若不同則存放在新數(shù)組中。

? ? ? ? function unique(arr) {
? ? ? ? ? ? let newArr = [arr[0]];
? ? ? ? ? ? for (let i = 1; i < arr.length; i++) {
? ? ? ? ? ? ? ? let repeat = false;
? ? ? ? ? ? ? ? for (let j = 0; j < newArr.length; j++) {
? ? ? ? ? ? ? ? ? ? if (arr[i] === newArr[j]) {
? ? ? ? ? ? ? ? ? ? ? ? repeat = true;
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (!repeat) {
? ? ? ? ? ? ? ? ? ? newArr.push(arr[i]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return newArr;
? ? ? ? }
?
? ? ? ? console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

Methods 2: 思路：先將原數(shù)組排序，在與相鄰的進(jìn)行比較，如果不同則存入新數(shù)組。

? ? ? ? function unique2(arr) {
? ? ? ? ? ? var formArr = arr.sort()
? ? ? ? ? ? var newArr=[formArr[0]]
? ? ? ? ? ? for (let i = 1; i < formArr.length; i++) {
? ? ? ? ? ? ? ? if (formArr[i]!==formArr[i-1]) {
? ? ? ? ? ? ? ? ? ? newArr.push(formArr[i])
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return newArr
? ? ? ? }
? ? ? ? console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, ?4,5, 6, 7]

?Methods 3: 利用對(duì)象屬性存在的特性，如果沒(méi)有該屬性則存入新數(shù)組。

? ? ? ? function unique3(arr) {
? ? ? ? ? ? var obj={}
? ? ? ? ? ? var newArr=[]
? ? ? ? ? ? for (let i = 0; i < arr.length; i++) {
? ? ? ? ? ? ? ? if (!obj[arr[i]]) {
? ? ? ? ? ? ? ? ? ? obj[arr[i]] = 1
? ? ? ? ? ? ? ? ? ? newArr.push(arr[i])
? ? ? ? ? ? ? ? } ??
? ? ? ? ? ? }
? ? ? ? ? ? return newArr
? ? ? ? }
? ? ? ? console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

Methods 4: 利用數(shù)組的indexOf下標(biāo)屬性來(lái)查詢(xún)。

? ? ? ? function unique4(arr) {
? ? ? ? ? ? var newArr = []
? ? ? ? ? ? for (var i = 0; i < arr.length; i++) {
? ? ? ? ? ? ? ? if (newArr.indexOf(arr[i])===-1) {
? ? ? ? ? ? ? ? ? ? newArr.push(arr[i])
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return newArr
? ? ? ? }
? ? ? ? console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

Methods 5: 利用數(shù)組原型對(duì)象上的includes方法。

? ? ? ? function unique5(arr) {
? ? ? ? ? ? var newArr = []
? ? ? ? ? ? for (var i = 0; i < arr.length; i++) {
? ? ? ? ? ? ? ? if (!newArr.includes(arr[i])) {
? ? ? ? ? ? ? ? ? ? newArr.push(arr[i])
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return newArr
? ? ? ? }
? ? ? ? console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

Methods 6: 利用數(shù)組原型對(duì)象上的 filter 和 includes方法。

? ? ? ? function unique6(arr) {
? ? ? ? ? ? var newArr = []
? ? ? ? ? ? newArr = arr.filter(function (item) {
? ? ? ? ? ? ? ? return newArr.includes(item) ? '' : newArr.push(item)
? ? ? ? ? ? })
? ? ? ? ? ? return newArr
? ? ? ? }
? ? ? ? console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

Methods 7: 利用數(shù)組原型對(duì)象上的 forEach 和 includes方法。

? ? ? ?

 ? function unique7(arr) {
? ? ? ? ? ? let newArr = [];
? ? ? ? ? ? arr.forEach(item => {
? ? ? ? ? ? ? ? return newArr.includes(item) ? '' : newArr.push(item);
? ? ? ? ? ? });
? ? ? ? ? ? return newArr;
? ? ? ? }
? ? ? ? console.log(unique7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 4, 5, 6, 7]

Methods 8: 利用數(shù)組原型對(duì)象上的 splice 方法。

? ? ? ? function unique8(arr) {
? ? ? ? ? ? var i,j,len = arr.length;
? ? ? ? ? ? for (i = 0; i < len; i++) {
? ? ? ? ? ? ? ? for (j = i + 1; j < len; j++) {
? ? ? ? ? ? ? ? ? ? if (arr[i] == arr[j]) {
? ? ? ? ? ? ? ? ? ? ? ? arr.splice(j, 1);
? ? ? ? ? ? ? ? ? ? ? ? len--;
? ? ? ? ? ? ? ? ? ? ? ? j--;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return arr;
? ? ? ? }
? ? ? ? console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

Methods 9: 利用數(shù)組原型對(duì)象上的 lastIndexOf 方法。

? ? ? ? function unique9(arr) {
? ? ? ? ? ? var res = [];
? ? ? ? ? ? for (var i = 0; i < arr.length; i++) {
? ? ? ? ? ? ? ? res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
? ? ? ? ? ? }
? ? ? ? ? ? return res;
? ? ? ? }
? ? ? ? console.log(unique9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

Methods 10: 利用 ES6的set 方法。

? ? ? ? function unique10(arr) {
? ? ? ? ? ? //Set數(shù)據(jù)結(jié)構(gòu)，它類(lèi)似于數(shù)組，其成員的值都是唯一的
? ? ? ? ? ? return Array.from(new Set(arr)); // 利用Array.from將Set結(jié)構(gòu)轉(zhuǎn)換成數(shù)組
? ? ? ? }
? ? ? ? console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
? ? ? ? // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

?
?

?統(tǒng)計(jì)字符串中出現(xiàn)最多的字符

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<script>
	// 判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)
	//第一種方法
	var str='asdoosdpedncxsdopdaqdg';
	function sum(str){
		var json={};
		for(var i=0;i<str.length;i++){
			var key=str.charAt(i);
			if(json[key]===undefined){
				json[key]=1;
			}else{
				json[key]+=1;
			}
		}
		console.log(json);
		
		var maxkey="";
		var maxvalue=0;
		for(var k in json){
			if(maxkey==""){
				maxkey=k;
				maxvalue=json[k];
			}else{
				if(json[k]>maxvalue){
					maxkey=k;
					maxvalue=json[k];
				}
			}
		}
		console.log(maxkey);//出現(xiàn)次數(shù)最多的字符
		console.log(maxvalue);//出現(xiàn)次數(shù)
	}
	// 執(zhí)行函數(shù)
	sum(str);

	//第二種精簡(jiǎn)方法
	function count(str) { 
		var obj = {}; 
		str.replace(/\S/g,function(s){
		 !obj[s]?obj[s]=1:obj[s]++;
		}) 
		return obj; 
	}

	count(str);
</script>
<body>
	

</body>

</html>

js垃圾回收機(jī)制

什么是垃圾？
（1）沒(méi)有被引用的對(duì)象或變量

（2）無(wú)法訪問(wèn)到的對(duì)象（幾個(gè)對(duì)象引用形成一個(gè)環(huán)，互相引用）

可達(dá)性
可達(dá)性是指那些以某種方式可以訪問(wèn)到或可以用到的值，它們被保證存儲(chǔ)在內(nèi)存中。

有一組基本的固有可達(dá)值，由于顯而易見(jiàn)而無(wú)法刪除：
（1）本地函數(shù)的局部變量和參數(shù)
（2）嵌套調(diào)用鏈上的其他函數(shù)的變量與參數(shù)
（3）全局變量
（4）還有一些其他的，內(nèi)部的
這些值成為根。

如果引用或引用鏈可以從根訪問(wèn)任何其他值，則認(rèn)為該值是可訪問(wèn)的。
垃圾回收機(jī)制
垃圾回收機(jī)制（GC：Garbage Collection）：執(zhí)行環(huán)境負(fù)責(zé)管理代碼執(zhí)行過(guò)程中使用的內(nèi)存。JS的垃圾回收機(jī)制是為了以防內(nèi)存泄漏，內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時(shí)這塊內(nèi)存還存在著，沒(méi)有被釋放，導(dǎo)致該內(nèi)存無(wú)法被使用，垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量，并釋放掉它們所指向的內(nèi)存。

垃圾回收的必要性
字符串、對(duì)象和數(shù)組沒(méi)有固定的大小，所以只有當(dāng)它們大小已知時(shí)才能對(duì)它們進(jìn)行動(dòng)態(tài)的存儲(chǔ)分配。JavaScript程序每次創(chuàng)建字符串、數(shù)組或?qū)ο髸r(shí)，解釋器都要分配內(nèi)存才存儲(chǔ)這個(gè)實(shí)體。只要像這樣動(dòng)態(tài)地分配了內(nèi)存，最終都要釋放這些內(nèi)存以便它們能夠被再次利用;否則，JavaScript的解釋器將會(huì)消耗完系統(tǒng)中所有可用的內(nèi)存，造成系統(tǒng)崩潰。
JavaScript有自己的垃圾回收機(jī)制（Garbage Collection），JavaScript的解釋器可用檢測(cè)到何時(shí)程序不再使用一個(gè)對(duì)象，當(dāng)確定了一個(gè)對(duì)象無(wú)用的時(shí)候，就說(shuō)明不再需要這個(gè)對(duì)象了，就可用把這個(gè)對(duì)象所占用的內(nèi)存釋放掉。

例如：

var a='use'
var b='over a'
var a=b ? //將a重寫(xiě)

代碼執(zhí)行以后，‘use’這個(gè)字符串就失去了引用（剛開(kāi)始是被a引用的），系統(tǒng)檢測(cè)到之后，就會(huì)啟動(dòng)垃圾回收機(jī)制，釋放use字符串的存儲(chǔ)空間，以便這些空間可用再被利用。

垃圾回收方式
JavaScript執(zhí)行環(huán)境中的垃圾回收器怎樣才能檢測(cè)到哪塊內(nèi)存可以被回收呢？

通常有兩種方式：標(biāo)記清除（mark and sweep）、引用計(jì)數(shù)（reference counting）

標(biāo)記清除
這是JavaScript中最常用的垃圾回收方式。

（1）當(dāng)變量進(jìn)入執(zhí)行環(huán)境時(shí)（函數(shù)中聲明變量），就標(biāo)記這個(gè)變量為“進(jìn)入環(huán)境”，當(dāng)變量離開(kāi)環(huán)境時(shí)（函數(shù)執(zhí)行結(jié)束），則將其標(biāo)記為“離開(kāi)環(huán)境”，離開(kāi)環(huán)境之后還有的變量則是需要被刪除的變量。

（2）垃圾回收器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記。

（3）去掉環(huán)境中的變量以及被環(huán)境中變量引用的變量的標(biāo)記。

（4）之后再被加上標(biāo)記的變量即是需要回收的變量（因?yàn)榄h(huán)境中的變量已經(jīng)無(wú)法訪問(wèn)到這些變量）

（5）最后，垃圾收集器完成內(nèi)存清除工作，銷(xiāo)毀那些帶標(biāo)記的值，并回收他們所占用的內(nèi)存空間。

引用計(jì)數(shù)
這種方式常常會(huì)引起內(nèi)存泄漏，低版本的IE使用這種方式。機(jī)制就是跟蹤一個(gè)值的引用次數(shù)，當(dāng)聲明一個(gè)變量并將一個(gè)引用類(lèi)型賦值給該變量時(shí)該值引用次數(shù)加1，當(dāng)這個(gè)變量指向其他一個(gè)時(shí)該值的引用次數(shù)便減一。當(dāng)該值引用次數(shù)為0時(shí)，則說(shuō)明沒(méi)有辦法再訪問(wèn)這個(gè)值了，被視為準(zhǔn)備回收的對(duì)象，每當(dāng)過(guò)一段時(shí)間開(kāi)始垃圾回收的時(shí)候，就把被引用數(shù)為0的變量回收。引用計(jì)數(shù)方法可能導(dǎo)致循環(huán)引用，類(lèi)似死鎖，導(dǎo)致內(nèi)存泄露。

例如：

function problem() {
? ? var objA = new Object();
? ? var objB = new Object();

? ? objA.someOtherObject = objB;
? ? objB.anotherObject = objA;
}

objA和objB相互引用，兩個(gè)對(duì)象的引用次數(shù)都是2。函數(shù)執(zhí)行完成之后，objA和objB還將會(huì)繼續(xù)存在，因?yàn)樗麄兊囊么螖?shù)永遠(yuǎn)不會(huì)是0。這樣的相互引用如果說(shuō)很大量的存在就會(huì)導(dǎo)致大量的內(nèi)存泄露。

補(bǔ)充：

常見(jiàn)內(nèi)存泄漏的原因：

（1）全局變量引起的內(nèi)存泄露
（2）閉包引起的內(nèi)存泄露：慎用閉包
（3）dom清空或刪除時(shí)，事件未清除導(dǎo)致的內(nèi)存泄漏
（4）循環(huán)引用帶來(lái)的內(nèi)存泄露
?

原型、原型鏈

一、原型
①所有引用類(lèi)型都有一個(gè)__proto__(隱式原型)屬性，屬性值是一個(gè)普通的對(duì)象
②所有函數(shù)都有一個(gè)prototype(原型)屬性，屬性值是一個(gè)普通的對(duì)象
③所有引用類(lèi)型的__proto__屬性指向它構(gòu)造函數(shù)的prototype

var a = [1,2,3];
a.__proto__ === Array.prototype; // true

二、原型鏈
當(dāng)訪問(wèn)一個(gè)對(duì)象的某個(gè)屬性時(shí)，會(huì)先在這個(gè)對(duì)象本身屬性上查找，如果沒(méi)有找到，則會(huì)去它的__proto__隱式原型上查找，即它的構(gòu)造函數(shù)的prototype，如果還沒(méi)有找到就會(huì)再在構(gòu)造函數(shù)的prototype的__proto__中查找，這樣一層一層向上查找就會(huì)形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)，我們稱(chēng)為原型鏈。

對(duì)象的__proto__和構(gòu)造函數(shù)的原型prototype組成了原型鏈

舉例，有以下代碼

function Parent(month){
? ? this.month = month;
}

var child = new Parent('Ann');

console.log(child.month); // Ann

console.log(child.father); // undefined

在child中查找某個(gè)屬性時(shí)，會(huì)執(zhí)行下面步驟：

訪問(wèn)鏈路為：

訪問(wèn)路鏈為?：

①一直往上層查找，直到到null還沒(méi)有找到，則返回undefined
②Object.prototype.__proto__ === null? 注意這里的Null是一個(gè)對(duì)象
③所有從原型或更高級(jí)原型中的得到、執(zhí)行的方法，其中的this在執(zhí)行時(shí)，指向當(dāng)前這個(gè)觸發(fā)事件執(zhí)行的對(duì)象
原文鏈接：【原型和原型鏈】什么是原型和原型鏈_TowYingWang的博客-CSDN博客_原型和原型鏈

作用域鏈

一般情況使用的變量取值是在當(dāng)前執(zhí)行環(huán)境的作用域中查找，如果當(dāng)前作用域沒(méi)有查到這個(gè)值，就會(huì)向上級(jí)作用域查找，直到查找到全局作用域，這么一個(gè)查找的過(guò)程我們叫做作用域鏈，下級(jí)作用域可以向上級(jí)作用域不斷查找，但是上級(jí)作用域不能向下級(jí)作用域查找，類(lèi)似原型鏈

舉個(gè)栗子：

<script>
    let a = 10;

    function tttt() {
        let b = 20;
        return function ttt() {
            return function tt() {
                return function t() {
                    let c = '張三'
                    var d = "小李"
                    a = 'hello';
                    b = "world"
                    console.log(b) //在全局訪問(wèn)不了b 所以在這打印     world

                }
            }
        }
    }
    // 調(diào)用最內(nèi)層函數(shù) t 看看a  、b的值會(huì)不會(huì)改變
    tttt()()()()
    console.log(a)//hello
        // console.log(d)//d is not defined
    console.log(c)//c is not defined
</script>

可以看到 a 、b的值改變了?

閉包

1.什么是閉包？
如果一個(gè)函數(shù)用到了它作用域外面的變量，那么這個(gè)變量和這個(gè)函數(shù)之間的環(huán)境就叫閉包。

閉包有以下個(gè)特性：

1. 函數(shù)嵌套函數(shù)；
2. 內(nèi)部函數(shù)用到了外部函數(shù)的參數(shù)和變量；
3. 參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收。
4. 參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

2.用碼舉例

function a() {
? var i = 0;
? return function inner() {
? ? i++;
? ? return i;
? };
}
?
// 或者
function a() {
? var i = 0;
? function inner() {
? ? return i;
? }
}

閉包使函數(shù)的私有變量不受外部干擾

是變量存于內(nèi)存中不被銷(xiāo)毀

?function a() {
? ? var i = 0;
? ? return function () {
? ? ? ? i++;
? ? ? ? return i;
? ? };
}
var fn = a();
console.log(fn()); //輸出結(jié)果: 1
console.log(fn()); //輸出結(jié)果: 2
console.log(fn()); //輸出結(jié)果: 3

變量 i 保存在父作用域中，每次訪問(wèn)函數(shù) y 時(shí)， 在函數(shù) y 中找不到變量 i， 會(huì)順著作用域鏈一直向上找，直到全局作用域中也沒(méi)找到為止。

閉包常用于實(shí)現(xiàn)單例模式、柯里化、防抖、節(jié)流、模塊化。

濫用閉包可能會(huì)造成內(nèi)存泄漏（無(wú)用變量存于內(nèi)存中無(wú)法回收，一直占用內(nèi)存）。解決此問(wèn)題的方法是，清除變量（設(shè)為 null）。
本文鏈接：【閉包】什么是閉包？閉包用途_nilmao的博客-CSDN博客_閉包

繼承方法

 //動(dòng)物園

        //繼承性： 先一個(gè)父類(lèi)，然后子類(lèi)繼承父類(lèi)的方法和屬性
        //動(dòng)物類(lèi)：動(dòng)物所有的共有內(nèi)容放到動(dòng)物類(lèi)
        //對(duì)應(yīng)的動(dòng)物類(lèi)型時(shí)繼承 動(dòng)物類(lèi)的方法或者屬性

        //動(dòng)物類(lèi)(構(gòu)造函數(shù))
        function Animal(name, age, color) {
            this.name = name
            this.age = age
            this.color = color
        }
        Animal.prototype.move = function() {
            console.log(this.name + "正在移動(dòng)")
        }
        Animal.prototype.eat = function() {
            console.log(this.name + "正在吃")
        }

        //狗：構(gòu)造函數(shù) 繼承 Animal中所有的屬性和方法
        //方法一：原型鏈繼承：將原型改成對(duì)應(yīng)的對(duì)象
        //問(wèn)題：無(wú)法初始化對(duì)應(yīng)的屬性 
        function Dog(name, age, color) {

        }
        Dog.prototype = new Animal("小黑", 2, "白色")
            //{name:'小黑',age:2,color:"白色"}
        Dog.prototype.watch = function() {
                console.log('汪汪汪')
            }
            // var d1=new Dog("旺財(cái)",5,"黑色")
            // var d2=new Dog("小白",4,"褐色")
            // d1.move()


            //老虎：
            //方法二：冒充繼承法：通過(guò)call或者apply改變?cè)泻瘮?shù)的this指向，實(shí)現(xiàn)的
            //問(wèn)題：無(wú)法將原型中所帶有的方法和屬性繼承過(guò)來(lái)

        function Tiger(name, age, color) {
            this.height = 180
                //改變Animal中this的指向性
                //call和apply 面試題?。。?！
            Animal.call(this, name, age, color)
        }
        Tiger.prototype.chiren = function() {
                console.log(this.name + "吃人")
            }
            //產(chǎn)生一個(gè)新的對(duì)象  構(gòu)造函數(shù)內(nèi)部this->{}
            // var t1=new Tiger("心吧",21,"八色")
            // t1.eat()
            // console.log(t1)

方法一和方法二都不是正確的繼承方式，將他兩結(jié)合得到正確的組合繼承


            //貓
            //方法三：組合繼承：冒充繼承+原型繼承
        function Cat(name, age, color) {
            Animal.call(this, name, age, color)
                //    Animal.apply(this,[name,age,color])
        }
        Cat.prototype = new Animal()
        Cat.prototype.maimeng = function() {
            console.log(this.name + "正在賣(mài)萌")
        }
        var c1 = new Cat("小白", 2, "白色")
        console.log(c1)
        c1.move()

?方法四 es6中的繼承 使用 extends和super進(jìn)行繼承

1、使用class構(gòu)造一個(gè)父類(lèi)

? class Parent {
? ? ? constructor(name,age){
? ? ? ? this.name = name
? ? ? ? this.age = age
? ? ? }
? ? ? sayName(){
? ? ? ? console.log(this.name);
? ? ? }
? ? }

2、使用class構(gòu)造一個(gè)子類(lèi)，并使用extends實(shí)現(xiàn)繼承，super指向父類(lèi)的原型對(duì)象

? class Child extends Parent{
? ? ? constructor(name,age,gender){
? ? ? ? super(name,age) //這里的super（）必須寫(xiě)在constructor內(nèi)部的最上面
? ? ? ? this.gender = gender  //super 下方可以添加其他屬性和方法
? ? ? }
? ? ? sayGender(){
? ? ? ? console.log(this.gender);
? ? ? }
? ? }

3、實(shí)例化對(duì)象

? ?? ?const ming = new Child('ming',18,'男')
? ? ming.sayGender()
? ? ming.sayName()
? ? console.log(ming.name);
? ? console.log(ming.age);

方法五：原型式繼承

這里不得不提到的就是 ES5 里面的 Object.create 方法，這個(gè)方法接收兩個(gè)參數(shù)：一是用作新對(duì)象原型的對(duì)象、二是為新對(duì)象定義額外屬性的對(duì)象（可選參數(shù)）。

let parent4 = {
  name: 'parent4',
  friends: ['p1', 'p2', 'p3'],
  getName: function () {
    return this.name
  },
}

//下面這句代碼將parent4作為了person的原型
let person = Object.create(parent4) 

person.name = 'Tom'
person.friends.push('jerry')

let person2 = Object.create(parent4)
person2.friends.push('lucy')

console.log(person.name)
console.log(person.name === person.getName())
console.log(person2.name)
console.log(person.friends)
console.log(person2.friends)

通過(guò) Object.create 這個(gè)方法可以實(shí)現(xiàn)普通對(duì)象的繼承，不僅僅能繼承屬性，同樣也可以繼承 getName 的方法，請(qǐng)看這段代碼的執(zhí)行結(jié)果。

最后兩個(gè)輸出結(jié)果是一樣的，講到這里你應(yīng)該可以聯(lián)想到淺拷貝的知識(shí)點(diǎn)，關(guān)于引用數(shù)據(jù)類(lèi)型“共享”的問(wèn)題，其實(shí) Object.create 方法是可以為一些對(duì)象實(shí)現(xiàn)淺拷貝的。

輾轉(zhuǎn)相除法

輾轉(zhuǎn)相除法又名歐幾里得算法（Euclidean algorithm）
目的是求出兩個(gè)正整數(shù)的最大公約數(shù)

代碼實(shí)現(xiàn)

function gcd(a ,b) {
? ? let max = a > b ? a : b; ? ?//獲取兩數(shù)之間最大的數(shù)
? ? let min = a > b ? b : a; ? ?//獲取兩數(shù)之間最小的數(shù)
? ? let r = max % min; ? ? ? ? ?//獲取兩數(shù)的余數(shù)
? ? if(r === 0) {
? ? ? ? return min;
? ? }else {
? ? ? ? return gcd(min ,r);
? ? }
}

function gcd(a ,b) {
? ? return b === 0 ? a : gcb(b ,a % b);
}

?

數(shù)組轉(zhuǎn)字符串

JavaScript 允許數(shù)組與字符串之間相互轉(zhuǎn)換。其中 Array 方法對(duì)象定義了 3 個(gè)方法，可以把數(shù)組轉(zhuǎn)換為字符串，如表所示。

數(shù)組方法?? ?說(shuō)明

1. toString()?? ?將數(shù)組轉(zhuǎn)換成一個(gè)字符串
2. toLocalString()?? ?把數(shù)組轉(zhuǎn)換成本地約定的字符串
3. join()?? ?將數(shù)組元素連接起來(lái)以構(gòu)建一個(gè)字符串

示例1
下面使用 toString() 方法讀取數(shù)組的值。

數(shù)組中 toString() 方法能夠把每個(gè)元素轉(zhuǎn)換為字符串，然后以逗號(hào)連接輸出顯示。

var a = [1,2,3,4,5,6,7,8,9,0]; ?//定義數(shù)組
var s = a.toString(); ?//把數(shù)組轉(zhuǎn)換為字符串
console.log(s); ?//返回字符串“1,2,3,4,5,6,7,8,9,0”
console.log(typeof s); ?//返回字符串string，說(shuō)明是字符串類(lèi)型

當(dāng)數(shù)組用于字符串環(huán)境中時(shí)，JavaScript 會(huì)自動(dòng)調(diào)用 toString() 方法將數(shù)組轉(zhuǎn)換成字符串。在某些情況下，需要明確調(diào)用這個(gè)方法。

var a = [1,2,3,4,5,6,7,8,9,0]; ?//定義數(shù)組
var b = [1,2,3,4,5,6,7,8,9,0]; ?//定義數(shù)組
var s = a + b; ?//數(shù)組連接操作
console.log(s); ?//返回“1,2,3,4,5,6,7,8,9,01,2,3,4,5,6,7,8,9,0”
console.log(typeof s); ?//返回字符串string，說(shuō)明是字符串類(lèi)型

toString() 在把數(shù)組轉(zhuǎn)換成字符串時(shí)，首先要將數(shù)組的每個(gè)元素都轉(zhuǎn)換為字符串。當(dāng)每個(gè)元素都被轉(zhuǎn)換為字符串時(shí)，才使用逗號(hào)進(jìn)行分隔，以列表的形式輸出這些字符串。

var a = [1,[2,3],[4,5]],[6,[7,[8,9],0]]]; ?//定義多維數(shù)組
var s = a.toString(); ?//把數(shù)組轉(zhuǎn)換為字符串
console.log(S); ?//返回字符串“1,2,3,4,5,6,7,8,9,0”

其中數(shù)組 a 是一個(gè)多維數(shù)組，JavaScript 會(huì)以迭代的方式調(diào)用 toString() 方法把所有數(shù)組都轉(zhuǎn)換為字符串。

示例2
下面使用 toLocalString() 方法讀取數(shù)組的值。

toLocalString() 方法與 toString() 方法用法基本相同，主要區(qū)別在于 toLocalString() 方法能夠使用用戶(hù)所在地區(qū)特定的分隔符把生成的字符串連接起來(lái)，形成一個(gè)字符串。

var a = [1,2,3,4,5]; ?//定義數(shù)組
var s = a.toLocalString(); ?//把數(shù)組轉(zhuǎn)換為本地字符串
console.log(s); ?//返回字符串“1,2,3,4,5,6,7,8,9,0”

在上面示例中，toLocalString() 方法根據(jù)中國(guó)的使用習(xí)慣，先把數(shù)字轉(zhuǎn)換為浮點(diǎn)數(shù)之后再執(zhí)行字符串轉(zhuǎn)換操作。

示例3
下面使用 join() 方法可以把數(shù)組轉(zhuǎn)換為字符串。

join() 方法可以把數(shù)組轉(zhuǎn)換為字符串，不過(guò)它可以指定分隔符。在調(diào)用 join() 方法時(shí)，可以傳遞一個(gè)參數(shù)作為分隔符來(lái)連接每個(gè)元素。如果省略參數(shù)，默認(rèn)使用逗號(hào)作為分隔符，這時(shí)與 toString() 方法轉(zhuǎn)換操作效果相同。

var a = [1,2,3,4,5]; ?//定義數(shù)組
var s = a.join("=="); ?//指定分隔符
console.log(s); ?//返回字符串“1==2==3==4==5”

示例4
下面使用 split() 方法把字符串轉(zhuǎn)換為數(shù)組。

split() 方法是 String 對(duì)象方法，與 join() 方法操作正好相反。該方法可以指定兩個(gè)參數(shù)，第 1 個(gè)參數(shù)為分隔符，指定從哪兒進(jìn)行分隔的標(biāo)記；第 2 個(gè)參數(shù)指定要返回?cái)?shù)組的長(zhǎng)度。

var s = "1==2== 3==4 ==5";
var a = s.split("==");
console.log(a);
console.log(a.constructor == Array);

?

二級(jí)下拉菜單

這里用原生js實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="bt1">


    </select>

    <select id="bt2">

    </select>
</body>
<script>
    var cityArr = ['北京', '上海', '廣州'];
    var areaArr = [
        ["東城區(qū)", "西城區(qū)", "崇文區(qū)", "宣武區(qū)", "朝陽(yáng)區(qū)", "豐臺(tái)區(qū)", "石景山區(qū)", "海淀區(qū)", "門(mén)頭溝區(qū)", "房山區(qū)", "通州區(qū)", "順義區(qū)", "昌平區(qū)", "大興區(qū)", "平谷區(qū)", "懷柔區(qū)", "密云縣", "延慶縣"],
        ["黃浦區(qū)", "徐匯區(qū)", "長(zhǎng)寧區(qū)", "靜安區(qū)", "普陀區(qū)", "閘北區(qū)", "虹口區(qū)", "楊浦區(qū)", "寶山區(qū)", "閔行區(qū)", "嘉定區(qū)", "松江區(qū)", "金山區(qū)", "青浦區(qū)", "南匯區(qū)", "奉賢區(qū)", "浦東新區(qū)", "崇明縣"],
        ["越秀區(qū)", "荔灣區(qū)", "海珠區(qū)", "天河區(qū)", "白云區(qū)", "黃埔區(qū)", "番禺區(qū)", "花都區(qū)", "南沙區(qū)", "蘿崗區(qū)", "增城市", "從化市"]
    ]

    // 把以上兩個(gè)數(shù)據(jù)做到兩個(gè)下拉列表中，并關(guān)聯(lián)起來(lái)
    //給bt1添加內(nèi)容
    var str = "";
    for (var j = 0; j < cityArr.length; j++) {
        str = str + "<option>" + cityArr[j] + "</option>";
    };
    console.log(str)
    var bt1 = document.getElementById("bt1"); //設(shè)置變量bt1=頁(yè)面中id為bt1的元素
    bt1.innerHTML = str; //設(shè)置bt1的內(nèi)容為str

    //給bt2添加內(nèi)容
    var str1 = "";

    for (var k = 0; k < areaArr[0].length; k++) {
        str1 = str1 + "<option>" + areaArr[0][k] + "</option>";
    }

    console.log(str1);
    var bt2 = document.getElementById("bt2"); //設(shè)置變量bt2=頁(yè)面中id為bt2的元素
    bt2.innerHTML = str1; //設(shè)置bt2的內(nèi)容為str

    // 聯(lián)動(dòng) 城市變化時(shí)對(duì)應(yīng)的地區(qū)也發(fā)生變化

    bt1.onchange = function() {
        var index = bt1.selectedIndex;
        var str1 = "";
        for (var n = 0; n < areaArr[index].length; n++) {
            str1 = str1 + "<option>" + areaArr[index][n] + '</option>'
        }
        bt2.innerHTML = str1;
    }
</script>

</html>

圖片預(yù)加載和懶加載？

原生js實(shí)現(xiàn)圖片懶加載

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        ul {
            width: 910px;
            margin: 0 auto;
        }
        
        ul li {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
        
        ul li img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <ul id="list">

    </ul>
</body>
<script type="text/javascript">
    var list = document.getElementById("list");
    for (var i = 1; i <= 32; i++) {

//下面這行代碼寫(xiě)圖片的路徑
        var imgPath = './image/' + (i <= 9 ? ('0' + i) : i) + ".jfif";
        var li = document.createElement("li");
        var img = document.createElement("img");
        img._src = imgPath;
        li.appendChild(img);
        list.appendChild(li);
    }
    var imgArr = document.querySelectorAll("img");
    console.log(imgArr[0]._src);
    //只顯示可視區(qū)中的圖片
    for (var i = 0; i < imgArr.length; i++) {
        var imgOffsetTop = imgArr[i].offsetTop;
        var bodyHeigh = document.documentElement.clientHeight;
        var bodySt = document.documentElement.scrollTop || document.body.scrollTop;
        //圖片的上邊框顯示到可視區(qū)域中
        if (imgOffsetTop <= bodyHeigh + bodySt) {
            imgArr[i].src = imgArr[i]._src;
        }
    }

    window.onscroll = function() {
        var imgArr = document.querySelectorAll("img");
        //只顯示可視區(qū)中的圖片
        for (var i = 0; i < imgArr.length; i++) {
            var imgOffsetTop = imgArr[i].offsetTop;
            var bodyHeigh = document.documentElement.clientHeight;
            var bodySt = document.documentElement.scrollTop || document.body.scrollTop;
            //圖片的上邊框顯示到可視區(qū)域中
            if (imgOffsetTop <= bodyHeigh + bodySt) {
                imgArr[i].src = imgArr[i]._src
            }
        }
    }
</script>

</html>

圖片預(yù)加載和懶加載
圖片懶加載
在渲染頁(yè)面的時(shí)候，先將圖片用一張默認(rèn)圖片代替，當(dāng)圖片到達(dá)瀏覽器可視區(qū)域時(shí)，才顯示真實(shí)的圖片。

這樣的好處是，可以減緩服務(wù)器負(fù)擔(dān)，加快初始界面的渲染速度。

實(shí)現(xiàn)方式：

使用setTimeOut或setInterval定時(shí)器進(jìn)行延遲加載
條件加載，符合條件或觸發(fā)事件后再進(jìn)行異步下載
通過(guò)滾動(dòng)條監(jiān)聽(tīng)用戶(hù)距圖片距離，快要到達(dá)之前進(jìn)行加載

// 通過(guò)滾動(dòng)條監(jiān)聽(tīng)用戶(hù)距圖片距離，到達(dá)進(jìn)行加載
? ? let img = document.querySelector('img')
? ? function lazyLoad(){
? ? ? let viewHeight = document.documentElement.clientHeight
? ? ? let scrollTop = document.documentElement.scrollTop
? ? ? // 判斷圖片是否進(jìn)入可視區(qū)
? ? ? if(img.offsetTop < viewHeight+scrollTop){
? ? ? ? var url ="https://himg.bdimg.com/sys/portraitn/item/46ecf7f5"
? ? ? ? img.src = url
? ? ? }
? ? }
? ? window.addEventListener('scroll',lazyLoad)

//如果放多張圖片 使用循環(huán)

圖片預(yù)加載
與懶加載相反，先將圖片提前加載到緩存，用戶(hù)一打開(kāi)頁(yè)面就能快速呈現(xiàn)圖片。

好處是，遇到一些較大的圖片時(shí)，可以避免頁(yè)面慢慢渲染。但是服務(wù)器負(fù)擔(dān)會(huì)增大。

實(shí)現(xiàn)方式：css的background元素會(huì)自動(dòng)預(yù)加載

// 預(yù)加載的圖片不能使用dispaly:none隱藏，只能將其寬高設(shè)為0或者移到看不見(jiàn)的地方
? <style>
? ? li{
? ? ? list-style: none;
? ? }
? ? #img {
? ? background-image: url('https://himg.bdimg.com/sys/portraitn/item/46ecf7f5');
? ? width: 0;
? ? height: 0; ?
? ? }
? </style>

<body>
? <li id="img"></li>
? <button>點(diǎn)擊展示</button>

? <script>
? ? let btn = ?document.querySelector('button')
? ? let li = document.querySelector('li')
? ? btn.addEventListener('click',function(){
? ? ? let myImg = document.createElement('img')
? ? ? myImg.src = 'https://himg.bdimg.com/sys/portraitn/item/46ecf7f5'
? ? ? li.appendChild(myImg)
? ? })? </script>
??
</body>

JavaScript則常用new Image()實(shí)現(xiàn)
?

 ? // 預(yù)加載圖片路徑
? ? const urlList = [
? ? 'https://himg.bdimg.com/sys/portraitn/item/46ecf7f5'
? ? ]

? ? function preLoad(){
? ? ? let img = new Image()
? ? ? img.src = urlList[0]
? ? ? // onload是圖片加載完成事件
? ? ? img.onload = function(){

        //放入圖片加載完之后的操作
? ? ? ? console.log('圖片預(yù)加載成功');

? ? ? }
? ? }

? ? preLoad()

?

原文鏈接：https://blog.csdn.net/qq_47234456/article/details/124568755

bind() apply()

const用法

Utf-8編碼漢字占多少個(gè)字節(jié)

ajax

js對(duì)數(shù)組的操作，包括向數(shù)組中插入刪除數(shù)據(jù)

兩種定時(shí)器，setinterval和settimeout。因?yàn)閟ettimeout是只執(zhí)行一次的，如果要執(zhí)行多次怎么做。（答案：設(shè)置一個(gè)回調(diào)函數(shù)，多次調(diào)用，大概是這樣，你可以去查查）

JS內(nèi)存回收機(jī)制

promise是什么？能解決什么問(wèn)題？

編程：連接兩個(gè)數(shù)組并返回？

冒泡排序？

創(chuàng)建新數(shù)組，向數(shù)組插入數(shù)據(jù)

es6新特性

js對(duì)數(shù)組有哪些操作方法

什么是ajax，可以用來(lái)做什么

講下你做輪播圖的思路，無(wú)縫輪播

js的選擇器

js數(shù)據(jù)類(lèi)型

減少頁(yè)面加載時(shí)間的方法

怎么理解模塊化開(kāi)發(fā)

什么是閉包，有什么作用？

定時(shí)器 settimeout和setinterval的區(qū)別，如果用settimeout實(shí)現(xiàn)每隔一定的時(shí)間就執(zhí)行一次，怎么實(shí)現(xiàn)

手機(jī)號(hào)的正則表達(dá)式(以1開(kāi)頭的11位數(shù)字)

<ol><li></li></ol>結(jié)構(gòu)的html代碼，寫(xiě)原生js實(shí)現(xiàn)點(diǎn)擊某個(gè)li就彈出對(duì)應(yīng)的索引值

對(duì)數(shù)組進(jìn)行隨機(jī)排序， 要求數(shù)組中的每個(gè)元素不能停留在原來(lái)的位置

代碼實(shí)現(xiàn)parse方法，將有效的JSON字符串轉(zhuǎn)換成JavaScript對(duì)象

原生js的變量類(lèi)型有哪些？ES6新增哪幾個(gè)變量類(lèi)型？

js的數(shù)組方法有哪些？

es6的有哪些擴(kuò)展？新增的數(shù)組方法有哪些？用什么方法連接兩個(gè)數(shù)組？函數(shù)擴(kuò)展中的箭頭函數(shù)中的this所指向的是什么？一般函數(shù)的this指向的又是什么？

用什么方法判斷是否是數(shù)組？又用什么方法判斷是否是對(duì)象？

http相關(guān)

1. GET和POST的區(qū)別？何時(shí)使用POST**
2. http狀態(tài)碼
3. HTTP狀態(tài)碼200/302/401/404/500分別代表什么意思
4. http協(xié)議
5. http中的方法，除了get方法、post方法
6. http和https的區(qū)別
7. http協(xié)議

瀏覽器

1. 瀏覽器存儲(chǔ)
2. 瀏覽器圖片加載

bootstrap

1. bootstrap的原理
2. 46.用過(guò)bootstrap的哪些組件，導(dǎo)航條怎么實(shí)現(xiàn)的（問(wèn)原理），怎么適應(yīng)窗口大小？
3. d-flex和d-block有什么沖突？
4. bootstrap的grid-system?
5. bookstrap的響應(yīng)式所示怎么實(shí)現(xiàn)的。
6. bookstrap柵格系統(tǒng)，你怎么理解柵格系統(tǒng)

vue相關(guān)

1. vue生命周期的理解
2. v-if和v-show的作用相似，它們的區(qū)別？
3. vue項(xiàng)目
4. v-model雙向綁定原理
5. 用過(guò)vue的哪些組件？
6. vue項(xiàng)目用什么搭建的，搭建的時(shí)候有遇到過(guò)什么問(wèn)題嗎？
7. axios的withCredential? intercepter,
8. vue-router 的模式有？
9. head標(biāo)簽里面有個(gè)什么vue(發(fā)音一樣我不知道是什么)方法還是啥東西？
10. watch的作用？為什么要用它？
11. vue的生命周期，哪個(gè)鉤子函數(shù)可以數(shù)據(jù)請(qǐng)求，為什么？
12. vue第三方組件的引入
13. vue第三方組件的引入
14. Vue中有哪些生命周期函數(shù)
15. 路由跳轉(zhuǎn)的方式
16. vue生命周期的理解
17. vue數(shù)據(jù)雙向綁定的原理，用了什么設(shè)計(jì)模式(web高級(jí))
18. Vue的鉤子函數(shù)
19. Vue基于什么語(yǔ)言
20. Vue的第三方組件庫(kù)ivew
21. 組件之間的傳參（例如子組件和父組件之間的傳參）
22. vue如何實(shí)現(xiàn)雙向據(jù)綁定？
23. vue父組件子組件通信？
24. vue刪除數(shù)據(jù)監(jiān)測(cè)不到？
25. 父組件子組件傳參
26. 路由跳轉(zhuǎn)的方式
27. vue路由傳參怎么實(shí)現(xiàn)？
28. vue生命周期的鉤子函數(shù)有哪些？
29. MVVM和MVC區(qū)別？

node相關(guān)

1 做node用了什么框架

2 用mongodb做過(guò)什么

3 node.js

4? module.export和export？

每一個(gè)node.js執(zhí)行文件，都自動(dòng)創(chuàng)建一個(gè)module對(duì)象，同時(shí)，module對(duì)象會(huì)創(chuàng)建一個(gè)叫exports的屬性，初始化的值是 {}

 module.exports = {};

在 node 的 js 模塊里可以直接調(diào)用?exports?和 module 兩個(gè)“全局”變量，但是 exports 是 module.exports 的一個(gè)引用。

• exports 是 module.exports 的一個(gè)引用
• module.exports 初始值為一個(gè)空對(duì)象 {}，所以 exports 初始值也是 {}
• require 引用模塊后，返回的是 module.exports 而不是 exports!!!!!
• exports.xxx 相當(dāng)于在導(dǎo)出對(duì)象上掛屬性，該屬性對(duì)調(diào)用模塊直接可見(jiàn)
• exports = 相當(dāng)于給 exports 對(duì)象重新賦值，調(diào)用模塊不能訪問(wèn) exports 對(duì)象及其屬性
• 如果此模塊是一個(gè)類(lèi)，就應(yīng)該直接賦值 module.exports，這樣調(diào)用者就是一個(gè)類(lèi)構(gòu)造器，可以直接 new 實(shí)例。

//plus.js

function plus(a,b){

return a+b;

}

// 這樣導(dǎo)出的 plus 是作為 exports 的一個(gè)方法被導(dǎo)出的

exports.plus = plus;



// main.js

var Plus = require('plus');

console.log(Plus.plus(1,2)); // 左邊的 Plus 是 require 過(guò)來(lái)的模塊名，右邊的是它的 plus 方法。

在 node 編譯的過(guò)程中，會(huì)把 js 模塊封裝成如下形式：

// require 是對(duì) Node.js 實(shí)現(xiàn)查找模塊的 Module._load 實(shí)例的引用

// __finename 和 __dirname 是 Node.js 在查找該模塊后找到的模塊名稱(chēng)和模塊絕對(duì)路徑

(function(exports,require,module,__filename,__dirname){

function plus(a,b){

return a+b;

}

exports.plus = plus;

})

為了將函數(shù)直接導(dǎo)出成模塊，而不是模塊的一個(gè)方法，需要

module.exports = plus;

// plus.js

function plus(a,b){

return a+b ;

}

module.exports = plus;

// main.js

var plus = require('plus');

console.log(plus(1,2));

exports = module.exports = {};

例子一：

var name = 'rainbow';

exports.name = name;

exports.sayName = function(){

console.log(name);

}

// 給 exports 賦值相當(dāng)于給 module.exports 這個(gè)空對(duì)象添加了兩個(gè)屬性，相當(dāng)于：

var name = 'rainbow';

module.exports.name = name;

module.exports.sayName = function(){

console.log(name);

}

例子二：

exports = module.exports = somethings

// 等價(jià)于

module.exports = somethings

exports = module.exports

// module.exports = somethings 是對(duì) mudole.exports 進(jìn)行了覆蓋，

// 此時(shí) module.exports 和 exports 的關(guān)系斷裂，

// mudole.exports 指向了新的內(nèi)存塊，

// 而exports 還是指向原來(lái)的內(nèi)存塊，

// 為了讓 module.exports 和 exports 還是指向同一個(gè)內(nèi)存或者說(shuō)指向同一個(gè)"對(duì)象"，

// 所以我們就 exports = module.exports.

例子三：

exports = function(){};

// 這樣就是重新給 exports 賦值，它將不再是 module.exports 的引用，二者將無(wú)任何聯(lián)系。

例子四：

module.exports.something = function(){};

exports.something = function(){};

// 上面兩個(gè)方程是等價(jià)的

例子五：

// index.js

var something = require('./requireMe');

something();

// requireMe.js

exports.something = function(){

console.log('am a function');

}

// 以上代碼會(huì)報(bào)錯(cuò)，因?yàn)?require 出來(lái)的 module.exports 是一個(gè)object，不能直接執(zhí)行

//修改方式一

// requireMe.js

module.exports = function(){

console.log('am a function');

}

// 當(dāng)把代碼改成上面這樣，就不會(huì)報(bào)錯(cuò)，因?yàn)榇藭r(shí)的 module.exports 是一個(gè) function,可以直接執(zhí)行。

// 修改方式二

// index.js

var something = require('./requireMe');

something.something();

// 因?yàn)檫@時(shí)候 require 出來(lái)的是一個(gè) object，有一個(gè) something 的屬性，所以可以這樣調(diào)用執(zhí)行。

總結(jié)：要導(dǎo)出的東西放在model.exports里面? ?model.exports={} 剛開(kāi)始他是一個(gè)空對(duì)象

? ? ? ?model.exports={ //這里面以鍵值對(duì)的形式放要導(dǎo)出的東西?}

可以使用對(duì)象的簡(jiǎn)寫(xiě)方式，

微信小程序

1. 微信小程序獲取用戶(hù)信息

react

1. react的生命周期?

數(shù)據(jù)庫(kù)相關(guān)

1. 數(shù)據(jù)庫(kù)
2. Mongodb的update有幾個(gè)參數(shù)？
3. vue和react的區(qū)別，用法區(qū)別

其他（此題目處供參考，根據(jù)個(gè)人情況回答）

1. 對(duì)哪個(gè)編程語(yǔ)言比較熟？
2. webpack中在production下怎么禁止console.log和alert？
3. 傳統(tǒng)網(wǎng)站、響應(yīng)式、vue、小程序的區(qū)別？
4. 除了學(xué)校和培訓(xùn)，你還自學(xué)有什么技術(shù)？
5. 項(xiàng)目中哪個(gè)是你做得比較好的，實(shí)現(xiàn)了什么功能
6. 項(xiàng)目中哪個(gè)是你做得比較好的，實(shí)現(xiàn)了什么功能
7. 項(xiàng)目中遇到兼容性問(wèn)題
8. 最近兩年面試題總結(jié)，答案有時(shí)間慢慢完善：
9. 購(gòu)物車(chē)的實(shí)現(xiàn)過(guò)程（包括怎么布局，可以用vue、react、jq等）
10. 購(gòu)物車(chē)詳情頁(yè)優(yōu)化（用戶(hù)商品加入太多導(dǎo)致頁(yè)面卡頓）（懶加載、分頁(yè)）
11. 數(shù)據(jù)結(jié)構(gòu)（排序算法，冒泡以外的）
12. 團(tuán)隊(duì)合作的經(jīng)驗(yàn)
13. 通宵經(jīng)歷（不是玩的）
14. 課外項(xiàng)目（自己瞎做的那種）
15. 為什么學(xué)前端？
16. 有沒(méi)有參賽或者除了學(xué)校課程內(nèi)容外的經(jīng)驗(yàn)？應(yīng)該是想知道有沒(méi)有合作經(jīng)驗(yàn)
17. 是否熟悉使用開(kāi)發(fā)者工具？有沒(méi)有使用過(guò)斷點(diǎn)調(diào)試？
18. 最近有沒(méi)有在看某一本書(shū)？或者是有沒(méi)有學(xué)習(xí)某一個(gè)課程？有沒(méi)有什么學(xué)習(xí)的計(jì)劃？

************持續(xù)更新中.......

實(shí)在抱歉 由于篇幅太長(zhǎng)，導(dǎo)編輯起來(lái)很卡所以沒(méi)有繼續(xù)編輯，? 進(jìn)行了分類(lèi)其他內(nèi)容放在以下鏈接（題目不一定相同）

前端十五道html面試題_一只路過(guò)的菜鳥(niǎo)的博客-CSDN博客_前端html面試題

js十五道面試題（含答案）_一只路過(guò)的菜鳥(niǎo)的博客-CSDN博客_js面試題

【30 道 Vue 面試題，內(nèi)含詳細(xì)講解】_一只路過(guò)的菜鳥(niǎo)的博客-CSDN博客_vue的一些面試題

http相關(guān)十道面試題（含答案）_一只路過(guò)的菜鳥(niǎo)的博客-CSDN博客_http面試題文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-839785.html

到了這里，關(guān)于前端200道面試題及答案（更新中）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！