前端面試實戰彙總

目錄

• html
  • 1.簡述一下對html語義化的理解
  • 2.行內元素有哪些？塊級元素有哪些？空（void）元素有哪些
  • 頁面導入樣式時，使用link和@import有什麼區別？
  • 介紹一下你對瀏覽器內核的理解？
  • 常見的瀏覽器內核有哪些？
  • html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
  • 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
  • Label的做用是什麼？是怎麼用的？
  • 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
  • 前端須要注意哪些SEO
  • 瀏覽器的渲染機制通常分爲如下幾個步驟
  • 重繪（Repaint）和迴流（Reflow）
• css
  • display: none; 與 visibility: hidden; 的區別
  • 外邊距摺疊(collapsing margins)
  • 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
  • CSS優先級算法如何計算？
  • position的值relative和absolute定位原點是？
  • CSS3有哪些新特性？
  • 對BFC規範(塊級格式化上下文：block formatting context)的理解？
  • css定義的權重
  • box-sizing 經常使用的屬性有哪些？分別有什麼做用？
  • css垂直居中的方法有哪些？
  • 在CSS樣式中常使用 px、em 在表現上有什麼區別？
  • 解釋下什麼是浮動和它的工做原理？
  • 浮動元素引發的問題？
  • 列舉幾種清除浮動的方式？
  • 介紹使用過的 CSS 預處理器？
  • CSS優化、提升性能的方法有哪些？
  • 瀏覽器是怎樣解析CSS選擇器的？
  • 抽離樣式模塊怎麼寫，說出思路？
  • 元素豎向的百分比設定是相對於容器的高度嗎？
  • 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
• js
  • Canvas 元素、webgl、threeJS
  • JavaScript的組成
  • JS的基本數據類型和引用數據類型
  • 檢測瀏覽器版本版本有哪些方式？
  • 介紹JS有哪些內置對象？
  • 如何最小化重繪(repaint)和迴流(reflow)？
  • Javascript做用鏈域?
  • dom0 dom2 事件綁定區別
  • 數據請求
  • 面向對象
  • 閉包
  • 數組去重
• es6
  • let const
  • 箭頭函數 this指向
  • 解構
  • ... 展開合併
  • promise
  • class (語法糖 => 構造函數,babel-loader)
  • 模塊化
  • Set解構 不能重複的相似於數組的一個新的結構
  • 字符串模板
  • 遇到不會的
• 綜合
  • 前端工程化工具 gulp&webpack
  • 團隊協做工具 版本控制工具， 代碼管理工具 svn&git
  • jquery
  • 事件循環
  • http相關
    • http狀態碼有那些？分別表明是什麼意思？
    • 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
    • 說說TCP傳輸的三次握手四次揮手策略
    • 斷開一個TCP鏈接則須要「四次揮手」：
    • TCP和UDP的區別
    • HTTP和HTTPS
    • 爲何HTTPS安全
    • 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
    • HTTP 的工做原理
  • 前端攻擊
• 遇到過哪些bug
  • react：
  • vue：
  • 小程序：
• MVC、MVP、MVVM三種區別及適用場合
• 第一家
  • 微信小程序開發 遇到了哪些bug 哪些部分是你開發的
  • 瀏覽器兼容性問題 有哪些兼容性問題
  • vue生命週期 經常使用的是哪些
  • from表單賦值 計算屬性和方法的區別
  • 職業規劃
  • 有什麼問題須要問技術面試官
• 第二家
  • 如何設置圖片透明度 兼容性問題
  • seo 有哪些注意點 什麼方法對seo更友好 title 有什麼屬性
  • 性能優化方案
  • cdn
  • 反向代理
  • 跨域cors
  • 本地項目關聯到遠程git倉庫
  • bug如何定位的
  • 如何獲取用戶的ip地址 代理服務器ip
  • 請求響應頭 頭裏面有什麼屬性
  • 如何知道用戶從哪一個網頁進來的
  • 有遇到過什麼技術難度 如何解決的
  • 遇到問題 如何本身解決的
  • 最近在學什麼技術
  • 本身的優勢和缺點
• 第三家
  • 標準盒模型
  • 圖片裁剪工具
  • canvas 瞭解過嘛
  • 如何返回的數據是json對象
  • delete操做以後 瀏覽器作了些什麼
  • nuxt的生命週期
  • vue的數據雙向綁定
  • base64瞭解過嘛
  • 跨域的解決方案
  • 爲何會產生跨域
  • ajax 如何設置請求頭
  • vue 的函數式寫法有了解過嘛
  • eslint 使用的是哪一種程度
• 第四家
  • 骨架屏懶加載怎麼實現的
  • 小程序的生命週期 分別是什麼用 請求數據放在哪裏
  • openId和unionId的區別
  • 預加載如何實現
  • vue生命週期 父傳子
  • 微信支付出現過什麼問題嗎

html

1.簡述一下對html語義化的理解

利於seo：搜索引擎爬出根據HTML標記和上下文鎖定關鍵字的權重
易閱讀、易於維護：
結構清晰：瀏覽器和搜索引擎解析解析

