為工作中接觸到一些代碼的使用,本小白開始學習編程知識,每天記錄一些自學編程過程中的一些知識點,一是為了方便跟大家分享,另外就是為了以后復習使用。
Visual Studio Code
Visual Studio Code常用插件:
1.語言、格式化:
2.HTML/CSS插件:
3.JS/Vue插件:
4.PHP/MySQL相關插件:
5.MarkDown語法插件:
6.提高工作效率的插件:
7.如何在VSCode中配置PHP代碼檢查器:在VSCode配置文件(setting.json)
// 版本與路徑替換成系統中的php可執行文件路徑與版本號
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",
<h1>開會通知:本周五進行大掃除</h1>
<p>開會通知:本周五進行大掃除</p>
<male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>
// JS代碼必須寫到一個script標簽中
<script>
const SITE="Hello World!";
</script>
<?php
// php代碼必須放在一對php標簽中
echo "Hello World!";
?>
<!-- 標題標簽:除了設置文檔標題之外,還可以用來劃分頁面結構的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<!-- 內容標簽 <p></p> -->
<p>程序猿界有一句話:每一個程序猿都應該擁有一臺MacBook Pro</p>
1.target屬性:
鏈接地址
代碼案例:
<!-- _self 當前窗口打開 -->
<a href="跳轉目標" target="_self">Hello World</a>
<!-- _blank 跳轉到新的頁面,在新窗口打開 -->
<a href="跳轉目標" target="_blank">Hello World</a>
<!-- 在指定窗口打開 target="iframe內聯框架的name值" 此時a標簽的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打開百度</a>
<iframe srcdoc="點擊上面的按鈕打開百度" name="baidu" frameborder="0" width="600" height="500"></iframe>
2.錨點
<a href="#footer">跳轉到底部</a>
<!-- 創建錨點 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>
如果我們想要在頁面添加一張圖片,可以使用img標簽
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">
個人總結:有些代碼看起來簡單,但是自己上手起來真的是難,屬于那種一看就會,一寫就錯,看來只能通過多寫,多練才可以熟能生巧,這是個細活,急不得,要戒驕戒躁,平穩心態來面對這么多難題,加油!
evExpress WinForm擁有180+組件和UI庫,能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForm能完美構建流暢、美觀且易于使用的應用程序,無論是Office風格的界面,還是分析處理大批量的業務數據,它都能輕松勝任!
注意:目前基于HTML & CSS的控件正在積極研發中,可以作為技術預覽提供,如果需要使用請下載最新版組件體驗哦~
DevExpress WinForms Subscription官方最新版免費下載試用,歷史版本下載,在線文檔和幫助文件下載-慧都網
一組控件和組件允許開發人員構建HTML格式的UI,并使用CSS樣式自定義UI元素的外觀設置、大小、填充和布局選項,不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規范,可以使用HTML和CSS標記的知識為桌面應用程序構建布局。
在上文中,我們為大家介紹了HTML-CSS標記的,本文將為大家介紹DevExpress中的HTML-CSS感知控件,有興趣的小伙伴可以下載相關組件體驗。
HtmlContentControl可以從HTML-CSS標記構建UI的界面。
HtmlContentPopup是HtmlContentControl的彈出窗口版本,該組件從HTML-CSS代碼生成UI,并將其顯示為彈出或模態窗口。
新的ItemsView沒有默認的數據表示,它僅從開發者用屬性或動態地用事件指定的HTML-CSS模板中呈現它的項(數據記錄)。
TileView從模板生成它的項(tiles),開發者可以在常規模板和基于HTML-CSS的模板之間進行選擇。
WinExplorerView支持HTML-CSS模板來構建卡片的布局,開發者可以為每種顯示樣式(超大、大、中、列表、貼片等等)指定HTML-CSS模板,或者動態地使用一個事件。
GanttControl允許開發者使用HTML-CSS標記來渲染許多元素:
您可以在SchedulerControl中使用基于HTML-CSS的模板來呈現約會。
標準Visual Studio表單的替代品,為其子控件啟用DirectX硬件加速,并支持基于HTML-CSS的模板。
AlertControl的模板允許呈現現代應用程序通知。
開發人員可以使用基于HTML-CSS的模板來呈現以下控件中的項:
AccordionControl允許開發人員使用HTML-CSS模板來渲染它的UI元素:
言 Preface
想要成為一名合格的前端工程師,掌握相關瀏覽器的工作原理是必備的,這樣子才會有一個完整知識體系,要是「能參透瀏覽器的工作原理,你就能解決80%的前端難題」。
今天總結了10道瀏覽器面試題及解析,作為前端開發工程師的你趕緊來看看吧!
1. 常見的瀏覽器內核有哪些?
2. 瀏覽器的主要組成部分是什么?
值得注意的是,和大多數瀏覽器不同,Chrome 瀏覽器的每個標簽頁都分別對應一個呈現引擎實例。每個標簽頁都是一個獨立的進程。
3. 為什么JavaScript是單線程的,與異步沖突嗎
補充:JS中其實是沒有線程概念的,所謂的單線程也只是相對于多線程而言。JS的設計初衷就沒有考慮這些,針對JS這種不具備并行任務處理的特性,我們稱之為“單線程”。
JS單線程是指一個瀏覽器進程中只有一個JS的執行線程,同一時刻內只會有一段代碼在執行。
舉個通俗例子,假設JS支持多線程操作的話,JS可以操作DOM,那么一個線程在刪除DOM,另外一個線程就在獲取DOM數據,這樣子明顯不合理,這算是證明之一。
來看段代碼
function foo() { console.log("first");
setTimeout(( function(){ console.log( 'second' );
}),5);
}
for (var i=0; i < 1000000; i++) {
foo();
}復制代碼
打印結果就是首先是很多個first,然后再是second。
異步機制是瀏覽器的兩個或以上常駐線程共同完成的,舉個例子,比如異步請求由兩個常駐線程,JS執行線程和事件觸發線程共同完成的。
再比如定時器觸發(settimeout和setinterval) 是由「瀏覽器的定時器線程」執行的定時計數,然后在定時時間把定時處理函數的執行請求插入到JS執行隊列的尾端(所以用這兩個函數的時候,實際的執行時間是大于或等于指定時間的,不保證能準確定時的)。
所以這么說,JS單線程與異步更多是瀏覽器行為,之間不沖突。
4. CSS加載會造成阻塞嗎
先給出結論
先講一講CSSOM作用
由之前講過的瀏覽器渲染流程我們可以看出:
DOM 和 CSSOM通常是并行構建的,所以「CSS 加載不會阻塞 DOM 的解析」。
然而由于Render Tree 是依賴DOM Tree和 CSSOM Tree的,所以它必須等到兩者都加載完畢后,完成相應的構建,才開始渲染,因此,「CSS加載會阻塞DOM渲染」。
由于 JavaScript 是可操縱 DOM 和 css 樣式 的,如果在修改這些元素屬性同時渲染界面(即 JavaScript 線程和 UI 線程同時運行),那么渲染線程前后獲得的元素數據就可能不一致了。
因此為了防止渲染出現不可預期的結果,瀏覽器設置 「GUI 渲染線程與 JavaScript 引擎為互斥」的關系。
有個需要注意的點就是:
「有時候JS需要等到CSS的下載,這是為什么呢?」
仔細思考一下,其實這樣做是有道理的,如果腳本的內容是獲取元素的樣式,寬高等CSS控制的屬性,瀏覽器是需要計算的,也就是依賴于CSS。瀏覽器也無法感知腳本內容到底是什么,為避免樣式獲取,因而只好等前面所有的樣式下載完后,再執行JS。
JS文件下載和CSS文件下載是并行的,有時候CSS文件很大,所以JS需要等待。
因此,樣式表會在后面的 js 執行前先加載執行完畢,所以「css 會阻塞后面 js 的執行」。
5. 為什么JS會阻塞頁面加載
先給出結論
這也是為什么說JS文件放在最下面的原因,那為什么會阻塞DOM解析呢
你可以這樣子理解:
由于 JavaScript 是可操縱 DOM 的,如果在修改這些元素屬性同時渲染界面(即 JavaScript 線程和 UI 線程同時運行),那么渲染線程前后獲得的元素數據就可能不一致了。
因此為了防止渲染出現不可預期的結果,瀏覽器設置 「GUI 渲染線程與 JavaScript 引擎為互斥」的關系。
當 JavaScript 引擎執行時 GUI 線程會被掛起,GUI 更新會被保存在一個隊列中等到引擎線程空閑時立即被執行。
當瀏覽器在執行 JavaScript 程序的時候,GUI 渲染線程會被保存在一個隊列中,直到 JS 程序執行完成,才會接著執行。
因此如果 JS 執行的時間過長,這樣就會造成頁面的渲染不連貫,導致頁面渲染加載阻塞的感覺。
另外,如果 JavaScript 文件中沒有操作 DOM 相關代碼,就可以將該 JavaScript 腳本設置為異步加載,通過 async 或 defer 來標記代碼。
6. defer 和 async 的區別 ?
兩者都是異步去加載外部JS文件,不會阻塞DOM解析Async是在外部JS加載完成后,瀏覽器空閑時,Load事件觸發前執行,標記為async的腳本并不保證按照指定他們的先后順序執行,該屬性對于內聯腳本無作用 (即沒有「src」屬性的腳本)。defer是在JS加載完成后,整個文檔解析完成后,觸發 DOMContentLoaded 事件前執行,如果缺少 src 屬性(即內嵌腳本),該屬性不應被使用,因為這種情況下它不起作用
7. DOMContentLoaded 與 load 的區別 ?
那么也就是先DOMContentLoaded -> load,那么在Jquery中,使用
(document).load(callback)監聽的就是load事件。
那我們可以聊一聊它們與async和defer區別
帶async的腳本一定會在load事件之前執行,可能會在DOMContentLoaded之前或之后執行。
如果 script 標簽中包含 defer,那么這一塊腳本將不會影響 HTML 文檔的解析,而是等到HTML 解析完成后才會執行。而 DOMContentLoaded 只有在 defer 腳本執行結束后才會被觸發。
8. 為什么CSS動畫比JavaScript高效
我覺得這個題目說法上可能就是行不通,不能這么說,如果了解的話,都知道will-change只是一個優化的手段,使用JS改變transform也可以享受這個屬性帶來的變化,所以這個說法上有點不妥。
所以圍繞這個問題展開話,更應該說建議推薦使用CSS動畫,至于為什么呢,涉及的知識點大概就是重排重繪,合成,這方面的點,我在瀏覽器渲染流程中也提及了。
盡可能的避免重排和重繪,具體是哪些操作呢,如果非要去操作JS實現動畫的話,有哪些優化的手段呢?
比如
剩下的東西就留給你們思考吧,希望我這是拋磚引玉吧(●’?’●)
9. 能不能實現事件防抖和節流
函數節流(throttle)
節流的意思是讓函數有節制地執行,而不是毫無節制的觸發一次就執行一次。什么叫有節制呢?就是在一段時間內,只執行一次。
規定在一個單位時間內,只能觸發一次函數。如果這個單位時間內觸發多次函數,只有一次生效。
抓取一個關鍵的點:就是執行的時機。要做到控制執行的時機,我們可以通過「一個開關」,與定時器setTimeout結合完成。
function throttle(fn, delay) { let flag=true,
timer=null; return function (...args) { let context=this; if (!flag) return;
flag=false;
clearTimeout(timer)
timer=setTimeout(()=> {
fn.apply(context, args);
flag=true;
}, delay);
};
};復制代碼
函數防抖(debounce)
在事件被觸發n秒后再執行回調,如果在這n秒內又被觸發,則重新計時。
核心思想:每次事件觸發都會刪除原有定時器,建立新的定時器。通俗意思就是反復觸發函數,只認最后一次,從最后一次開始計時。
代碼:
function debounce(fn, delay) { let timer=null
return function (...args) { let context=this
if(timer) clearTimeout(timer)
timer=setTimeout(function() {
fn.apply(context, args)
},delay)
}
}復制代碼
如何使用 debounce 和 throttle 以及常見的坑
自己造一個 debounce / throttle 的輪子看起來多么誘人,或者隨便找個博文復制過來。「我是建議直接使用 underscore 或 Lodash」 。如果僅需要 _.debounce 和 _.throttle 方法,可以使用 Lodash 的自定義構建工具,生成一個 2KB 的壓縮庫。使用以下的簡單命令即可:
npm i -g lodash-cli
npm i -g lodash-clilodash-cli include=debounce,throttle復制代碼
常見的坑是,不止一次地調用 _.debounce 方法:
// 錯誤$(window).on('scroll', function() {
_.debounce(doSomething, 300);
});// 正確$(window).on('scroll', _.debounce(doSomething, 200));復制代碼
debounce 方法保存到一個變量以后,就可以用它的私有方法 debounced_version.cancel(),lodash 和 underscore.js 都有效。
let debounced_version=_.debounce(doSomething, 200);
$(window).on('scroll', debounced_version);// 如果需要的話debounced_version.cancel();復制代碼
適合應用場景
防抖
節流
10. 談一談你對requestAnimationFrame(rAF)理解
正好跟節流有點關系,有點相似處,就準備梳理一下這個知識點。
「高性能動畫是什么,那它衡量的標準是什么呢?」
動畫幀率可以作為衡量標準,一般來說畫面在 60fps 的幀率下效果比較好。
換算一下就是,每一幀要在 16.7ms (16.7=1000/60) 內完成渲染。
我們來看看MDN對它的解釋吧
window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫并請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫。該方法使用一個回調函數作為參數,這個回調函數會在瀏覽器重繪之前調用。— MDN
當我們調用這個函數的時候,我們告訴它需要做兩件事:
rAF與 setTimeout 相比
rAF(requestAnimationFrame) 最大的優勢是「由系統來決定回調函數的執行時機」。
具體一點講就是,系統每次繪制之前會主動調用 rAF 中的回調函數,如果系統繪制率是 60Hz,那么回調函數就每16.7ms 被執行一次,如果繪制頻率是75Hz,那么這個間隔時間就變成了 1000/75=13.3ms。
換句話說就是,rAF 的執行步伐跟著系統的繪制頻率走。它能保證回調函數在屏幕每一次的繪制間隔中只被執行一次(上一個知識點剛剛梳理完「函數節流」),這樣就不會引起丟幀現象,也不會導致動畫出現卡頓的問題。
另外它可以自動調節頻率。如果callback工作太多無法在一幀內完成會自動降低為30fps。雖然降低了,但總比掉幀好。
與setTimeout動畫對比的話,有以下幾點優勢
什么時候調用呢
規范中似乎是這么去定義的:
這樣子分析的話,似乎很合理嘛,為什么要在重新渲染前去調用呢?因為rAF作為官方推薦的一種做流暢動畫所應該使用的API,做動畫不可避免的去操作DOM,而如果是在渲染后去修改DOM的話,那就只能等到下一輪渲染機會的時候才能去繪制出來了,這樣子似乎不合理。
rAF在瀏覽器決定渲染之前給你最后一個機會去改變 DOM 屬性,然后很快在接下來的繪制中幫你呈現出來,所以這是做流暢動畫的不二選擇。
至于宏任務,微任務,這可以說起來就要展開篇幅了,暫時不在這里梳理了。
rAF與節流相比
跟 _.throttle(dosomething, 16) 等價。它是高保真的,如果追求更好的精確度的話,可以用瀏覽器原生的 API 。
可以使用 rAF API 替換 throttle 方法,考慮一下優缺點:
優點
缺點
根據經驗,如果 JavaScript 方法需要繪制或者直接改變屬性,我會選擇 requestAnimationFrame,只要涉及到重新計算元素位置,就可以使用它。
涉及到 AJAX 請求,添加/移除 class (可以觸發 CSS 動畫),我會選擇 _.debounce 或者 _.throttle ,可以設置更低的執行頻率(例子中的200ms 換成16ms)。
云和數據HTML5全棧精英班,經過多年的技術迭代和項目革新,逐步發展成為集網站、手機應用、小程序、快應用、桌面應用、后臺開發等多領域開發課程,新增Egg、TypeScript、Vue、React、HybridAPP等時下最流行的新技術,結合企業實際用人需求,只為培養更多高端IT技術人才。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。