資訊專欄INFORMATION COLUMN
摘要：一一個(gè)頁(yè)面上兩個(gè)左右鋪滿整個(gè)瀏覽器，要保證左邊的一直為，右邊的跟隨瀏覽器大小變化比如瀏覽器為，右邊為，瀏覽器為，右邊為，請(qǐng)寫(xiě)出大概的代碼。如果需要使用，最好是通過(guò)動(dòng)態(tài)給添加屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題。
一、一個(gè)頁(yè)面上兩個(gè)div左右鋪滿整個(gè)瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800），請(qǐng)寫(xiě)出大概的css代碼。
//html
//css
.box{
width: 400px;
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #c3c3c3;
}
.left {
flex-basis：100px;
-webkit-flex-basis: 100px; /* Safari 6.1+ */
background-color: red;
height: 100%;
}
.right {
background-color: blue;
flex-grow: 1;
}
在線demo
Left sidebarMain Content
demo
更多布局栗子 請(qǐng)移步
1.減少dom操作
2.部署前，圖片壓縮，代碼壓縮
3.優(yōu)化js代碼結(jié)構(gòu)，減少冗余代碼
4.減少http請(qǐng)求，合理設(shè)置 HTTP緩存
5.使用內(nèi)容分發(fā)cdn加速
6.靜態(tài)資源緩存
7.圖片延遲加載
輸入地址
1.瀏覽器查找域名的 IP 地址
2.這一步包括 DNS 具體的查找過(guò)程，包括：瀏覽器緩存->系統(tǒng)緩存->路由器緩存...
3.瀏覽器向 web 服務(wù)器發(fā)送一個(gè) HTTP 請(qǐng)求
4.服務(wù)器的永久重定向響應(yīng)（從 http://example.com 到 http://www.example.com）
5.瀏覽器跟蹤重定向地址
6.服務(wù)器處理請(qǐng)求
7.服務(wù)器返回一個(gè) HTTP 響應(yīng)
8.瀏覽器顯示 HTML
9.瀏覽器發(fā)送請(qǐng)求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）
10.瀏覽器發(fā)送異步請(qǐng)求
1.跨域問(wèn)題
2.設(shè)置了HttpOnly
1.直接改變className，如果動(dòng)態(tài)改變樣式，則使用cssText
// 不好的寫(xiě)法 var left = 1; var top = 1; el.style.left = left + "px"; el.style.top = top + "px";// 比較好的寫(xiě)法 el.className += " className1"; // 比較好的寫(xiě)法 el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
2.讓要操作的元素進(jìn)行”離線處理”，處理完后一起更新
a) 使用DocumentFragment進(jìn)行緩存操作,引發(fā)一次回流和重繪；
b) 使用display:none技術(shù)，只引發(fā)兩次回流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術(shù)，引發(fā)一次回流和重繪
1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed
1、通過(guò)jsonp跨域
2、通過(guò)修改document.domain來(lái)跨子域
3、使用window.name來(lái)進(jìn)行跨域
4、使用HTML5中新引進(jìn)的window.postMessage方法來(lái)跨域傳送數(shù)據(jù)（ie 67 不支持）
5、CORS 需要服務(wù)器設(shè)置header ：Access-Control-Allow-Origin。
6、nginx反向代理 這個(gè)方法一般很少有人提及，但是他可以不用目標(biāo)服務(wù)器配合，不過(guò)需要你搭建一個(gè)中轉(zhuǎn)nginx服務(wù)器，用于轉(zhuǎn)發(fā)請(qǐng)求
開(kāi)發(fā)規(guī)范
模塊化開(kāi)發(fā)
組件化開(kāi)發(fā)
組件倉(cāng)庫(kù)
性能優(yōu)化
項(xiàng)目部署
開(kāi)發(fā)流程
開(kāi)發(fā)工具
1.使用jq的$.extend(true, target, obj) 2.newobj = Object.create(sourceObj)，// 但是這個(gè)是有個(gè)問(wèn)題就是 newobj的更改不會(huì)影響到 sourceobj但是 sourceobj的更改會(huì)影響到newObj 3.newobj = JSON.parse(JSON.stringify(sourceObj))十、js設(shè)計(jì)模式
總體來(lái)說(shuō)設(shè)計(jì)模式分為三大類：
創(chuàng)建型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。
結(jié)構(gòu)型模式，共七種：適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。
行為型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責(zé)任鏈模式、命令模式、備忘錄模式、狀態(tài)模式、訪問(wèn)者模式、中介者模
詳細(xì)說(shuō)明 請(qǐng)移步alloyteam的文章
十一、圖片預(yù)覽function showPreview(source) {
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
document.getElementById("portrait").src = e.target.result;
};
fr.readAsDataURL(file);
}
}
十二、扁平化多維數(shù)組
var result = []
function unfold(arr){
for(var i=0;i< arr.length;i++){
if(typeof arr[i]=="object" && arr[i].length>1) {
unfold(arr[i]);
} else {
result.push(arr[i]);
}
}
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)
var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(",")
var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []); var result = flatten(arr)十三、iframe有那些缺點(diǎn)？
iframe會(huì)阻塞主頁(yè)面的Onload事件；
搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO;
iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81487.html
摘要：前端日?qǐng)?bào)精選傳送門(mén)瀏覽器性能優(yōu)化渲染性能在生產(chǎn)中的使用發(fā)送推送第期巧用匿名函數(shù)重構(gòu)你的代碼中文可持久化數(shù)據(jù)結(jié)構(gòu)以及結(jié)構(gòu)分享眾成翻譯學(xué)習(xí)筆記的模板學(xué)習(xí)筆記教程的作用域插槽教程移動(dòng)助手實(shí)踐一基于的換膚功能掘金網(wǎng)站壓力及性能測(cè)試一篇 2017-10-09 前端日?qǐng)?bào) 精選 傳送門(mén)：React Portal瀏覽器性能優(yōu)化-渲染性能在生產(chǎn)中的Progressive Web App使用Service...
摘要：鎖的兩種主要特性互斥同一時(shí)間只允許一個(gè)線程持有某個(gè)特定的鎖。可見(jiàn)性線程釋放鎖之前對(duì)共享數(shù)據(jù)做出的更改對(duì)于隨后獲得該鎖的另一個(gè)線程是可見(jiàn)的。在商業(yè)上的成功奠定了字符存儲(chǔ)以位即一個(gè)字節(jié)為單位的基礎(chǔ)。 1.鎖的兩種主要特性： 互斥：同一時(shí)間只允許一個(gè)線程持有某個(gè)特定的鎖。線程持有該鎖相當(dāng)于令牌去訪問(wèn)線程共享的數(shù)據(jù)。可見(jiàn)性：線程釋放鎖之前對(duì)共享數(shù)據(jù)做出的更改對(duì)于隨后獲得該鎖的另一個(gè)線程是可見(jiàn)的...
摘要：收集的一些前端面試題從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過(guò)面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開(kāi)發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過(guò)餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過(guò)面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要：收集的一些前端面試題從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過(guò)面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開(kāi)發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過(guò)餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過(guò)面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要：手冊(cè)網(wǎng)超級(jí)有用的前端基礎(chǔ)技術(shù)面試問(wèn)題收集前端面試題目及答案匯總史上最全前端面試題含答案常見(jiàn)前端面試題及答案經(jīng)典面試題及答案精選總結(jié)前端面試過(guò)程中最容易出現(xiàn)的問(wèn)題前端面試題整理騰訊前端面試經(jīng)驗(yàn)前端基礎(chǔ)面試題部分最新前端面試題攻略前端面試前端入 手冊(cè)網(wǎng)：http://www.shouce.ren/post/index 超級(jí)有用的前端基礎(chǔ)技術(shù)面試問(wèn)題收集：http://www.codec...
閱讀 2381·2021-11-24 10:27
閱讀 3614·2019-08-30 15:55
閱讀 3379·2019-08-30 15:53
閱讀 2377·2019-08-29 17:27
閱讀 1463·2019-08-26 13:47
閱讀 3586·2019-08-26 10:28
閱讀 953·2019-08-23 15:59
閱讀 2901·2019-08-23 15:19
