前端面試學習

前端須要掌握的知識：

一、精通HTML+css+、JavaScript

二、學習css3+html5

三、學習後臺語言：精通先後端至少兩門語言

 

 

 

http://mp.weixin.qq.com/s/GPQYKF-2wfBltrgziYTuRA

一、 viewport

<meta name="viewport" 
 content="width=device-width,
 initial-scale=1.0,
 minimum-scale=1.0,
 maximum-scale=1.0,
 user-scalable=no" />

延伸 提問

怎樣處理 移動端 1px 被 渲染成 2px 問題？？？

一、 局部處理
  meta標籤中的 viewport屬性 ，
 initial-scale 設置爲 1         
 rem 按照設計稿標準走，
 外加利用transfrome 的scale(0.5) 縮小一倍便可；
2 、全局處理
  meta標籤中的 viewport屬性 ，
 initial-scale 設置爲 0.5        
 rem 按照設計稿標準走便可

 

 2.跨域http://www.cnblogs.com/namehou/p/8468711.html

3.

三、 渲染優化

一、禁止使用iframe（阻塞父文檔onload事件）；
   *iframe會阻塞主頁面的Onload事件；
   *搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
   *iframe和主頁面共享鏈接池，
       而瀏覽器對相同域的鏈接有限制，
     因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，
 最好是經過javascript動態給iframe添加src屬性值，
 這樣能夠繞開以上兩個問題。
     
二、禁止使用gif圖片實現loading效果
（下降CPU消耗，提高渲染性能）； 
   
三、使用CSS3代碼代替JS動畫
（儘量避免重繪重排以及迴流）；    

四、對於一些小圖標，可使用base64位編碼，以減小網絡請求。
但不建議大圖使用，比較耗費CPU；
小圖標優點在於：                
1）.減小HTTP請求；                
2）.避免文件跨域；                
3）.修改及時生效；  
  
五、頁面頭部的<style></style> 會阻塞頁面；
（由於 Renderer進程中 JS線程和渲染線程是互斥的）；  
  
六、頁面頭部<script</script> 會阻塞頁面；
（由於 Renderer進程中 JS線程和渲染線程是互斥的）； 
   
七、頁面中空的 href 和 src 會阻塞頁面其餘資源的加載 
(阻塞下載進程)；    

八、網頁Gzip，CDN託管，data緩存 ，圖片服務器；   
 
九、前端模板 JS+數據，
  減小因爲HTML標籤致使的帶寬浪費，
  前端用變量保存AJAX請求結果，
  每次操做本地變量，
  不用請求，減小請求次數    
  
十、用innerHTML代替DOM操做，
 減小DOM操做次數，優化javascript性能。 
    
十一、當須要設置的樣式不少時設置
    className而不是直接操做style。    

十二、少用全局變量、緩存DOM節點查找的結果。
    減小IO讀取操做。    
    
1三、避免使用CSS Expression
  （css表達式)又稱Dynamic properties(動態屬性)。 
     
1四、圖片預加載，將樣式表放在頂部，將腳本放在底部  
     加上時間戳。    
     
1五、 避免在頁面的主體佈局中使用table，
     table要等其中的內容徹底下載以後纔會顯示出來，
     顯示比div+css佈局慢。
     對普通的網站有一個統一的思路，
     就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。
     向前端優化指的是，在不影響功能和體驗的狀況下，
     能在瀏覽器執行的不要在服務端執行，
     能在緩存服務器上直接返回的不要到應用服務器，
     程序能直接取得的結果不要到外部取得，
     本機內能取得的數據不要到遠程取，
     內存能取到的不要到磁盤取，
     緩存中有的不要去數據庫查詢。
     減小數據庫操做指減小更新次數、 
     緩存結果減小查詢次數、
     將數據庫執行的操做盡量的讓你的程序完成
    （例如join查詢），
     減小磁盤IO指儘可能不使用文件系統做爲緩存、
      減小讀寫文件次數等。
      程序優化永遠要優化慢的部分      換語言是沒法「優化」的。    ，

 

 

 

 

4.冒泡事件，監聽事件http://www.cnblogs.com/namehou/p/8468978.html

 

五、快速的讓一個數組亂序

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
 return Math.random() - 0.5;
 })
 console.log(arr);

應該有更好的方式？？？

十二、JS 判斷設備來源

