CSS

• 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

    （1）有兩種， IE 盒子模型、W3C 盒子模型；
    （2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
    （3）區  別： IE的content部分把 border 和 padding計算了進去;
  

• CSS選擇符有哪些？哪些屬性可以繼承？

    *   1.id選擇器（ # myid）
    	2.類選擇器（.myclassname）
    	3.標簽選擇器（div, h1, p）
    	4.相鄰選擇器（h1 + p）
    	5.子選擇器（ul > li）
    	6.后代選擇器（li a）
    	7.通配符選擇器（ * ）
    	8.屬性選擇器（a[rel = "external"]）
    	9.偽類選擇器（a:hover, li:nth-child）
  
    *   可繼承的樣式： font-size font-family color, UL LI DL DD DT;
  
    *   不可繼承的樣式：border padding margin width height ;
  

• CSS優先級算法如何計算？

    *   優先級就近原則，同權重情況下樣式定義最近者為準;
    *   載入樣式以最后載入的定位為準;
  
    優先級為:
    	同權重: 內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
    	!important >  id > class > tag
    	important 比 內聯優先級高
  

• CSS3新增偽類有那些？

    	舉例：
    	p:first-of-type	選擇屬于其父元素的首個 
   元素的每個 
   元素。
    	p:last-of-type	選擇屬于其父元素的最后 
   元素的每個 
   元素。
        p:only-of-type	選擇屬于其父元素唯一的 
   元素的每個 
   元素。
    	p:only-child		選擇屬于其父元素的唯一子元素的每個 
   元素。
    	p:nth-child(2)	選擇屬于其父元素的第二個子元素的每個 
   元素。
  
    	::after			在元素之前添加內容,也可以用來做清除浮動。
    	::before			在元素之后添加內容
        :enabled  		
    	:disabled 		控制表單控件的禁用狀態。
    	:checked        單選框或復選框被選中。
  

• 如何居中div？

  • 水平居中：給div設置一個寬度，然后添加margin:0 auto屬性

     div{
     	width:200px;
     	margin:0 auto;
      }
    

  • 讓絕對定位的div居中

     div {
     	position: absolute;
     	width: 300px;
     	height: 300px;
     	margin: auto;
     	top: 0;
     	left: 0;
     	bottom: 0;
     	right: 0;
     	background-color: pink;	/* 方便看效果 */
     }
    

  • 水平垂直居中一

     確定容器的寬高 寬500 高 300 的層
     設置層的外邊距
    
     div {
     	position: relative;		/* 相對定位或絕對定位均可 */
     	width:500px;
     	height:300px;
     	top: 50%;
     	left: 50%;
     	margin: -150px 0 0 -250px;     	/* 外邊距為自身寬高的一半 */
     	background-color: pink;	 	/* 方便看效果 */
    
      }
    

  • 水平垂直居中二

     未知容器的寬高，利用 `transform` 屬性
    
     div {
     	position: absolute;		/* 相對定位或絕對定位均可 */
     	width:500px;
     	height:300px;
     	top: 50%;
     	left: 50%;
     	transform: translate(-50%, -50%);
     	background-color: pink;	 	/* 方便看效果 */
    
     }
    

  • 水平垂直居中三

     利用 flex 布局
     實際使用時應考慮兼容性
    
     .container {
     	display: flex;
     	align-items: center; 		/* 垂直居中 */
     	justify-content: center;	/* 水平居中 */
    
     }
     .container div {
     	width: 100px;
     	height: 100px;
     	background-color: pink;		/* 方便看效果 */
     }  
    

• display有哪些值？說明他們的作用。

      block       	塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。
      none        	元素不顯示，并從文檔流中移除。
      inline      	行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。
      inline-block  默認寬度為內容寬度，可以設置寬高，同行顯示。
      list-item   	象塊類型元素一樣顯示，并添加樣式列表標記。
      table       	此元素會作為塊級表格來顯示。
      inherit     	規定應該從父元素繼承 display 屬性的值。
  

• position的值relative和absolute定位原點是？

      absolute
    	生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。
      fixed （老IE不支持）
    	生成絕對定位的元素，相對于瀏覽器窗口進行定位。
      relative
    	生成相對定位的元素，相對于其正常位置進行定位。
      static
    	默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
      inherit
    	規定從父元素繼承 position 屬性的值。
  