2.行內元素有哪些？塊級元素有哪些？空（void）元素有哪些

行內元素:a、span、img、
塊級元素：
空元素：br、

頁面導入樣式時，使用link和@import有什麼區別？

介紹一下你對瀏覽器內核的理解？

渲染引擎
js引擎

常見的瀏覽器內核有哪些？

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

html5有哪些新特性：

媒介回放 video audio
localStoreage 存放數據 若是沒有刪除 會永遠存在
sessionStoreage 數據瀏覽器關閉以後清除
語義化更好的內容元素
表單控件
新技術

純表現的元素 big center font tt b u
對可用性產生負面影響的元素 frame frameset noframes

支持HTML5新標籤

1. IE8/IE7/IE6支持經過document.createElement方法產生的標籤
   2.用框架 好比html5shim

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

Label的做用是什麼？是怎麼用的？

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

前端須要注意哪些SEO

瀏覽器的渲染機制通常分爲如下幾個步驟

重繪（Repaint）和迴流（Reflow）

css

display: none; 與 visibility: hidden; 的區別

外邊距摺疊(collapsing margins)

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

CSS優先級算法如何計算？

position的值relative和absolute定位原點是？

CSS3有哪些新特性？

對BFC規範(塊級格式化上下文：block formatting context)的理解？

css定義的權重

box-sizing 經常使用的屬性有哪些？分別有什麼做用？

css垂直居中的方法有哪些？

在CSS樣式中常使用 px、em 在表現上有什麼區別？

解釋下什麼是浮動和它的工做原理？

浮動元素引發的問題？

列舉幾種清除浮動的方式？

介紹使用過的 CSS 預處理器？

CSS優化、提升性能的方法有哪些？

瀏覽器是怎樣解析CSS選擇器的？

抽離樣式模塊怎麼寫，說出思路？

元素豎向的百分比設定是相對於容器的高度嗎？

什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

js

Canvas 元素、webgl、threeJS

JavaScript的組成

JS的基本數據類型和引用數據類型

檢測瀏覽器版本版本有哪些方式？

介紹JS有哪些內置對象？

如何最小化重繪(repaint)和迴流(reflow)？

Javascript做用鏈域?

dom0 dom2 事件綁定區別

數據請求

面向對象

閉包

數組去重

es6

let const

箭頭函數 this指向

解構

... 展開合併

promise

class (語法糖 => 構造函數,babel-loader)

模塊化

Set解構 不能重複的相似於數組的一個新的結構

字符串模板

遇到不會的

當時在公司的時候自學的react 項目着急 就直接用了 沒有注意到這些細節 回去我再去研究下

綜合

前端工程化工具 gulp&webpack

團隊協做工具 版本控制工具， 代碼管理工具 svn&git

git經常使用：
git pull
git add . 暫存區
git commit 提交到本地倉庫。
git push origin master:kerwin

代碼衝突怎麼解決？

git pull 再提交一次
藉助可視化工具合併

本地項目關聯到遠程git倉庫
徹底空白項目關聯：
git init 初始化
git remote add 地址
將所有文件加入git版本管理的意思是將當前文件夾下的所有文件放到版本管理中
git add 提交文件 使用-m 編寫註釋
git commit -m "註釋"
git push 執行完以上操做，項目就與遠程git倉庫關聯到了一塊兒，能夠正常使用了，去git項目頁上能夠看到剛剛提交的代碼

有文件的項目關聯：
git init
設置remote地址
git remote add origin 地址
獲取遠程倉庫master分支上的內容
git pull origin master
將當前分支設置爲遠程倉庫的master分支
git branch --set-upstream-to=origin/master master
將所有文件加入git版本管理 .的意思是將當前文件夾下的所有文件放到版本管理中
git add .
提交文件 使用-m 編寫註釋
git commit -m "註釋"
推送到遠程分支
git push
git config -l 配置文件頁，使用vim編輯器的推出命令退出 :wq

jquery

事件循環

http相關

http狀態碼有那些？分別表明是什麼意思？

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

說說TCP傳輸的三次握手四次揮手策略

斷開一個TCP鏈接則須要「四次揮手」：

TCP和UDP的區別

HTTP和HTTPS

爲何HTTPS安全

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

HTTP 的工做原理

https://www.jianshu.com/p/5dc1793a4d10

前端攻擊

1. CSRF的基本概念、縮寫、全稱
   CSRF的防範措施
   XSS的防範措施主要有三個：
   CSRF 和 XSS 的區別

遇到過哪些bug

react：

在頁面沒有加載完畢ajax 還在請求的時候 就立馬點擊其餘頁面 會報錯 這時候的組件已經銷燬了 可是ajax還在請求數據 this.setstate 還在執行 個人解決辦法是 在銷燬週期去this.setstate 賦值一個空函數

vue：

在使用vant的表單時 他的組件model 不是便可建立的 致使ref獲取不到 沒法賦初始值
個人解決辦法是設置表單的初始狀態（initialValues），尚未建立出來，讓狀態更新，渲染from表單時候傳入異步更新 ，等建立完畢以後再設置起內容

