2018前端圈面試題第一彈

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