• CSS3有哪些新特性？

      新增各種CSS選擇器	（: not(.input)：所有 class 不是“input”的節點）
      圓角		    （border-radius:8px）
      多列布局	    （multi-column layout）
      陰影和反射	（ShadowReflect）
      文字特效		（text-shadow、）
      文字渲染		（Text-decoration）
      線性漸變		（gradient）
      旋轉		 	（transform）
      縮放,定位,傾斜,動畫,多背景
      例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:
  

• 請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

     一個用于頁面布局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。
     較為復雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現。
     采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。
     它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
     常規布局是基于塊和內聯流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應。
     在布局上有了比以前更加靈活的空間。
  
     具體：http://www.w3cplus.com/css3/flexbox-basics.html
  

• 用純CSS創建一個三角形的原理是什么？

    把上、左、右三條邊隱藏掉（顏色設為 transparent）
    #demo {
      width: 0;
      height: 0;
      border-width: 20px;
      border-style: solid;
      border-color: transparent transparent red transparent;
    }
  

• 一個滿屏 品 字布局 如何設計?

    簡單的方式：
    	上面的div寬100%，
    	下面的兩個div分別寬50%，
    	然后用float或者inline使其不換行即可
  

• css多列等高如何實現？

    利用padding-bottom|margin-bottom正負值相抵；
    設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，
    當它里面的任 一列高度增加了，則父容器的高度被撐到里面最高那列的高度，
    其他比這列矮的列會用它們的padding-bottom補償這部分高度差。
  

• 經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

    * png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
  
    * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
  
    * IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
  
      浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
  
      這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
  
      漸進識別的方式，從總體中逐漸排除局部。
  
      首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。
      接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
  
      css
          .bb{
              background-color:red;/*所有識別*/
    	      background-color:#00deff9; /*IE6、7、8識別*/
    	      +background-color:#a200ff;/*IE6、7識別*/
    	      _background-color:#1e0bd1;/*IE6識別*/
          }
  
  
    *  IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
       也可以使用getAttribute()獲取自定義屬性;
       Firefox下,只能使用getAttribute()獲取自定義屬性。
       解決方法:統一通過getAttribute()獲取自定義屬性。
  
    *  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
       Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
  
    *  解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
  
    *  Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,
       可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
  
    超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
  

• li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

    行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
  

• 為什么要初始化CSS樣式。

    - 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
  
    - 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
  
    最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
  
    淘寶的樣式初始化代碼：
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }
  

• absolute的containing block(容器塊)計算方式跟正常流有什么不同？

    無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
    1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
    2、否則,則由這個祖先元素的 padding box 構成。
    如果都找不到，則為 initial containing block。
  
    補充：
    1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
    2. absolute: 向上找最近的定位為absolute/relative的元素
    3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
  

• CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？

  對于普通元素visibility:collapse;會將元素完全隱藏,不占據頁面布局空間,與display:none;表現相同. 如果目標元素為table,visibility:collapse;將table隱藏,但是會占據頁面布局空間. 僅在Firefox下起作用,IE會顯示元素,Chrome會將元素隱藏,但是占據空間.

• position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？

  如果元素的display為none,那么元素不被渲染,position,float不起作用,如果元素擁有position:absolute;或者position:fixed;屬性那么元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin折疊.

• 對BFC規范(塊級格式化上下文：block formatting context)的理解？

    （W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）
     一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
     不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
  

• css定義的權重

    以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：
  
    /*權重為1*/
    div{
    }
    /*權重為10*/
    .class1{
    }
    /*權重為100*/
    #id1{
    }
    /*權重為100+1=101*/
    #id1 div{
    }
    /*權重為10+1=11*/
    .class1 div{
    }
    /*權重為10+10+1=21*/
    .class1 .class2 div{
    }
  
    如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現
  

