2018前端圈面試題第一彈

前端築夢師發表於2018-09-25

position的值, relative和absolute分別是相對於誰進行定位的?

absolute :生成絕對定位的元素, 相對於最近一級的 定位不是 static 的父元素來進行定位。

fixed (老IE不支援)生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。

relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。

static 預設值。沒有定位,元素出現在正常的流中

sticky 生成粘性定位的元素,容器的位置根據正常文件流計算得出

如何解決跨域問題

jsonp

原理是:動態插入script標籤,通過script標籤引入一個js檔案,這個js檔案載入成功後會執行我們在url引數中指定的函式,並且會把我們需要的json資料作為引數傳入。

由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、埠)的資源,為了實現跨域請求,可以通過script標籤實現跨域請求,然後在服務端輸出JSON資料並執行回撥函式,從而解決了跨域的資料請求。

優點是相容性好,簡單易用,支援瀏覽器與伺服器雙向通訊。缺點是隻支援GET請求。

XML和JSON的區別?

資料體積方面。

JSON相對於XML來講,資料的體積小,傳遞的速度更快些。

據互動方面。

JSON與JavaScript的互動更加方便,更容易解析處理,更好的資料互動。

資料描述方面。

JSON對資料的描述性比XML較差。

傳輸速度方面。

JSON的速度要遠遠快於XML

談談你對webpack的看法

webpack 是模組打包工具,可以使用webpack來管理模組依賴,並編譯輸出所需的靜態檔案。打包web開發中所用的的html css javascript 以及各種靜態檔案。

webpack的兩大特色

1.code splitting(可以自動完成)(根據程式碼的分割並對檔案進行分塊)

2.loader 可以處理各種型別的靜態檔案,並且支援串聯操作

webpack 是以commonJS的形式來書寫指令碼滴,但對 AMD/CMD 的支援也很全面,方便舊專案進行程式碼遷移。

webpack具有requireJs和browserify的功能,但仍有很多自己的新特性:

對 CommonJS 、 AMD 、ES6的語法做了相容

對js、css、圖片等資原始檔都支援打包

串聯式模組載入器以及外掛機制,讓其具有更好的靈活性和擴充套件性,例如提供對CoffeeScript、ES6的支援

有獨立的配置檔案webpack.config.js

可以將程式碼切割成不同的chunk,實現按需載入,降低了初始化時間

支援 SourceUrls 和 SourceMaps,易於除錯

具有強大的Plugin介面,大多是內部外掛,使用起來比較靈活

8.webpack 使用非同步 IO 並具有多級快取。這使得 webpack 很快且在增量編譯上更加快

前端的模組化

AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出。

CMD 是 SeaJS 在推廣過程中對模組定義的規範化產出。

AMD 是提前執行,CMD 是延遲執行。

AMD推薦的風格通過返回一個物件做為模組物件,CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模組物件的目的。

談談效能優化問題

程式碼層面:避免使用css表示式,避免使用高階選擇器,通配選擇器。

快取利用:快取Ajax,使用CDN,使用外部js和css檔案以便快取,新增Expires頭,服務端配置Etag,減少DNS查詢等

請求數量:合併樣式和指令碼,使用css圖片精靈,初始首屏之外的圖片資源按需載入,靜態資源延遲載入。

請求頻寬:壓縮檔案,開啟GZIP,

程式碼層面的優化

少用全域性變數

用innerHTML代替DOM操作,減少DOM操作次數,優化javascript效能

用setTimeout來避免頁面失去響應

多個變數宣告合併

避免使用with(with會建立自己的作用域,會增加作用域鏈長度)

避免圖片和iFrame等的空Src。空Src會重新載入當前頁面,影響速度和效率

儘量避免寫在HTML標籤中寫Style屬性

移動端效能優化

儘量使用CSS3動畫,開啟硬體加速

適當使用觸控事件代替點選事件

避免使用css3漸變陰影效果

可以用transform: translateZ(0)來開啟硬體加速。

不濫用Float。Float在渲染時計算量比較大,儘量減少使用

不濫用Web字型。Web字型需要下載,解析,重繪當前頁面,儘量減少使用。

CSS中的屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)會觸發GPU渲染,請合理使用。過渡使用會引發手機過耗電增加

PC端的在移動端同樣適用

解決前端疑難雜症加群QQ786276452

相關文章