前端實習生面試題分析(一)

来源:http://www.cnblogs.com/isLiu/archive/2017/11/11/7814014.html
-Advertisement-
Play Games

最近面試拿了很多公司的實習offer,只要是面試的都通過了,但其實目標是BTA或者到一個公司的核心技術部,無奈將這些公司一一拒絕。 接下來就分析下麵試題,也能給自己一個提升吧,以便後續的面試更輕車熟路些,題目沒什麼順序,想起什麼寫什麼,還有我面試過程中的一些小套路。 估計要寫好多,每天寫幾道題,而且 ...


最近面試拿了很多公司的實習offer,只要是面試的都通過了,但其實目標是BTA或者到一個公司的核心技術部,無奈將這些公司一一拒絕。

接下來就分析下麵試題,也能給自己一個提升吧,以便後續的面試更輕車熟路些,題目沒什麼順序,想起什麼寫什麼,還有我面試過程中的一些小套路。

估計要寫好多,每天寫幾道題,而且有些經驗性的東西也不容易寫出來

這篇寫的都是類似一些概念性的理論東西。

1.JS防抖和節流

先說為什麼要做防抖和節流,針對一些會頻繁觸發的事件,像scroll、resize,如果正常綁定事件處理函數的話,可能在很短的時間內多次連續觸發事件,十分影響性能。

所以,針對這種事件要做防抖或者節流處理。

1.防抖

做法就是限制下次函數調用之前必須等待的事件間隔。

實現方法就是維護一個定時器,規定事件後觸發函數,規定時間內觸發的話,就會取消之前的計時器並且重新設置計時器,這樣一來,只有最後一次操作能觸發。

2.節流

節流只允許一個函數在規定的時間內觸發一次。

它和防抖最大的區別就是,節流函數不管事件觸發多頻繁,都保證事件處理函數只在規定的時間內觸發一次;防抖只是最後一次事件才會觸發事件處理函數。

比如在頁面無限載入的場景下,我們需要用戶在滾動頁面時,每隔一段事件發送一次非同步請求,而不是用戶在停止頁面滾動時發送非同步請求。所以這種場景,就適合用節流來實現。

兩種實現方式:

  • 時間戳:容易理解,當高頻事件觸發時,第一次應該立即執行事件處理函數,然後再怎麼頻繁觸發事件,也都是會等到規定的時間間隔後才執行一次。

  • 定時器:當觸發事件的時候,設置一個定時器,再觸發事件的時候,若定時器是存在, 就什麼都不做;知道規定時間後,定時器執行事件處理函數,然後定時器被清空,這樣就可以設置下一個定時器。


2.TCP和UDP的區別

這個東西能說好多,面試要求簡潔,就寫個總結的答案,我推薦謝希仁的《電腦網路》第六版。

1.TCP是面向連接的運輸層協議;UDP是無連接的,即發送數據之前不需要建立鏈接,因此減少了開銷和發送數據的時延。

2.TCP提供可靠交付的服務,通過TCP連接傳送的數據,無差錯、不丟失、不重覆、並且按時到達;UDP使用最大努力交付,即不保證可靠性交付,因此主機不需要維持複雜的連接狀態。

3.TCP面向位元組流,TCP中的“流”指的是流入到進程或從進程流出的位元組序列;UDP是面向報文的,發送方的UDP對應用程式交下來的報文,在添加首部後就向下交付IP層。

4.UDP沒有擁塞控制,因此網路出現的擁塞不會使源主機的發送速率降低,符合很多實時應用(如IP電話、實時視頻會議等)的要求。

5.每一條TCP連接只能有兩個端點,每一條TCP連接只能是點對點的;UDP支持一對一、一對多、多對一和多對多的交互通信。

6.UDP的首部開銷小,只有8個位元組,比TCP的20個位元組的首部短。

7.TCP提供可靠的全雙工通信,TCP允許通信雙方的應用進程在任何時候都能發送數據;UDP是不可靠通道。


3.GET和POST的區別

紅字標記的一定要說出來

  • GET請求在瀏覽器回退時是無害的,POST會再次提交請求
  • GET請求產生的URL地址可以被收藏,而POST不可以
  • GET請求會被瀏覽器主動緩存,而POST不會,除非手動設置
  • GET請求只能進行URL編碼,而POST支持多種編碼方式
  • GET請求參數會被完整的保留在瀏覽器歷史記錄里,而POST中的參數不會被保留
  • GET請求在URL中傳遞的參數是有長度限制的(不固定,因瀏覽器決定),而POST沒有限制
  • GET請求只接受ASC2字元,而對參數的數據類型POST沒有限制
  • GET請求比POST更不安全,因為參數直接暴露在URL上,所以不能用來傳遞敏感數據
  • GET請求參數通過URL傳遞,而POST放在request.body上

4.JS載入時間線

1、創建Document對象,開始解析web頁面。解析HTML元素和他們的文本內容後添加Element對象和Text節點到文檔中。這個階段document.readyState = 'loading'。

2、遇到link外部css,創建線程載入,並繼續解析文檔。

3、遇到script外部js,並且沒有設置async、defer,瀏覽器載入,並阻塞,等待js載入完成並執行該腳本,然後繼續解析文檔。

4、遇到script外部js,並且設置有async、defer,瀏覽器創建線程載入,並繼續解析文檔;對於async屬性的腳本,腳本載入完成後立即執行。(非同步禁止使用document.write())

5、遇到img等,先正常解析dom結構,然後瀏覽器非同步載入src,並繼續解析文檔。

6、當文檔解析完成,document.readyState = 'interactive'。

7、文檔解析完成後,所有設置有defer的腳本會按照順序執行。(註意與async的不同,但同樣禁止使用document.write());