• 請解釋一下為什么需要清除浮動？清除浮動的方式

  清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。

    1、父級div定義height；
    2、父級div 也一起浮動；
    3、常規的使用一個class；
    	.clearfix::before, .clearfix::after {
    	    content: " ";
    	    display: table;
    	}
    	.clearfix::after {
    	    clear: both;
    	}
    	.clearfix {
    	    *zoom: 1;
    	}
  
    4、SASS編譯的時候，浮動元素的父級div定義偽類:after
    	&::after,&::before{
    	    content: " ";
            visibility: hidden;
            display: block;
            height: 0;
            clear: both;
    	}
  
    解析原理：
    1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
    2) height:0 避免生成內容破壞原有布局的高度。
    3) visibility:hidden 使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和交互;
    4）通過 content:"."生成內容作為最后一個元素，至于content里面是點還是其他都是可以的，例如oocss里面就有經典的 content:".",有些版本可能content 里面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
    5）zoom：1 觸發IE hasLayout。
  
    通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。
  

• 什么是外邊距合并？

    外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
    合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
    w3school介紹網址： http://www.w3school.com.cn/css/css_margin_collapsing.asp
  

• zoom:1的清除浮動原理?

    清除浮動，觸發hasLayout；
    Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
    譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。
  
    來龍去脈大概如下：
    當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。
  
    Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規范草案中。
  
    目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現元素的縮放呢？
    可以通過css3里面的動畫屬性scale進行縮放。
  

• 移動端的布局用過媒體查詢嗎？

  假設你現在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來， 而顯示設備、屏幕投影和打印等這些媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法

  當媒體查詢為真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。 當媒體查詢返回假， 標簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）。

  包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達式。 CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用于某些特定的設備范圍。

• 使用 CSS 預處理器嗎？喜歡那個？

    SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)
  

• CSS優化、提高性能的方法有哪些？

    關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）；
    如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
    提取項目的通用公有樣式，增強可復用性，按模塊編寫組件；增強項目的協同開發性、可維護性和可擴展性;
    使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；
  

• 瀏覽器是怎樣解析CSS選擇器的？

    樣式系統從關鍵選擇器開始匹配，然后左移查找規則選擇器的祖先元素。
    只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因為不匹配而放棄該規則。
  

• 在網頁中的應該使用奇數還是偶數的字體？為什么呢？

• margin和padding分別適合什么場景使用？

    margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
    margin用于布局分開元素使元素與元素互不相干；
    padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段
  

• 抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]

• 元素豎向的百分比設定是相對于容器的高度嗎？

• 全屏滾動的原理是什么？用到了CSS的那些屬性？

• 什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

• 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）

• ::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。

    單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
    雙冒號是在當前規范中引入的，用于區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，
    比如:first-line、:first-letter、:before、:after等，
    而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。
  
    想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
    在代碼順序上，::after生成的內容也比::before生成的內容靠后。
    如果按堆棧視角，::after生成的內容會在::before生成的內容之上
  

• 如何修改chrome記住密碼后自動填充表單的黃色背景 ？

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
      background-color: rgb(250, 255, 189); /* #FAFFBD; */
      background-image: none;
      color: rgb(0, 0, 0);
    }
  

• 你對line-height是如何理解的？

• 設置元素浮動后，該元素的display值是多少？

    自動變成了 display:block
  

• 怎么讓Chrome支持小于12px 的文字？

    1、用圖片：如果是內容固定不變情況下，使用將小于12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。
    2、使用12px及12px以上字體大小：為了兼容各大主流瀏覽器，建議設計美工圖時候設置大于或等于12px的字體大小，如果是接單的這個時候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
    3、繼續使用小于12px字體大小樣式設置：如果不考慮chrome可以不用考慮兼容，同時在設置小于12px對象設置-webkit-text-size-adjust:none，做到最大兼容考慮。
    4、使用12px以上字體：為了兼容、為了代碼更簡單 從新考慮權重下兼容性。
  

• 讓頁面里的字體變清晰，變細用CSS怎么做？

    -webkit-font-smoothing: antialiased;
  

• font-style屬性可以讓它賦值為“oblique” oblique是什么意思？

    傾斜的字體樣式
  

• position:fixed;在android下無效怎么處理？

    fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，
    原來的網頁還好好的在那，fixed的內容也沒有變過位置，
    所以說并不是iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。
    
  

• 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

    多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
  

• display:inline-block 什么時候會顯示間隙？(攜程)

    移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
  

• overflow: scroll時不能平滑滾動的問題怎么處理？

• 有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

• png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？