小程序：

最近出現的一個bug button在以前是佔滿一行的 可是最近微信改了樣式 設置了小型 若是要變成以前的 須要在page.json 去刪除v2 new Date跨平臺兼容性問題 只能本身手動把-替換/
沒法獲取UnionID的問題
用戶必須已經關注公衆號
必需要把公衆號和小程序綁定在開發平臺

MVC、MVP、MVVM三種區別及適用場合

MVC：Model（模型）-View 視圖（渲染頁面）-Controller（控制器） 實現關注點分離，即應用程序中的數據模型與業務和展現邏輯解耦
View 傳送指令到 Controller ；
Controller 完成業務邏輯後，要求 Model 改變狀態 ；
Model 將新的數據發送到 View，用戶獲得反饋
MVC優勢：
耦合性低，視圖層和業務層分離，
生命週期成本低
MVC使開發和維護用戶接口的技術含量下降
可維護性高，分離視圖層和業務邏輯層也使得WEB應用更易於維護和修改
部署快
MVC缺點：
不適合小型，中等規模的應用程序
視圖與控制器間過於緊密鏈接，
視圖對模型數據的低效率訪問，
MVP：MVP（Model-View-Presenter）是MVC的改良模式
MVVM：主要目的是分離視圖（View）和模型（Model） 低耦合 獨立開發 可測試 可重用性
https://blog.csdn.net/victoryzn/article/details/78392128

第一家

微信小程序開發 遇到了哪些bug 哪些部分是你開發的

瀏覽器兼容性問題 有哪些兼容性問題

1.不一樣瀏覽器的標籤默認的外補丁（margin）和內補丁（padding）不一樣
解決方案：css裏增長通配符*{margin：0；padding：0}
2.ajax略有不一樣
IE：ActiveXObject
其餘：xmlHttpReuest
3.IE與寬度和高度的問題
IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。
box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

4.IE9如下瀏覽器不能使用opacity
解決方案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);

vue生命週期 經常使用的是哪些

from表單賦值 計算屬性和方法的區別

職業規劃

研究技術，
若是之後有機會爲公司創造更大利益

有什麼問題須要問技術面試官

• 技術發展路線 ，技術棧
• 技術分享學習
• 什麼通知結果？
  如今項目是什麼項目 ，進行到什麼階段
  是否有我的提高培訓

有什麼問題須要問hr
公司對我有什麼指望 公司發展路線

第二家

如何設置圖片透明度 兼容性問題

seo 有哪些注意點 什麼方法對seo更友好 title 有什麼屬性

性能優化方案

cdn

反向代理

跨域cors

本地項目關聯到遠程git倉庫

徹底空白項目關聯：
git init 初始化
git remote add 地址 將所有文件加入git版本管理 .的意思是將當前文件夾下的所有文件放到版本管理中
git add 提交文件 使用-m 編寫註釋
git commit -m "註釋"
git push 執行完以上操做，項目就與遠程git倉庫關聯到了一塊兒，能夠正常使用了，去git項目頁上能夠看到剛剛提交的代碼

有文件的項目關聯：
git init
設置remote地址
git remote add origin 地址
獲取遠程倉庫master分支上的內容
git pull origin master
將當前分支設置爲遠程倉庫的master分支
git branch --set-upstream-to=origin/master master
將所有文件加入git版本管理 .的意思是將當前文件夾下的所有文件放到版本管理中
git add .
提交文件 使用-m 編寫註釋
git commit -m "註釋"
推送到遠程分支
git push

git config -l 配置文件頁，使用vim編輯器的推出命令退出 :wq

bug如何定位的

如何獲取用戶的ip地址 代理服務器ip

請求響應頭 頭裏面有什麼屬性

http://www.javashuo.com/article/p-yxaifony-ks.html

如何知道用戶從哪一個網頁進來的

HttpContext.Current.Request.UrlReferrer UrlReferrer是否是本身的頁面

有遇到過什麼技術難度 如何解決的

遇到問題 如何本身解決的

最近在學什麼技術

本身的優勢和缺點

優勢：單身 全身心投入到 沒有家庭負擔 自學能力強 邏輯能力強 自控能力強
缺點:缺點錢

第三家

標準盒模型

圖片裁剪工具

canvas 瞭解過嘛

如何返回的數據是json對象

delete操做以後 瀏覽器作了些什麼

nuxt的生命週期

vue的數據雙向綁定

base64瞭解過嘛

let const
var a
{
let a
}會出現什麼問題

跨域的解決方案

爲何會產生跨域

ajax 如何設置請求頭

vue 的函數式寫法有了解過嘛

eslint 使用的是哪一種程度

3.14159 用哪些截取後面4位小數
深拷貝 是什麼 如何實現
echarts 實現一個5維的效果 4個維度都特別端 若是有一個維度特別長處理

第四家

骨架屏懶加載怎麼實現的

小程序的生命週期 分別是什麼用 請求數據放在哪裏

openId和unionId的區別

預加載如何實現

vue生命週期 父傳子

微信支付出現過什麼問題嗎