前端筆試(二)
來源:程序員人生 發布時間:2016-11-22 09:00:46 閱讀次數:2777次
阿里
AJAX跨域
設置 async:true即異步履行,設置async:false即同步履行
jquery中ajax處理跨域的3大方式 http://www.jb51.net/article/77470.htm
ajax本身不可以跨域,遇到跨域,用JSONP,即添加dataType:'jsonp' http://www.cnblogs.com/sunxucool/p/3433992.html
比較1下json與jsonp格式的區分:
json格式:
{ "message":"獲得成功", "state":"1", "result":{"name":"工作組1","id":1,"description":"11"}
}
jsonp格式:
callback({
"message":"獲得成功",
"state":"1",
"result":{"name":"工作組1","id":1,"description":"11"}
})
jsonp比json多了個callback
jsonp方法是1種非官方方法,只支持GET方式,不如POST方式安全。即便使用jQuery的jsonp方法,type設為POST,也會自動變成GET
官方方法:通過設置Access-Control-Allow-Origin來實現跨域訪問 http://blog.csdn.net/fdipzone/article/details/46390573/
ajax用JSON來傳數據,靠JSONP來跨域 http://kb.cnblogs.com/page/139725/
JSON是1種數據交換格式,描寫信息的格式
JSONP是1種非官方跨域數據交互協議,信息傳遞雙方約定的方法
凡是具有”src”這個屬性的標簽都具有跨域的能力,比如、
![]()
、
如何終止正在在發送的ajax要求 ?http://www.cnblogs.com/siqi/archive/2012/12/02/2798093.html
服務器支持跨域 ?http://blog.csdn.net/james_wade63/article/details/50772041
跨域是指html文件所在的服務器與ajax要求的服務器是不同的ip+port
跨域 ?CORS(跨域資源同享,Cross-Origin Resource Sharing)
http://blog.csdn.net/suhenhappy/article/details/18043241
代理的方法 ??http://www.jb51.net/article/80881.htm
xhr2 ?http://www.th7.cn/web/html-css/201502/82375.shtml
地址欄hash ?http://www.tuicool.com/articles/6neUbeY? ? 錨點
閱讀器的同源策略
?http://www.cnblogs.com/net2012/p/3481993.html
同源策略規定:不同域的客戶端腳本在沒有明確授權的情況下,不能讀寫對方的資源
同域要求兩個站點同協議、同域名、同端口
客戶端腳本指JS、ActionScript(Flash的腳本語言)、JS與ActionScript都遵守的ECMAScript腳本標準
HTTP要求頭里的Referer(表示要求來源)只可讀
同源策略中的資源指Web客戶真個資源
window.postMessage?http://www.webhek.com/window-postmessage-api/
window.postMessage功能是允許程序員跨域在兩個窗口/frames間發送數據信息。類似AJAX,但是在兩個客戶端之間通訊
js設置document.domain實現跨域的注意點分析 ?http://www.3lian.com/edu/2015/05⑵2/215443.html
meta viewport
http://blog.csdn.net/xiebaochun/article/details/17579107
主要參數有下面幾個:
maximum-scale:用戶可以縮放的最大值
minimum-scale:用戶可以縮放的最小值
initial-scale:viewport的默許縮放大小
width:固定viewport的寬度
height:固定viewport的高度
user-scalable:是不是允許用戶縮放
移動端和桌面端不1樣,它有2個視口(viewport):可見視口(visual viewport)和 布局視口(layout viewport).
關于2者的區分,stack overflow有這樣的解釋:
想象下現在有1張不會改變尺寸和形狀的大的圖片,你手里拿著1個中空的框子(想象下砸空你手機的屏幕),透過它你可以看到這張圖片,并且這個框框的周圍是用不透明的材料做成的,你只能通過中間的洞去看這張圖片。你可以移動這個框子,靠近自己的眼睛的話可以看到更多的圖片區域,也能夠使它闊別自己的眼睛,從而只看到這張圖片的1部份小區域。
那張不可改變形狀和尺寸的圖片=布局視口(layout viewport)
你手中的中空的框子=可見視口(visual viewport)
也就是說我們在移動端用手指來縮放屏幕,其實改變的是可見視口(visual viewport)的尺寸,而布局視口(layout viewport)總是保持不變。
箭頭函數 ?http://www.jb51.net/article/50770.htm
簡明扼要,禁用new操作,this不可變,沒有arguments對象
搜狗
頁面跳轉
window.location.assign和window.location.href區分?https://blog.tanteng.me/2015/06/window-location-assign-href/
window.location.assign(url)和window.location.href=url都是實現跳轉到網頁,但assign會添加記錄到閱讀歷史,點擊后退可以返回之前頁面
location.assign 與 location.replace的區分? ?
http://blog.sina.com.cn/s/blog_694c144f01016e15.html
location.replace(url)通過加載URL指定的文檔替換當前文檔,替換當前窗口頁面,前后兩個頁面共用1個窗口,沒有后退返回上1頁
window.location和window.open的區分
window.location="url"跳轉后沒有后退功能
window.open(url)要新的窗口打開連接
jQuery
jQuery選擇器總結 ? ?http://www.cnblogs.com/onlys/articles/jQuery.html
層疊選擇器、基本過濾選擇器、內容過濾選擇器、可視化過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單元素選擇器、表單元素過濾選擇器
ajax() 方法通過 HTTP 要求加載遠程數據。$.ajax(opts);opts為json格式,常見參數url、type、data等。
load() 方法從
服務器加載數據,并把返回的數據放入被選元素中。$(selector).load(URL,data,callback);
? ? 必須的 URL 參數規定您希望加載的 URL。
? ? 可選的 data 參數規定與要求1同發送的查詢字符串鍵/值對集合。
? ? 可選的 callback 參數是 load() 方法完成后所履行的函數名稱。
$.get() 方法通過 HTTP GET 要求從
服務器上要求數據。
$.get(URL,callback);
? ? 必須的 URL 參數規定您希望要求的 URL。
? ? 可選的 callback 參數是要求成功后所履行的函數名。
getScript() 方法通過 HTTP GET 要求載入并履行 JavaScript 文件。
jQuery.getScript(url,success(response,status));
delete是1種post要求;
empty()是清空該匹配元素的內容,但是該匹配元素還是存在;
remove()是清空該匹配元素的內容,而且該匹配元素也會同時被清空;
$(A).append(content|fn) 在匹配的元素A內部結尾追加內容,父子關系
$(A).appendTo(B) 將A的內容追加到B內部結尾,父子關系
$(A).prepend(content) 在匹配的元素A內部的開頭插入content內容
$(A).prependTo(B) 將匹配到的A元素追加到B的開頭
$(A).after(content) 在匹配的元素A以后插入內容content,兄弟關系
$(A).before(content) 在匹配的元素A之前插入內容content
$(A).insertAfter(B) 將A的內容追加到B以后,兄弟關系
$(A).insertBefore(B) 將A的內容追加到B之前
其他
CSS Display(顯示) 與 Visibility(可見性) ?http://www.runoob.com/css/css-display-visibility.html
? ? visibility:hidden 隱藏的元素仍需占據未隱藏前1樣的空間
? ? display:none 隱藏的元素原來占用的空間從頁面布局中消失
Form表單標簽的Enctype屬性的作用及利用示例介紹 ?http://www.jb51.net/web/165444.html
? ? Enctype是指定將數據回發到
服務器時閱讀器使用的編碼類型
? ? application/x-www-form-urlencoded: 在發送前編碼所有字符(默許)。這是標準的編碼格式。 不能用于文件上傳
? ? multipart/form-data: 不對字符編碼,在使用包括文件上傳控件的表單時,必須使用該值。 能完全的傳遞文件數據,是上傳2進制數據上去
? ? text/plain: 窗體數據以純文本情勢進行編碼,其中不含任何控件或格式字符。
圖片按鈕 ?http://blog.csdn.net/evangel_z/article/details/7069425
table與td邊框堆疊問題 ?http://blog.csdn.net/dhj2020/article/details/42564289
避免表單重復提交與等待頁面 ?http://www.jb51.net/article/41825.htm
display:table-cell?
HTML5自定義屬性對象Dataset ?http://www.zhangxinxu.com/wordpress/2011/06/html5自定義屬性對象dataset簡介/
data-前綴設置自定義屬性,進行1些數據的寄存
禁止a標簽默許事件 ?http://blog.csdn.net/judas_jia/article/details/51166406
stopPropagation禁止JS事件冒泡
preventDefault禁止a標簽默許行動的產生
event.returnValue返回窗口值
30類CSS選擇器?http://www.oschina.net/news/57107/30-css-selector-you-should-remeber
HTTP/2.0 相比1.0有哪些重大改進 ?https://www.zhihu.com/question/34074946 ? ??http://www.infoq.com/cn/news/2015/02/https-spdy-http2-comparison/
? ? 1、要求和響應頭的大小
? ? http/2.0可使用頭部緊縮,來提示性能
? ? 2、響應消息小
? ? 3、TCP連接數和頁面加載時的SSL握手要求數
? ? http/2.0通過使用多路復用技術在單獨的TCP和SSL連接上支持并發,通過在1個連接上1次性發送多個要求來發送或接收數據
? ? 4、頁面加載時間短
? ? 5、
服務器推送(Server Push)是1種在客戶端要求之前發送數據的機制,
服務器可以對客戶真個1個要求發送多個響應
CSS選擇器優先級 ?http://www.cnblogs.com/wangfupeng1988/p/4285251.html
ICE id100 class10 element 1
HTTP響應頭信息和要求頭信息 ?http://blog.csdn.net/mm2223/article/details/8089645/
http://www.cnblogs.com/smyhvae/p/4005034.html
Cache-Control 通用頭 指定要求和響應遵守的緩存機制
Expires實體頭 應對頭 應當在甚么時候認為文檔已過期,從而不再緩存它
Last-Modified實體頭 應對頭 指定
服務器上保存內容的最后修訂時間
Etag實體頭 1個對象(URL)的標志值,供WEB
服務器判斷1個對象是不是改變
hasOwnproperty方法能返回1個布爾值,指出1個對象是不是具有指定名稱的屬性。此方法沒法檢查該對象的原型鏈中是不是具有該屬性,該屬性必須為對象本身的屬性。
語法 object.hasOwnProperty(propertyName);
substr,substring,indexOf,lastIndexOf ?http://www.jb51.net/article/44921.htm
js中contains ?判斷元素包括關系 ??http://www.kuqin.com/shuoit/20131123/336498.html
DOMElement.contains(DOMNode);
charCodeAt() ?返回1個數字,表示給定索引處的字符的Unicode值? ?http://www.jb51.net/article/67338.htm
語法:string.charCodeAt(index);
charAt()?http://www.jb51.net/article/46938.htm
返回指定位置的字符
語法:stringObject.charAt(index);
cookie ??http://www.nowcoder.com/ta/front-end-interview/review?tpId=10&tqId=11077&query=&asc=true&order=&page=1
? ? 優點:在持久保存客戶端數據提供了方便,分擔了
服務器存儲的負擔
? ? 缺點:
? ? 1、cookie數量和長度的限制,每一個特定的域名下最多生成20個cookie,1般不能超過4095字節
? ? 2、安全性問題
? ? 3、有些狀態不可能保存在客戶端
({}+{}).length的大小 ?30
({}+{}).length 等價于 ({}.toString() + {}.toString()).length,{}.toString()的值為[object Object],所以最后結果為30。
Array.prototype.slice.call(arguments)能將具有length屬性的對象轉成數組 ?http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html
[].slice.call(arguments)相當于Array.slice.call(arguments),目的是將arguments對象的數組提出來轉化為數組,arguments本身其實不是數組而是對象
HTML網頁的閱讀器標題欄顯示小圖標的方法 ? ?http://www.jb51.net/web/163883.html
Javascript實現閱讀器標題欄文字轉動效果 ??http://blog.csdn.net/chenjinping123/article/details/7971541
改變鼠標樣式:
10大排序算法 ?http://gold.xitu.io/post/57dcd394a22b9d00610c5ec8