• 什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）

    如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，
    所以不如隔離開。
  
    因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
    這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。
  
    同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，
    提高了webserver的http請求的解析速度。
  

• style標簽寫在body后與body前有什么區別？

• 什么是CSS 預處理器 / 后處理器？

    - 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性，
      還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。
  
    - 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規范處理CSS，讓其更有效；目前最常做的
      是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。
  

• rem布局的優缺點

JavaScript

• 介紹js的基本數據類型。

    Undefined、Null、Boolean、Number、String、
    ECMAScript 2015 新增:Symbol(創建后獨一無二且不可變的數據類型 )
  

• 介紹js有哪些內置對象？

   Object 是 JavaScript 中所有對象的父對象
  
   數據封裝類對象：Object、Array、Boolean、Number 和 String
   其他對象：Function、Arguments、Math、Date、RegExp、Error
  
   參考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html
  

• 說幾條寫JavaScript的基本規范？

   1.不要在同一行聲明多個變量。
   2.請使用 ===/!==來比較true/false或者數值
   3.使用對象字面量替代new Array這種形式
   4.不要使用全局函數。
   5.Switch語句必須帶有default分支
   6.函數不應該有時候有返回值，有時候沒有返回值。
   7.For循環必須使用大括號
   8.If語句必須使用大括號
   9.for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。
  

• JavaScript原型，原型鏈 ? 有什么特點？

   每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，
   如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
   于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
   關系：instance.constructor.prototype = instance.__proto__
  
   特點：
   JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
  
  
    當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，
    就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。
   	function Func(){}
   	Func.prototype.name = "Sean";
   	Func.prototype.getInfo = function() {
   	  return this.name;
   	}
   	var person = new Func();//現在可以參考var person = Object.create(oldObject);
   	console.log(person.getInfo());//它擁有了Func的屬性和方法
   	//"Sean"
   	console.log(Func.prototype);
   	// Func { name="Sean", getInfo=function()}
  

• JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

   棧：原始數據類型（Undefined，Null，Boolean，Number、String）
   堆：引用數據類型（對象、數組和函數）
  
   兩種類型的區別是：存儲位置不同；
   原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬于被頻繁使用數據，所以放入棧中存儲；
   引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定。如果存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體
  

• 如何將字符串轉化為數字，例如12.3b?

    * parseFloat(12.3b);
    * 正則表達式，12.3b.match(/(d)+(.)?(d)+/g)[0] * 1, 但是這個不太靠譜，提供一種思路而已。
  

• 如何將浮點數點左邊的數每三位添加一個逗號，如12000000.11轉化為『12,000,000.11』?

    function commafy(num){
    	return num && num
    		.toString()
    		.replace(/(d)(?=(d{3})+.)/g, function($1, $2){
    			return $2 + ,;
    		});
    }
  

• 如何實現數組的隨機排序？

    方法一：
    	var arr = [1,2,3,4,5,6,7,8,9,10];
    	function randSort1(arr){
    		for(var i = 0,len = arr.length;i < len; i++ ){
    			var rand = parseInt(Math.random()*len);
    			var temp = arr[rand];
    			arr[rand] = arr[i];
    			arr[i] = temp;
    		}
    		return arr;
    	}
    	console.log(randSort1(arr));
    	
    方法二：
    	var arr = [1,2,3,4,5,6,7,8,9,10];
    	function randSort2(arr){
    		var mixedArray = [];
    		while(arr.length > 0){
    			var randomIndex = parseInt(Math.random()*arr.length);
    			mixedArray.push(arr[randomIndex]);
    			arr.splice(randomIndex, 1);
    		}
    		return mixedArray;
    	}
    	console.log(randSort2(arr));
  
    方法三：
    	var arr = [1,2,3,4,5,6,7,8,9,10];
    	arr.sort(function(){
    		return Math.random() - 0.5;
    	})
    	console.log(arr);
  

• Javascript如何實現繼承？

   1、構造繼承
   2、原型繼承
   3、實例繼承
   4、拷貝繼承
  
   原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。
   
   	function Parent(){
   		this.name = wang;
   	}
  
   	function Child(){
   		this.age = 28;
   	}
   	Child.prototype = new Parent();//繼承了Parent，通過原型
  
   	var demo = new Child();
   	alert(demo.age);
   	alert(demo.name);//得到被繼承的屬性
  

