1. 程式人生 > >前端面試題系列(二)

前端面試題系列(二)

第二彈
筆試題

1.

①行內元素:佔位不能充滿正行的元素,不能設定寬高,寬高由內容撐開,只能容納行內元素。

例如:
     span - 常用內聯容器,定義文字內區塊 
     em - 強調 
     strong - 粗體強調
     img - 圖片   
     input - 輸入框 
     ...    

②塊級元素:佔位充滿正行的元素,可以設定寬高,可以容納任何元素

例如:
     span - 常用內聯容器,定義文字內區塊 
     em - 強調 
     strong - 粗體強調
     img - 圖片   
     input - 輸入框 
     ...    

③空元素:沒有內容的元素,即單標籤,

例如:
     br - 換行
     hr - 水平分割線
     ...    

補充④行內塊元素:佔位沒有充滿正一行,寬高可以設定,可以容納任意元素標籤

例如:
     img - 圖片
     input - 輸入框
     ...    

2.

CSS 引入方式差異看這裡,看這裡

3.

常用瀏覽器核心看這裡

4.

cookie、sessionStorage和localStorage區別看這裡

5.

①title和h1區別:
title標題是給搜尋引擎看的,h1標籤的內容是給使用者看的。
一個頁面也可以擁有多個h1,但會稀釋主題,不利於搜尋引擎搜尋,所以通常一個好的網站的一個頁面只有一個h1,同時擁有一個title,網站的所有單頁都可以擁有一個title,這樣有利於SEO優化,另外title的權重高於h1,其適用性要比h1廣

②b和strong的區別
b代表bold(粗體),strong代表強調,強調的預設表現形式就是加粗字型,所以兩者在表現形式上一樣,有文章說strong有利於SEO優化,實際上兩者並沒有什麼顯著的差異。

③i和em區別
em 強調文字,通常以斜體渲染,i 指定文字應以斜體渲染,若可用的話。兩者的區別和上面的一樣,表現形式一樣,但是意義不同。

1.

源於W3C

2.

源於W3C

3.

CSS初始化是為了考慮到瀏覽器的相容問題,其實不同瀏覽器對有些標籤的預設值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面差異。當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。

4.

方法:1利用viewport適應螢幕寬高

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

通過@media 控制字型,單位用rem

方法2:通過切換CSS 樣式表

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 400px) and (max-device-width: 600px)” href=”smallScreen.css” />

5.

相容不同螢幕大小終端的網頁設計,即可以在不同終端都有完美的網頁展示。響應式設計的基本原理即:通過@media媒體查詢,動態的改變網頁內個元素的樣式。

1.

js中有5種資料型別:

//基本的資料型別
"boolean"---布林值
"string" ---字串
"number"----數值
"undefine"--未定義
"null"------空
//複雜的資料型別
"object" ---物件

2.

call, apply都屬於Function.prototype的一個方法,它是JavaScript引擎內在實現的,因為屬於Function.prototype,所以每個Function物件例項,也就是每個方法都有call, apply屬性.既然作為方法的屬性,那它們的使用就當然是針對方法的了.這兩個方法是容易混淆的,因為它們的作用一樣,只是使用方式不同.

相同點:兩個方法產生的作用是完全一樣的
不同點:方法傳遞的引數不同

function.apply(thisObj,argArray)
function.call(thisObj,arg1,arg2,…)
第一個引數: 應用或者呼叫的物件,兩者沒差別
第二個引數:apply接收的是陣列 argArray,而call接收的是一個一個的引數

3.

源於W3C

4.

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。IE6,7,8,9均不支援嚴格模式。它不是一條語句,但是是一個字面量表達式,在 JavaScript 舊版本中會被忽略。

“use strict” 的目的是指定程式碼在嚴格條件下執行。嚴格模式下你不能使用未宣告的變數。

為什麼使用嚴格模式:
消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為; 消除程式碼執行的一些不安全之處,保證程式碼執行的安全;
提高編譯器效率,增加執行速度;
為未來新版本的Javascript做好鋪墊。

5.

Cookie在訪問對應域名下的資源的時候都會通過Http請求傳送到伺服器,但是在訪問一些資源(例如js指令碼,css和圖片)的時候,大多數情況下這些Cookie是多餘的,所以我們可以通過使用不同的主機來儲存一些靜態資源,例如用專門的主機來儲存圖片,這樣訪問這些資源的時候就不會發送多餘的Cookie,從而提高響應速度。

1.

var arr = [98,87,85,53,67,99,90];
var max = Math.max.apply(null,arr);
var index = 0;
for (var i = 0; i < arr.length; i++) {
    if(max === arr[i]){
        index = i
    }
};
document.write(index);

2.

二分法只用於有序陣列,如果進行了排序,這樣查找出來的下標又不是題目要的答案,所以不懂此題意義何在。

//排序後獲取的下標,不知是否為所需的
var arr = [98,87,85,53,67,99,90]; 
for(var i=0;i<arr.length;i++){
    for(var j = i + 1;j<arr.length;j++){
        if(arr[i]>arr[j]){
            var tmp = arr[i];
            arr[i] = arr[j];
            arr[j] = tmp;
        }
    }
}
function binarySearch(data,item,start,end){
    var end=end || data.length-1;
    var start=start || 0;
    var m=Math.floor((start+end)/2);
    if(item==data[m]){
        return m;
    }else if(item<data[m]){
        return binarySearch(data,item,start,m-1) //遞迴呼叫
    }else{
        return binarySearch(data,item,m+1,end);
    }
    return false;
}

    console.log(binarySearch(arr,67));

hapi是一個簡單易用的配置中心框架,內建支援輸入驗證,快取身份驗證以及用於構建Web和服務應用程式的其他必要設施。 hapi使開發人員能夠專注於以高度模組化和規範性方法編寫可重用應用程式邏輯