function deviceType(){        
 var ua = navigator.userAgent;        
 var agent = ["Android", "iPhone", 
            "SymbianOS", 
           "Windows Phone", "iPad", "iPod"];    
for(var i=0; i<len,len = agent.length; i++)
 {            
 if(ua.indexOf(agent[i])>0){         
                break;
            }
        }
    }
 deviceType();    
 window.addEventListener('resize', 
 function(){
        deviceType();
    })

 微信的 有些不太同樣    
 function isWeixin(){        
 var ua = navigator.userAgent.toLowerCase();        
 if(ua.match(/MicroMessenger/i)=='micromessenger')
 {            
 return true;
        }
 else{            
 return false;
        }
    }

<script type="text/javascript">
function include(path){
var a = document.createElement("script");a.src = path;document.head.appendChild(a);}
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// 使用手機打開
include("https://lxbjs.baidu.com/lxb.js?sid=6843151")
}
</script>

1三、audio元素和video元素在ios和andriod中沒法自動播放

緣由： 由於各大瀏覽器都爲了節省流量，作出了優化，
        在用戶沒有行爲動做時（交互）不予許自動播放；
 //音頻，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>    
  
//音頻，寫法二
 <audio controls="controls"> 
 <source src="music/bg.ogg" type="audio/ogg"></source>
 <source src="music/bg.mp3" type="audio/mpeg"></source>
 優先播放音樂bg.ogg，不支持在播放bg.mp3
 </audio>    
    
//JS綁定自動播放（操做window時，播放音樂）
    $(window).one('touchstart', function(){
        music.play();
    })    
    
//微信下兼容處理
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);    
//小結
//1.audio元素的autoplay屬性在IOS及Android上沒法使用，
   在PC端正常；
   
//2.audio元素沒有設置controls時，
    在IOS及Android會佔據空間大小，
    而在PC端Chrome是不會佔據任何空間；
    //3.注意不要遺漏微信的兼容處理須要引用微信JS；

 

1四、css實現單行文本溢出顯示 ...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
固然還須要加寬度width屬來兼容部分瀏覽。

1五、實現多行文本溢出顯示...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;overflow: hidden;

 

1六、讓圖文不可複製

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

1七、盒子垂直水平居中

一、定位 盒子寬高已知， 
position: absolute; 
left: 50%; 
top: 50%; margin-left:-自身一半寬度; 
margin-top: -自身一半高度;

二、table-cell佈局 父級 
display: table-cell; 
vertical-align: middle;  
子級 margin: 0 auto;

三、定位 + transform ; 
適用於 子盒子 寬高不定時； 
（這裏是本人經常使用方法）    
position: relative / absolute;    
/*top和left偏移各爲50%*/
top: 50%;       
left: 50%;    
/*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
transform: translate(-50%, -50%);
注意這裏啓動了3D硬件加速哦
會增長耗電量的 
（至於何是3D加速 請看瀏覽器進程與線程篇）

四、flex 佈局
 父級： 
 /*flex 佈局*/
 display: flex;        
/*實現垂直居中*/
align-items: center;        
/*實現水平居中*/
justify-content: center;

再加一種水平方向上居中 ：
margin-left : 50% ; 
transform: translateX(-50%);

1九、最快捷的數組求最大值

var arr = [ 1,5,1,7,5,9];
 Math.max(...arr)  

20、更短的數組去重寫法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]

1 、介紹標準盒子模型：

寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：

寬度=內容寬度（content+border+padding）+ margin

 

二、 box-sizing屬性？

默認爲content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

7 、display有哪些值？說明他們的做用?

inline（默認）--內聯
none--隱藏
block--塊顯示
table--表格顯示
list-item--項目列表
inline-block

 

word-wrap（對長的不可分割單詞換行）word-wrap：break-word

11 、用純CSS建立一個三角形的原理是什麼？

首先，須要把元素的寬度、高度設爲0。而後設置邊框樣式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

 

 

Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

 

浮動問題？？？？？？？？？

 

44 、CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?

參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大於父元素時出現滾動條。
參數是visible時候，溢出的內容出如今父元素以外。
參數是hidden時候，溢出隱藏。

 

3六、讓頁面裏的字體變清晰，變細用CSS怎麼作？

-webkit-font-smoothing在window系統下沒有起做用，可是在IOS設備上起做用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。