8、document對象觸發DOMContentLoaded事件,這也標志著程式執行從同步腳本執行階段,轉化為事件驅動階段。

9、當所有async的腳本載入完成並執行後、img等載入完成後,document.readyState = 'complete',window對象觸發load事件。

10、從此,以非同步響應方式處理用戶輸入、網路事件等。


5.如何解決canvas高分屏模糊問題?

在解析度比較高的屏幕,例如ip6/6s/mac等機器上,因為canvs繪製的是點陣圖,所以會導致模糊,解決方法是根據屏幕解析度修改canvas樣式代碼中的寬和高與canvas的width和height屬性的比例


6.cookie、localStorage、sessionStorage區別

1.從數據生命周期上來說

  • cookie:一般由伺服器端生成,可設置失效時間,如果在瀏覽器端生成cookie,則預設關閉瀏覽器後失效。
  • localStorage: 永久保存,除非被清除。
  • sessionStorage: 僅在當前會話下有效,關閉頁面或者瀏覽器被清除。

2.從數據存儲方面來說

  • cookie大小為4KB左右
  • storage一般為5MB

3.從與伺服器端通信方面

  • cookie每次都會攜帶在HTTP頭中,如果cookie保存過多會帶來性能問題
  • storage僅在客戶端保存,不參與和伺服器的通信

4.從易用性方面來說

  • cookie原生介面不友好
  • storage原生介面友好,也可自行封裝

7.使用CDN的好處

CDN是構建在網路之上的內容分髮網絡,依靠部署在各地的邊緣伺服器,通過中心平臺的負載均衡、內容分發、調度等功能模塊,使用戶就近獲取所需內容,降低網路擁塞,提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。

CDN的基本原理是廣泛採用各種緩存伺服器,將這些緩存伺服器分佈到用戶訪問相對集中的地區或網路中,在用戶訪問網站時,利用全局負載技術將用戶的訪問指向距離最近的工作正常的緩存伺服器上,由緩存伺服器直接響應用戶請求。

CDN網路是在用戶和伺服器之間增加Cache層,如何將用戶的請求引導到Cache上獲得源伺服器的數據,主要是通過接管DNS實現,這就是CDN的最基本的原理

所以好處就能總結出來了:

  1. 加速不說了

2.為了實現跨運營商、跨地域的全網覆蓋

  • CDN加速可以覆蓋全球的線路,通過和運營商合作,部署IDC資源,在全國骨幹節點商,合理部署CDN邊緣分發存儲節點,充分利用帶寬資源,平衡源站流量

3.保障網站安全

  • CDN的負載均衡和分散式存儲技術,可以加強網站的可靠性,相當無無形中給你的網站添加了一把保護傘,應對絕大部分的互聯網攻擊事件。防攻擊系統也能避免網站遭到惡意攻擊

4.異地備援

  • 當某個伺服器發生意外故障時,系統將會調用其他臨近的健康伺服器節點進行服務,進而提供接近100%的可靠性,這就讓你的網站可以做到永不宕機

5.節約成本

  • 使用CDN加速可以實現網站的全國鋪設,你根據不用考慮購買伺服器與後續的托管運維,伺服器之間鏡像同步,也不用為了管理維護技術人員而煩惱,節省了人力、精力和財力

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.創建project django-admin.py startproject myblog 2.創建app python manage.py startapp blog 3. 創建資料庫表 或 更改資料庫表或欄位 Python manage.py makemigrations blog Pyth ...
  • 本文來是從 java web輕量級開發麵試教程從摘錄的。 為什麼要從諸多的Java書籍里選擇這本?為什麼在當前網路信息量如此大的情況下還要買這本書,而不是自己通過查閱網路資料學習?我已經會開發Java Web程式了,有沒有必要買這本書? 筆者有12年的Java經驗,目前是某大型公司的架構師,知道軟體 ...
  • DTOJ 2704:數字互換 解題報告 2017.11.11 第一版 ——由翱翔的逗比w原創 題目信息: 題目描述 輸入兩個數作為交換數,輸出已交換順序後的兩個值。 輸入兩個數作為交換數,輸出已交換順序後的兩個值。 輸入 兩個整數,空格隔開 兩個整數,空格隔開 輸出 交換後的兩個整數,空格隔開 交換 ...
  • #include #define uint unsigned int #define uchar unsigned char sbit wei=P2^7; sbit duan=P2^6; sbit key1=P3^4; sbit key2=P3^5; sbit key3=P3^6; uchar co... ...
  • 本文主要針對Mac的jdk的安裝、環境變數配置、jdk卸載方面進行方法總結。 ...
  • 前言 - 思考還是 socket 寫過一點點, 總感覺很彆扭. 例如 read, recv, recvfrom 這些為啥這麼奇葩. 這是 linux 的設計嗎. 這種強糅合的 read 代碼, '帶壞'了多少人. 想起很久以前看過的 <<UNIX痛恨者手冊>>, 外加上常寫點跨平臺 庫. 不得不思考 ...
  • 、`const`關鍵字 在 之前, 中變數預設是全局性的,只存在函數級作用域,聲明函數曾經是創造作用域的唯一方法。這點和其他編程語言存在差異,其他語言大多數都存在塊級作用域。所以在 中,新提出的 和 關鍵字使這個缺陷得到了修複。 同時還引入的概念 ,用來定義一個常量,一旦定義以後不可以修改,如果是引 ...
  • 數組去重 function getSingle (arr) { var res = []; var jj = {}; for (i = 0; i < arr.length; i++) { if(!jj[arr[i]]) { res.push(arr[i]); jj[arr[i]] = 1; } } ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...