百度暑期前端實習一面（提前批）

1 自我介紹
2 你知道頁面跳轉(zhuǎn)嗎掂器？說說頁面跳轉(zhuǎn)的幾種實現(xiàn)方式
方法1：
在 <head></head>標簽內(nèi)插入<meta http-equit="refresh" content="10">格嘁。解釋：refresh代表刷新这橙，content為10代表過10秒進行刷新。
如果在conent屬性后加入URL的內(nèi)容熬丧，則會在10秒后跳轉(zhuǎn)到url所在的地址笋粟。注意這里的表達方法是content="10;url=https://www.baidu.com/"
代碼如下：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content = " 5 ; url = https://www.baidu.com/">
  <title>test</title>
</head>

缺點：不適用于struts框架
優(yōu)點：簡單操作
方法2:
使用javascript實現(xiàn)，方法：利用bom的location屬性href

window.location.

頁面在打開時會直接跳轉(zhuǎn)
定時跳轉(zhuǎn)：(2s后跳轉(zhuǎn)到百度首頁)

setTimeout("javascript:location.,2000)

方法3:

 <span id="totalSecond">5</span>
 <script type="text/javascript">
 var second = totalSecond.innerText;
 setInterval("a()",1000);
 function a(){
       totalSecond.innerText=second--;
       if(second<0)
       location.
      }
 </script>

存在瀏覽器兼容問題：

比如火狐瀏覽器它不兼容span和div的innerText屬性.
方法四：

<span  id="totalSecond">5</``span``>
<script  type="text/javascript">
var second = document.getElementById('totalSecond').textContent;

if (navigator.appName.indexOf("Explorer") > -1)  {

second = document.getElementById('totalSecond').innerText;
} else {

second = document.getElementById('totalSecond').textContent;

}

setInterval("redirect()", 1000);

function redirect() {

if (second <0) {

ocation.href = 'hello.html;

} else  if

(navigator.appName.indexOf("Explorer") > -1) {

document.getElementById('totalSecond').innerText = second--;
} else {

document.getElementById('totalSecond').textContent = second--;

        }
    }
   }


</script>

使用navigator.appName.indexOf("Explorer")<-1navigator是Bom的一個對象锹引，其中appName為它的一個屬性矗钟。可以顯示瀏覽器的名字嫌变《滞В火狐是Explorer。chorme是Netscape腾啥。
3 你知道怎么用css畫一個三角形嗎东涡？
https://www.cnblogs.com/v-weiwang/p/5057588.html

.div1{
    border-style:solid;
    border-width:0px 100px 100px 100px;
    border-color:red transparent yellow transparent;
    width:0px;
    height:0px;
  }

4 盒模型
http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html
盒子模型又分為標準（W3C）盒子模型和IE盒子模型
標準盒子模型：content(width)
IE盒子模型：content+padding-left+padding-right+border-left+border-right（width）
注意：在我們的html文檔中在開頭如果使用<!DOCTYPE html>申明則在任何瀏覽器下都會使用標準盒子模式冯吓。
5 舉例說一下你常用的字符集
常用的字符集有ASCII,以及utf-8。
6 flex盒子模型實現(xiàn)內(nèi)容水平垂直居中：
彈性布局默認不改變項目的寬度疮跑，但是它會改變其高度组贺。

 <!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>flexbox</title>
   <style type="text/css">
   body{
     display:flex;
     height:100vh;
     justify-content:center;
     align-items:center;
   }
   div{
     border:1px black solid;
   }

   </style>
 </head>
 <body>
    <div>
      我是水平垂直居中的
    </div>
 </body>
 </html>

7 圣杯布局：

<!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>圣杯布局</title>
  <style type="text/css">
  .container{
    display:flex;
    flex-direction:column;


  }
  header,footer{
    height:100px;
    flex:1;
    background:#ccc;
    height:100px;
    align-text:center;

  }
  .mediu{
    display:flex;
    flex:1;
    height:400px;
  }
  .the-mediu{
    flex:1;
    background:pink;
  }
  .the-left,.the-right{
    flex:0 0 12em;
    background:orange;
  }
  .the-left{
    order:-1;
  }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">header</header>
    <div class="mediu">
        <nav class="the-left">left</nav>
        <main class="the-mediu">mediu</main>
        <aside class="the-right">right</aside>
    </div>
    <footer class="footer">footer</footer>
  </div>
</body>
</html>

