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