[TOC]
# 1、規避javascript多人開發函數重名問題
* 命名空間
* 封閉空間
* js模塊化mvc(數據層、表現層、控制層)
* seajs
* 變量轉換成對象的屬性
* 對象化
# 2、請說出三種減低頁面加載時間的方法
1. 壓縮css、js文件
2. 合并js、css文件,減少http請求
3. 外部js、css文件放在最底下
4. 減少dom操作,盡可能用變量替代不必要的dom操作
# 3、你所了解到的Web攻擊技術
(1)XSS(Cross-Site Scripting,跨站腳本攻擊):指通過存在安全漏洞的Web網站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。
(2)SQL注入攻擊
(3)CSRF(Cross-Site Request Forgeries,跨站點請求偽造):指攻擊者通過設置好的陷阱,強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。
# 4、web前端開發,如何提高頁面性能優化?
## 內容方面:
1. 減少 HTTP 請求 (Make Fewer HTTP Requests)
2. 減少 DOM 元素數量 (Reduce the Number of DOM Elements)
3. 使得 Ajax 可緩存 (Make Ajax Cacheable)
## 針對CSS:
1. 把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)
2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4. 避免 CSS 表達式 (Avoid CSS Expressions)
## 針對JavaScript :
1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)
2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4. 移除重復腳本 (Remove Duplicate Scripts)
## 面向圖片(Image):
1. 優化圖片
2. 不要在 HTML 中使用縮放圖片
3. 使用恰當的圖片格式
4. 使用 CSS Sprites 技巧對圖片優化
# 5、前端開發中,如何優化圖像?圖像格式的區別?
## 優化圖像:
1. 不用圖片,盡量用css3代替。 比如說要實現修飾效果,如半透明、邊框、圓角、陰影、漸變等,在當前主流瀏覽器中都可以用CSS達成。
2. 使用矢量圖SVG替代位圖。對于絕大多數圖案、圖標等,矢量圖更小,且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了,所以可放心使用!
3. 使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。
4. 基本上,內容圖片多為照片之類的,適用于JPEG。
而修飾圖片通常更適合用無損壓縮的PNG。
6. GIF基本上除了GIF動畫外不要使用。且動畫的話,也更建議用video元素和視頻格式,或用SVG動畫取代。
7. 按照HTTP協議設置合理的緩存。
8. 使用字體圖標webfont、CSS Sprites等。
9. 用CSS或JavaScript實現預加載。
10. WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮,動態、靜態圖片,壓縮比率優于GIF、JPEG、JPEG2000、PG等格式,非常適合用于網絡等圖片傳輸。
## 圖像格式的區別:
> 矢量圖:圖標字體,如 font-awesome;svg
> 位圖:gif,jpg(jpeg),png
## 區別:
1. gif:是是一種無損,8位圖片格式。具有支持動畫,索引透明,壓縮等特性。適用于做色彩簡單(色調少)的圖片,如logo,各種小圖標icons等。
2. JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片,不適合做色彩簡單(色調少)的圖片,如logo,各種小圖標icons等。
3. png:PNG可以細分為三種格式:PNG8,PNG24,PNG32。后面的數字代表這種PNG格式最多可以索引和存儲的顏色值。
關于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增加了8位(256階)的alpha通道透明;
## 優缺點:
1. 能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
2. 對于需要高保真的較復雜的圖像,PNG雖然能無損壓縮,但圖片文件較大,不適合應用在Web頁面上。
# 6、瀏覽器是如何渲染頁面的?
渲染的流程如下:
1. 解析HTML文件,創建DOM樹。
2. 自上而下,遇到任何樣式(link、style)與腳本(script)都會阻塞(外部樣式不阻塞后續外部腳本的加載)。
3. 解析CSS。優先級:瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式;
4. 將CSS與DOM合并,構建渲染樹(Render Tree)
5. 布局和繪制,重繪(repaint)和重排(reflow)
# 7、Ajax的優缺點及工作原理?
## 定義和用法:
* AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。Ajax 是一種用于創建快速動態網頁的技術。Ajax 是一種在無需重新加載整個網頁的情況下,能夠更新部分網頁的技術。
* 傳統的網頁(不使用 Ajax)如果需要更新內容,必須重載整個網頁頁面。
## 優點:
1. 減輕服務器的負擔,按需取數據,最大程度的減少冗余請求
2. 局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗
3. 基于xml標準化,并被廣泛支持,不需安裝插件等,進一步促進頁面和數據的分離
## 缺點:
1. AJAX大量的使用了javascript和ajax引擎,這些取決于瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.
2. AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的.
3. 對流媒體還有移動設備的支持不是太好等
## AJAX的工作原理:
1. 創建ajax對象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
2. 判斷數據傳輸方式(GET/POST)
3. 打開鏈接 open()
4. 發送 send()
5. 當ajax對象完成第四步(onreadystatechange)數據接收完成,判斷http響應狀態(status)200-300之間或者304(緩存)執行回調函數
# 8、Web Storage與Cookie相比存在的優勢:
1. 存儲空間更大:IE8下每個獨立的存儲空間為10M,其他瀏覽器實現略有不同,但都比Cookie要大很多。
2. 存儲內容不會發送到服務器:當設置了Cookie后,Cookie的內容會隨著請求一并發送的服務器,這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地,不會與服務器發生任何交互。
3. 更多豐富易用的接口:Web Storage提供了一套更為豐富的接口,如setItem,getItem,removeItem,clear等,使得數據操作更為簡便。cookie需要自己封裝。
4. 獨立的存儲空間:每個域(包括子域)有獨立的存儲空間,各個存儲空間是完全獨立的,因此不會造成數據混亂。
# 9、sessionStorage 、localStorage 和 cookie 之間的區別
## 共同點:
> 用于瀏覽器端存儲的緩存數據
## 不同點:
1. 存儲內容是否發送到服務器端:當設置了Cookie后,數據會發送到服務器端,造成一定的寬帶浪費;
web storage,會將數據保存到本地,不會造成寬帶浪費;
1. 數據存儲大小不同:Cookie數據不能超過4K,適用于會話標識;web storage數據存儲可以達到5M;
1. 數據存儲的有效期限不同:cookie只在設置了Cookid過期時間之前一直有效,即使關閉窗口或者瀏覽器;
sessionStorage,僅在關閉瀏覽器之前有效;localStorage,數據存儲永久有效;
1. 作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;
- 雜(一般誤入)
- Vue
- CSS
- Web前端性能優化有哪些方法
- 后端
- 嘻嘻哈哈
- 一
- 二
- 三
- 大雜燴
- 什么是HTML,什么是CSS,什么JavaScript?
- JS動畫與CSS動畫的差異
- HTML,CSS
- 1.px、em、rem、vw、rpx之間的區別
- 2.為什么要初始化CSS樣式
- 3.CSS優先級算法如何計算?
- 4. ::before 和 :after中雙冒號和單冒號有什么區別?
- 5.display:inline-block 什么時候會顯示間隙?
- 6.行內元素有哪些?塊級元素有哪些?如何將行內元素表現為塊級元素?
- 7.css新增了哪些功能?
- 8.對html5語義化的理解
- 9.http頭的expires是表示什么
- 10.bootstrap柵格系統實現原理
- 11.清除浮動的方法
- 12.使用image間隙留白問題
- 13.html分為哪些層?都代表什么?
- 14.對于web中W3C標準的理解?
- 15.用css寫一個三角形?
- 16.CSS中使用表格怎么合并行,合并列
- 17.處理margin-top的bug問題
- 18.動畫進度條
- 19.box-sizing的屬性值
- 20.box-shadow的參數
- 21.a標簽的四個狀態及它們的順序、設置title屬性的效果
- 22.如何實現垂直水平居中
- 23.什么是雪碧圖
- 24.h1和title、b和strong、i和em的區別
- 25.table和div+css的區別
- 26.錨點的作用是什么?如何創建錨點
- 27.margin距離問題
- 28.響應式的導航欄
- 29.進度條
- 30.img標簽的title屬性和alt屬性有什么區別
- 31.媒體查詢
- 32.CSS選擇器有哪些?哪些屬性可以繼承?
- Javascript
- 1.面向對象的基本特征
- 2.在JavaScript中實現繼承的方法
- 2.用js去除字符串空格
- 3.你怎么理解作用域?
- 4.get和post的請求?
- 5.如何理解閉包?
- 6.數組的克隆(深拷貝)的方法
- 7.es6新增了哪些特性
- 8.json對象與字符串轉換
- 9.回調函數
- 10.HTML和XHML的共同點
- 11.js中把7.25轉換成一個整數
- 12.循環遍歷的方法
- 13.深拷貝與淺拷貝的區別
- 14.JavaScript有哪些方法定義對象
- 15.AJAX請求總共有多少種CALLBACK
- 16.js中的定時器
- 17.let、var、const的區別
- 18.==和===的區別
- 19.dom文檔(自上往下)加載的順序
- 20.string變成int型
- 21.如何判斷是否為一個質數
- 22.typeof返回類型,以及比較typeof與instanceof
- 23.判斷一個對象是否為數組以及數組的方法
- 24.解釋一下原型和原型鏈、hasOwnProperty
- 25.js有哪些內置對象
- 26.new一個對象發生了什么
- 27.sass的理解
- 28.document.onLoad與window.ready的區別
- 29.什么是跨域?跨域請求資源的方法有哪些?
- 30.Ajax的優缺點及工作原理
- 31.什么是正則
- 32.貪婪模式與非貪婪(懶惰)模式
- 33.數組去重
- 34.js字符串操作函數
- 35.substring和substr傳參的區別
- 36.如何實現一個原生的ajax,分成幾步
- 37.如何實現一個事件綁定
- 38.事件冒泡與事件捕獲的區別
- 39.事件監聽
- 40.字符串下標與字符串某一個字符之間的轉換
- 41.new操作符的作用
- 42.函數的定義方式
- 43.括號在JavaScipt中的作用
- 44.回調地獄
- 45.document.write和innerHTML的區別
- 46.解釋一下JS同源策略
- 47.說幾種DOM節點
- 48.DOM事件流
- 49.同步與異步
- 50.json和jsonp的區別
- 51.字符串去重
- 52.JS中的數據類型
- 53.this關鍵字指向問題
- 54.break和contiune之間的區別
- 55.如何消除事件冒泡與事件默認行為
- 56.請列舉jquery中的選擇器
- 瀏覽器及服務端
- 1.請說出三種減低頁面加載時間的方法
- 2.瀏覽器的緩存機制
- 3.瀏覽器的內核
- 4.瀏覽器的兼容問題
- 5.src和href的區別
- 6.高質量代碼具備哪些條件
- 7.HTTP請求與響應
- 8.談談對前端模塊化的理解
- 9.嚴格模式與混雜模式如何區分?
- 10.重繪和重排的區別
- 11.MVC和MVVM的區別
- 12.前端頁面如何解決適配的問題
- 13.寫一個400錯誤
- 14.狀態碼
- 15.開發及性能優化
- 16.靜態網頁與動態網頁的區別
- 17.如何調試網頁代碼?如何查看網頁源代碼
- 18.語義化的主要目的是什么?
- 19.如何讓所有的瀏覽器支持ES6語法
- 20.cookie,LocalStorage,sessionStorage的區別
- 計算題
- 1.margin距離問題
- 2.math
- 3.使用js實現階乘(1~10)
- 4.求一個數組的最大數
- 5.判斷一個字符串中出現次數最多的字符,統計這個次數
- 6.質數
- 7.如何把一個字符串倒過來輸出
- 取數據,渲染數據
- 1.ajax版本
- 2.vue版本
- 3.React版本
- 4.用class封裝一個ajax
- 5.用回調函數封裝一個ajax
- Vue,React
- 1.什么是路由?
- 2.vuex的工作流程
- 3.redux的工作流程
- 微信小程序
- 1.程序的生命周期
- 2.組件的生命周期
- 3.微信小程序頁面的生命周期
- 不會的問題
- 2019/01/02
- 2019/01/03
- 2019/01/07
- 2019/01/21
- 1