2019.9.4面試題

時間 2019-11-09

標籤 2019.9.4 面試欄目快樂工作简体版

原文原文鏈接

1. 輸入url，到渲染數據，共進行了幾步，請詳細說明一下從服務端到客戶端作了哪些操做？css

　在網址中輸入url -> DNS解析 (根據域名找到IP地址 -> IP地址發送http請求到服務端) -> 服務端接收數據 -> 服務端返回html響應-> 客戶端加載css並接收html開始進行渲染 -> 客戶端發送嵌入在html對象的請求 -> 客戶端發送異步請求 -> 服務端返回請求數據 -> 客戶端將返回的數據綁定在html標籤上html

2.服務端渲染和客戶端渲染是什麼？詳細描述一下vue

　服務端渲染：每當客戶端向服務端請求頁面時，服務端會先將指定頁面在後端渲染，渲染成功後將完整頁面返回到客戶端html5

　客戶端渲染：每當客戶端向服務端請求頁面時，服務端會先將模版頁面返回到客戶端，而後客戶端中html對象請求服務端得到數據，再返回到客戶端，客戶端將數據與html相關聯，進行渲染頁面node

　服務端渲染的好處：對SEO友好，由於服務端會返回一個完整的頁面進行渲染，爬蟲會爬到頁面上抓取關鍵字進行記錄jquery

　服務端渲染的壞處：對服務器壓力很大nginx

服務端渲染的優化：可本地緩存，減緩服務器對壓力web

　客戶端渲染的好處：對服務器壓力不大express

客戶端渲染的壞處：對SEO不友好json

　客戶端渲染的優化：可以使用nuxt.js, node.js 配合使用，或者查看vue官網給出的方法

3.存儲的方法有哪幾種？

　localstorage， sessionstorage， cookie

4.html5有哪些新特性

1.語義化標籤

2.表單

3.canvas

4.視頻和音頻 video，audio

5.拖放API

6.地理定位 window.navigator.geoLocation

7.SVG繪圖

8.webstorage localstorage, sessionstoage

9.webworker

10.websocket send發送， onmessage接收

5.選擇器有哪幾種，給其排序

id < class < 標籤 < 子選擇器（ul > li ） < 後代選擇器 ( ul li ) < 僞類 < 屬性選擇器（input[type='text']）

6.call, apply, bind區別與相同點

call(obj, a, b) 當即執行

apply(obj, [a, b]) 當即執行

bind(obj, a, b) 不當即執行，後面加()當即執行

這三者都是爲了改變this指向

7.display，position的屬性值有哪些？box-sizing: content-box與border-box有什麼區別？

dispaly：flex；block；none；inline-block；inline；table；inline-table；table-row；table-column；

position：absolute；fixed；relative；static；inherit；

box-sizing: content-box; 標準盒模型，不包括padding和border

box-sizing: border-box；怪異盒模型，包括padding和border

8.jquery的.bind和.live，.delegate()和.on()區別是什麼？

9.跨域通訊有哪幾種？分別講述一下如何進行跨域的？什麼是跨域？

1.nginx 在nginx中反向代理api

2.jsonp 動態添加script，img，iframe標籤經過get的方式請求數據（jsonp爲何能夠解決跨域，由於script，img，iframe標籤能夠請求第三方資源）

3. window.name + iframe

4. window.domain + iframe

a.html <iframe></iframe> <script>window.domain = '你好' var user = '小明'</script>

b.html <script>window.domain = '你好' console.log(window.parent.user) <script>

5.location.hash + iframe

10.將下面['a', 'b', 'ab'].upperCase() => ['A', 'B', 'AB']

['a', 'b', 'ab'].upperCase( e => e.toUpperCase() )

11.[1 2 38 7 5 6 4 9 8] => [1 2 3 4 5 6 7 8 9]

12.nginx是如何進行跨域的？nginx是什麼？

nginx中須要配置域名，端口號，請求api，nginx最強的地方是反向代理，

舉例：在瀏覽器中輸入www.a.com，請求接口是www.b.com

nginx配置
server {
        listen       80;
        server_name  www.a.com;
        access_log  logs/test.access.log;
        # 匹配以/apis/開頭的請求
        location ^~ /apis/ {
            proxy_pass http://www.b.com/;  #注意域名後有一個/
        }
        location / {
            root html/a;
            index index.html index.htm;
        }
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

13.express.js是什麼

14.如何進行移動端的兼容？如何實現每部手機都展現相同的頁面？

使用rem根據UI給的設計圖安裝750px設置； 1rem = 1px;

或者也可根據postcss進行設置，默認UI設計圖1px = 1px；

15.1rem等於多少px？

rem是相對於根元素<html>, 並非相對於<body>

html { font-size: 12px } 那麼 1rem = 12px

body { font-size: 12px } 是爲了固定頁面的默認字體大小

16.vue和jquery的區別和優點是什麼？哪一個更好？

vue主要以數據和視圖徹底分開，並相互綁定，能夠處理一些複雜數據操做界面，側重於數據綁定

jquery主要使用Dom實現js側重樣式操做，動畫效果等

若是進行復雜數據操做可選擇vue；若是須要動畫效果很棒，可以使用jquery