• JavaScript繼承的幾種實現方式？

  • 參考：構造函數的繼承，非構造函數的繼承；

• javascript創建對象的幾種方式？

   javascript創建對象簡單的說,無非就是使用內置對象或各種自定義對象，當然還可以用JSON；但寫法有很多種，也能混合使用。
  
  
   1、對象字面量的方式
  
   	person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
  
   2、用function來模擬無參的構造函數
  
   	function Person(){}
   	var person=new Person();//定義一個function，如果使用new"實例化",該function可以看作是一個Class
   	person.name="Mark";
   	person.age="25";
   	person.work=function(){
   	alert(person.name+" hello...");
   	}
   	person.work();
  
   3、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）
  
   	function Pet(name,age,hobby){
   	   this.name=name;//this作用域：當前對象
   	   this.age=age;
   	   this.hobby=hobby;
   	   this.eat=function(){
   	      alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
   	   }
   	}
   	var maidou =new Pet("麥兜",25,"coding");//實例化、創建對象
   	maidou.eat();//調用eat方法
  
  
   4、用工廠方式來創建（內置對象）
  
   	 var wcDog =new Object();
   	 wcDog.name="旺財";
   	 wcDog.age=3;
   	 wcDog.work=function(){
   	   alert("我是"+wcDog.name+",汪汪汪......");
   	 }
   	 wcDog.work();
  
  
   5、用原型方式來創建
  
   	function Dog(){
  
   	 }
   	 Dog.prototype.name="旺財";
   	 Dog.prototype.eat=function(){
   	 alert(this.name+"是個吃貨");
   	 }
   	 var wangcai =new Dog();
   	 wangcai.eat();
  
  
   5、用混合方式來創建
  
   	function Car(name,price){
   	  this.name=name;
   	  this.price=price;
   	}
   	 Car.prototype.sell=function(){
   	   alert("我是"+this.name+"，我現在賣"+this.price+"萬元");
   	  }
   	var camry =new Car("凱美瑞",27);
   	camry.sell();
  

• Javascript作用鏈域?

   全局函數無法查看局部函數的內部細節，但局部函數可以查看其上層的函數細節，直至全局細節。
   當需要從局部函數查找某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查找，
   直至全局函數，這種組織形式就是作用域鏈。
  

• 談談This對象的理解。

  this總是指向函數的直接調用者（而非間接調用者）；
  如果有new關鍵字，this指向new出來的那個對象；
  在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；
  

• eval是做什么的？

   它的功能是把對應的字符串解析成JS代碼并運行；
   應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。
   由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval((+ str +));
  

• 什么是window對象? 什么是document對象?

   window對象是指瀏覽器打開的窗口。
   document對象是Documentd對象（HTML 文檔對象）的一個只讀引用，window對象的一個屬性。
  

• null，undefined 的區別？

   null 		表示一個對象是“沒有值”的值，也就是值為“空”；
   undefined 	表示一個變量聲明了沒有初始化(賦值)；
  
   undefined不是一個有效的JSON，而null是；
   undefined的類型(typeof)是undefined；
   null的類型(typeof)是object；
  
  
   Javascript將未賦值的變量默認值設為undefined；
   Javascript從來不會將變量設為null。它是用來讓程序員表明某個用var聲明的變量時沒有值的。
  
   typeof undefined
   	//"undefined"
   	undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined；
   	例如變量被聲明了，但沒有賦值時，就等于undefined
  
   typeof null
   	//"object"
   	null : 是一個對象(空對象, 沒有任何屬性和方法)；
   	例如作為函數的參數，表示該函數的參數不是對象；
  
   注意：
   	在驗證null時，一定要使用　=== ，因為 == 無法分別 null 和　undefined
   	null == undefined // true
   	null === undefined // false
  
   再來一個例子：
  
   	null
   	Q：有張三這個人么？
   	A：有！
   	Q：張三有房子么？
   	A：沒有！
  
   	undefined
   	Q：有張三這個人么？
   	A：有！
   	Q: 張三有多少歲？
   	A: 不知道（沒有被告訴）
  

  參考閱讀：undefined與null的區別

