三七互娛2018年秋招Web前端筆試題回憶

時間 2019-11-19

標籤三七 2018年 web 前端筆試回憶欄目 HTML 简体版

原文原文鏈接

依稀記得個大概，順序有可能不正確，就當作記錄吧，順便查缺補漏。javascript

一、涉及Vue.js。具體的忘了。css

二、用js寫出一個冒泡排序算法。html

解析：1.比較相鄰的兩個元素，若是前一個比後一個大，則交換位置。前端

　　　2.第一輪的時候最後一個元素應該是最大的一個。java

　　　3.按照步驟一的方法進行相鄰兩個元素的比較，這個時候因爲最後一個元素已是最大的了，因此最後一個元素不用比較。ajax

function bubbleSort(array){
     var len=array.length;
     var temp;
     for(var i=0;i<len-1;i++){
         for(var j=0;j<len-1-i;j++){
              if(array[j]>array[j+1]){
                  temp=array[j];
                  array[j]=array[j+1];
                  array[j+1]=temp;
               }
         }

     }
    return array;
}

var arr=[3,6,2,9,10,32,1];
console.log(arr);
bubbleSort(arr);
console.log(arr);

三、CSS中的選擇器的優先級是怎麼樣的？如何優化選擇器？正則表達式

行內樣式（權重爲1000） > id選擇器（權重爲100） > class類選擇器（權重爲10） > 標籤選擇器（權重爲1）算法

四、前端頁面的優化方法有哪些？有什麼優化工具？json

優化方法：跨域

１、減小Http請求，優化加載速度。

a、合併文件：將多個Script合成一個文件，將多個CSS文件合成一個文件；

b、使用「雪碧圖」CSS SPrites將背景圖整合到一張圖片中，經過座標來實現對背景進行定位；

c、減小DOM數量。

二、CSS：

a、避免使用CSS表達式；

b、避免使用@import引入css文件，使用link形式引入；

c、在頭部head中引入CSS樣式表文件。由於若是把CSS文件放在底部，大部分瀏覽器會現下載內容，可是不能顯示出來，由於CSS在最底部。

三、Javascript

a、去除重複的腳本；

b、儘可能減小DOM的訪問；

c、JS腳本文件在底部body以前或者以後引入；

d、將JS、CSS文件進行壓縮，去除中間的換行和空格等無用內容，減少體積，且注意JS和CSS文件的個數。

四、圖片部分

a、優化圖片

b、不要使用HTML縮放圖片，即不要在HTML中對圖片進行設置高度和寬度；

c、使用小且能夠存儲的favicon.ico圖標

五、cookies

a、給cookies減肥；

b、清除沒必要要的cookies

c、保證cookies儘可能小。

優化工具：

五、使用HTML5寫出一個頁面，包含頭部、頁頭、頁腳、文字內容和圖片。

<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <header>
        <h1>頭部</h1>
    </header>
    
    <nav>
       <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
       </ul>
    </nav>
    
    <section>
        <h2>Content is loading……</h2>
         <article>
            <p>Writing something……</p>
         </article>
    </section>
    
    <footer>
        <p><a href="https://i.cnblogs.com/">https://i.cnblogs.com/</a><p>
    </footer>
</body>
</html>

六、建立子類Child，使用原型和構造函數的方式繼承父類People的方法，並調用say函數說出姓名和年齡。

function People（name,age）{

this.name=name;

this.age=age;

this.say=function(){

alert("個人名字是:"+this.name+"我今年"+this.age+"歲！");

};

}

七、寫出ajax（跨域使用框架，但需說明使用了何種框架）的跨域異步獲取json數據的方法。可使用javascript進行跨域異步post數據嗎？

var url="http://www.37.com";

$.ajax(function(){
    type:"get";
    url:"http://www.37.com";
    dataType:"jsonp";
    jsonp:"jsoncallback";
    success:function(data){
        if(data.errorCode){
            alert("查詢失敗，錯誤碼爲："+result.errorCode);
            return;
        }
        alert(data);
     }
     error:function(){
          alert("查詢失敗！");
     }
            
});

八、寫出日期「2016-06-03」……的正則表達式（要寫的挺多的，具體的記不清了）

九、給input添加以下樣式（CSS3）：

背景爲圖片1.jpg，背景顏色爲藍色；長度200px;高度50px;文字居中顯示，邊框爲5像素虛線黑色；邊框爲5像素圓角，文字陰影，模糊。

十、對數組testArray進行如下操做：

a、從前面刪除一個數字；

b、從前面增長一個數字5；

c、給數組從小到大進行排序；

d、反轉數組；

e、在數組61以後加入6二、6三、64

var testArray=[3,4,61,8,1];
testArray.shift();
testArray.unshift(5);
function compact(a,b){
 return a-b;
}
testArray.sort(compact);
testArray.reverse();
testArray.splice(testArray.indexOf(61)+1,0,62,63,64);

ps:如發現有誤，歡迎指出，謝謝！