8 塊級元素和行內(nèi)元素：
塊級元素：高度及行高可控制，內(nèi)外邊距可控制祖娘。寬度默認為100%失尖，占一行〗ニ眨可以嵌套行內(nèi)元素掀潮。
行內(nèi)元素：寬高不可控制，設(shè)置高度只能通過行高琼富，內(nèi)外邊距只能改變左右間距仪吧，上下間距不能改變，只能嵌套文本或其他行內(nèi)元素鞠眉。
可以通過display屬性進行行內(nèi)元素和塊級元素的轉(zhuǎn)換：
display:block;
display:inline;(默認值)
display:inline-block;（行內(nèi)塊元素）
inline-block是可以設(shè)置寬高的行內(nèi)元素薯鼠，該元素雖然不占一行，但是可以設(shè)置寬高械蹋。
常用的塊級元素：
<div></div>：定義文檔中的節(jié)
<p></p> ：標簽列表
<ul></ul>：無序列表
<ol></ol>：有序列表
<h1>~<h6>:標題系列
表單系列
<hr>:水平線
<pre>:預(yù)定義文本
<article>:定義文章
<audio>:定義音頻
<canvas>:定義圖形
常用的行內(nèi)元素：
<img>：定義圖片
<input>：輸入
<a>:定義錨
<abbr>:定義縮寫
<vedio>:定義視頻
<i>:定義斜體
<strong>:定義強調(diào)
<span>：組合文檔中的行內(nèi)元素
<em>:定義強調(diào)
9 position
position:static;:靜態(tài)定位的元素不會受到top,bottom,left,right的影響出皇，（它是每個元素的默認值）
position:absolute;:絕對定位以瀏覽器右上角為基準設(shè)置位置，當一個盒子包含在另一個盒子中哗戈，它不占用空間位置恶迈。當父元素指定位置，子元素以父元素的左上角為基準谱醇；當父元素沒有指定位置，子元素以瀏覽器的左上角為基準指定位置步做。
position:relative;:相對定位：以元素自身的位置為基準設(shè)置位置,該定位會占用空間位置副渴，一般子元素設(shè)置相對定位，父元素設(shè)定絕對定位全度。
position:ffixed;:固定定位：不占空間煮剧，相對與瀏覽器位置絕對。
10 清除浮動：
（1）在浮動元素的父級添加overflow:hidden;即可将鸵，兼顧到低版本IE瀏覽器再加上一句zoom:1;
(2) 給浮動元素后面添加clear:both屬性勉盅；
（3）給父級元素加上clearfix類，并對它設(shè)置after屬性顶掉；

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

11 選擇器標簽的優(yōu)先級：
規(guī)則1:行內(nèi)>頁內(nèi)>外部引用>瀏覽器默認
規(guī)則2：草娜！important >內(nèi)聯(lián)>ID>偽類|類|屬性>標簽>偽對象>繼承；
權(quán)重相同時痒筒，css遵守就近原則宰闰。排在最后的元素優(yōu)先級最大茬贵。
12 em 和 rem 的區(qū)別：
兩者都是相對的單位元素。em是繼承父元素的字體移袍，rem是相對于html根節(jié)點的解藻。
13 事件委托：
https://www.cnblogs.com/liugang-vip/p/5616484.html
事件委托就是利用事件冒泡，只指定一個事件處理程序葡盗，就可以管理某一類型的所有事件螟左。
事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢觅够？就是事件從最深的節(jié)點開始胶背，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節(jié)點樹蔚约，div>ul>li>a;比如給最里面的a加一個click點擊事件奄妨，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div苹祟，有這樣一個機制砸抛，那么我們給最外面的div加點擊事件，那么里面的ul树枫，li直焙，a做點擊事件的時候，都會冒泡到最外層的div上砂轻，所以都會觸發(fā)奔誓，這就是事件委托，委托它們父級代為執(zhí)行事件搔涝。
總結(jié)厨喂；也就是利用冒泡事件的原理使得父級元素來管理DOM事件，達到減少DOM的使用而使得頁面優(yōu)化的效果庄呈。

14 重繪與回流
他們是瀏覽器渲染步驟中的兩個步驟蜕煌，對瀏覽器的性能影響會很大。
重繪是當外觀改變時诬留，會引起頁面重繪斜纪。
以下幾個動作可能會導致性能問題：
改變 window 大小
改變字體
添加或刪除樣式
文字改變
定位或者浮動
盒模型
很多人不知道重繪與回流與事件循環(huán)有關(guān)（event loop)
減少回流的方式：
（1）用translate 來代替 top
(2) 減少動畫的速度
（3）少改動盒子模型
（4）少使用DOM，可以用事件委托
（5）不要使用<table>標簽布局
（6）將頻繁使用的動畫轉(zhuǎn)化成圖層文兑，圖層能夠阻止該節(jié)點回流影響別的元素盒刚。比如對于 video 標簽，瀏覽器會自動將該節(jié)點變?yōu)閳D層绿贞。

15 js Promise原理及應(yīng)用
https://github.com/Zenquan/promise
17 BFC和防抖
https://www.cnblogs.com/libin-1/p/7098468.html

18 瀏覽器內(nèi)核
Wekbit是一個開源的Web瀏覽器引擎因块，也就是瀏覽器的內(nèi)核。Apple的Safari, Google的Chrome, Nokia S60平臺的默認瀏覽器籍铁，Apple手機的默認瀏覽器贮聂，Android手機的默認瀏覽器均采用的Webkit作為器瀏覽器內(nèi)核靠柑。Webkit的采用程度由此可見一斑，理所當然的成為了當今主流的三大瀏覽器內(nèi)核之一吓懈。另外兩個分別是Gecko和Trident歼冰，大名鼎鼎的Firefox便是使用的Gecko 內(nèi)核，而微軟的IE系列則使用的是Trident內(nèi)核耻警。
另外隔嫡，搜狗瀏覽器是雙核的，雙核并不是指一個頁面由2個內(nèi)核同時處理,而是所有網(wǎng)頁（通常是標準通用標記語言的應(yīng)用超文本標記語言）由webkit內(nèi)核處理,只有銀行網(wǎng)站用IE內(nèi)核甘穿。