• 寫一個通用的事件偵聽器函數。

   	// event(事件)工具集，來源：github.com/markyun
   	markyun.Event = {
   		// 頁面加載完成后
   		readyEvent : function(fn) {
   			if (fn==null) {
   				fn=document;
   			}
   			var oldonload = window.onload;
   			if (typeof window.onload != function) {
   				window.onload = fn;
   			} else {
   				window.onload = function() {
   					oldonload();
   					fn();
   				};
   			}
   		},
   		// 視能力分別使用dom0||dom2||IE方式 來綁定事件
   		// 參數： 操作的元素,事件名稱 ,事件處理程序
   		addEvent : function(element, type, handler) {
   			if (element.addEventListener) {
   				//事件類型、需要執行的函數、是否捕捉
   				element.addEventListener(type, handler, false);
   			} else if (element.attachEvent) {
   				element.attachEvent(on + type, function() {
   					handler.call(element);
   				});
   			} else {
   				element[on + type] = handler;
   			}
   		},
   		// 移除事件
   		removeEvent : function(element, type, handler) {
   			if (element.removeEventListener) {
   				element.removeEventListener(type, handler, false);
   			} else if (element.datachEvent) {
   				element.detachEvent(on + type, handler);
   			} else {
   				element[on + type] = null;
   			}
   		},
   		// 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
   		stopPropagation : function(ev) {
   			if (ev.stopPropagation) {
   				ev.stopPropagation();
   			} else {
   				ev.cancelBubble = true;
   			}
   		},
   		// 取消事件的默認行為
   		preventDefault : function(event) {
   			if (event.preventDefault) {
   				event.preventDefault();
   			} else {
   				event.returnValue = false;
   			}
   		},
   		// 獲取事件目標
   		getTarget : function(event) {
   			return event.target || event.srcElement;
   		},
   		// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；
   		getEvent : function(e) {
   			var ev = e || window.event;
   			if (!ev) {
   				var c = this.getEvent.caller;
   				while (c) {
   					ev = c.arguments[0];
   					if (ev && Event == ev.constructor) {
   						break;
   					}
   					c = c.caller;
   				}
   			}
   			return ev;
   		}
   	};
  

• ["1", "2", "3"].map(parseInt) 答案是多少？

   parseInt() 函數能解析一個字符串，并返回一個整數，需要兩個參數 (val, radix)，
   其中 radix 表示要解析的數字的基數。【該值介于 2 ~ 36 之間，并且字符串中的數字不能大于radix才能正確返回數字結果值】;
   但此處 map 傳了 3 個 (element, index, array),我們重寫parseInt函數測試一下是否符合上面的規則。
  
   function parseInt(str, radix) {
       return str+-+radix;
   };
   var a=["1", "2", "3"];
   a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大于radix
  
   因為二進制里面，沒有數字3,導致出現超范圍的radix賦值和不合法的進制解析，才會返回NaN
   所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]
  
   詳細解析：http://blog.csdn.net/justjavac/article/details/19473199
  

• 事件是？IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

    1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
    2. 事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；
    3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）
  

• 什么是閉包（closure），為什么要用它？

   閉包是指有權訪問另一個函數作用域中變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域，將函數內部的變量和方法傳遞到外部。
  
   閉包的特性：
  
   1.函數內再嵌套函數
   2.內部函數可以引用外層的參數和變量
   3.參數和變量不會被垃圾回收機制回收
  
   //li節點的onclick事件都能正確的彈出當前被點擊的li索引
    
  
       
   index = 0
       
   index = 1
       
   index = 2
       
   index = 3
   
   
  
  
  
   執行say667()后,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在
   使得Javascript的垃圾回收機制GC不會收回say667()所占用的資源
   因為say667()的內部函數的執行需要依賴say667()中的變量
   這是對閉包作用的非常直白的描述
  
     function say667() {
   	// Local variable that ends up within closure
   	var num = 666;
   	var sayAlert = function() {
   		alert(num);
   	}
   	num++;
   	return sayAlert;
   }
  
    var sayAlert = say667();
    sayAlert()//執行結果應該彈出的667
  

• javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？

   use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,
  
   使JS編碼更加規范化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。
   默認支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值;
   全局變量的顯示聲明,函數必須聲明在頂層，不允許在非函數代碼塊內聲明函數,arguments.callee也不允許使用；
   消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行為和非嚴格模式的也不相同;
  
   提高編譯器效率，增加運行速度；
   為未來新版本的Javascript標準化做鋪墊。
  

• 如何判斷一個對象是否屬于某個類？

     使用instanceof （待完善）
      if(a instanceof Person){
          alert(yes);
      }
  

• new操作符具體干了什么呢?

   	 1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
     	 2、屬性和方法被加入到 this 引用的對象中。
   	 3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。
  
   var obj  = {};
   obj.__proto__ = Base.prototype;
   Base.call(obj);
  

• 用原生JavaScript的實現過什么功能嗎？

• Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

   hasOwnProperty
  
   javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。
   使用方法：
   object.hasOwnProperty(proName)
   其中參數object是必選項。一個對象的實例。
   proName是必選項。一個屬性名稱的字符串值。
  
   如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。
  

• JSON 的了解？

   JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
   它是基于JavaScript的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小
   如：{"age":"12", "name":"back"}
  
   JSON字符串轉換為JSON對象:
   var obj =eval((+ str +));
   var obj = str.parseJSON();
   var obj = JSON.parse(str);
  
   JSON對象轉換為JSON字符串：
   var last=obj.toJSONString();
   var last=JSON.stringify(obj);
  

• [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？

• js延遲加載的方式有哪些？

   defer和async、動態創建DOM方式（用得最多）、按需異步載入js
  

• Ajax 是什么? 如何創建一個Ajax？

   ajax的全稱：Asynchronous Javascript And XML。
   異步傳輸+js+xml。
   所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。
  
   (1)創建XMLHttpRequest對象,也就是創建一個異步調用對象
   (2)創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息
   (3)設置響應HTTP請求狀態變化的函數
   (4)發送HTTP請求
   (5)獲取異步調用返回的數據
   (6)使用JavaScript和DOM實現局部刷新
  

• Ajax 解決瀏覽器緩存問題？

    1、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
  
    2、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
  
    3、在URL后面加上一個隨機數： "fresh=" + Math.random();。
  

       4、在URL后面加上時間戳："nowtime=" + new Date().getTime();。

    5、如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會執行這條語句就是不需要保存緩存記錄。

• 同步和異步的區別?

  同步的概念應該是來自于OS中關于同步的概念:不同進程為協同完成某項工作而在先后次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰后.異步則不存在這種順序性.

  同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新，重新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操作。

  異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。

  （待完善）

• 如何解決跨域問題?

   jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面
  

• 頁面編碼和被請求的資源編碼如果不一致如何處理？

• 服務器代理轉發時，該如何處理cookie？

   nginx
  

• 模塊化開發怎么做？

  立即執行函數,不暴露私有成員

       var module1 = (function(){
       　　　　var _count = 0;
       　　　　var m1 = function(){
       　　　　　　//...
       　　　　};
       　　　　var m2 = function(){
       　　　　　　//...
       　　　　};
       　　　　return {
       　　　　　　m1 : m1,
       　　　　　　m2 : m2
       　　　　};
       　　})();
  

  （待完善）

• AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規范區別？

  AMD 規范在這里：https://github.com/amdjs/amdjs-api/wiki/AMD

  CMD 規范在這里：https://github.com/seajs/seajs/issues/242

   Asynchronous Module Definition，異步模塊定義，所有的模塊將被異步加載，模塊加載不影響后面語句運行。所有依賴某些模塊的語句均放置在回調函數中。
  
    區別：
  
       1. 對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
       2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：
  
   // CMD
   define(function(require, exports, module) {
       var a = require(./a)
       a.doSomething()
       // 此處略去 100 行
       var b = require(./b) // 依賴可以就近書寫
       b.doSomething()
       // ...
   })
  
   // AMD 默認推薦
   define([./a, ./b], function(a, b) { // 依賴必須一開始就寫好
       a.doSomething()
       // 此處略去 100 行
       b.doSomething()
       // ...
   })
  

• requireJS的核心原理是什么？（如何動態加載的？如何避免多次加載的？如何 緩存的？）

   參考：http://annn.me/how-to-realize-cmd-load