摘要:把標簽恰好放在之前腳本在下載和執行期間會阻止解析。表示引用資源,替換當前元素,用在,,上,是頁面內容不可缺少的一部分。聲明是用來指示瀏覽器關于頁面使用哪個版本進行編寫的指令。聲明必須是文檔的第一行,位于標簽之前。
項目地址 HTML問題 HTML5語義化
什么是語義化?就是用合理、正確的標簽來展示內容,比如h1~h6定義標題。
好處易于用戶閱讀,樣式丟失的時候能讓頁面呈現清晰的結構。
有利于SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
方便其他設備解析,如盲人閱讀器根據語義渲染網頁
有利于開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。
http://www.daqianduan.com/654...
為什么最好把 CSS 的標簽放在之間?為什么最好把 JS 的標簽恰好放在之前,有例外情況嗎?
把放在中
把標簽放在之間是規范要求的內容。此外,這種做法可以讓頁面逐步呈現,提高了用戶體驗。將樣式表放在文檔底部附近,會使許多瀏覽器(包括 Internet Explorer)不能逐步呈現頁面。一些瀏覽器會阻止渲染,以避免在頁面樣式發生變化時,重新繪制頁面中的元素。這種做法可以防止呈現給用戶空白的頁面或沒有樣式的內容。
把標簽恰好放在之前
腳本在下載和執行期間會阻止 HTML 解析。把標簽放在底部,保證 HTML 首先完成解析,將頁面盡早呈現給用戶。
例外情況是當你的腳本里包含document.write()時。但是現在,document.write()不推薦使用。同時,將標簽放在底部,意味著瀏覽器不能開始下載腳本,直到整個文檔(document)被解析。也許,對此比較好的做法是,使用defer屬性,放在中。
什么是漸進式渲染(progressive rendering)?漸進式渲染是用于提高網頁性能(尤其是提高用戶感知的加載速度),以盡快呈現頁面的技術。
在以前互聯網帶寬較小的時期,這種技術更為普遍。如今,移動終端的盛行,而移動網絡往往不穩定,漸進式渲染在現代前端開發中仍然有用武之地。
一些舉例:
圖片懶加載——頁面上的圖片不會一次性全部加載。當用戶滾動頁面到圖片部分時,JavaScript 將加載并顯示圖像。
確定顯示內容的優先級(分層次渲染)——為了盡快將頁面呈現給用戶,頁面只包含基本的最少量的 CSS、腳本和內容,然后可以使用延遲加載腳本或監聽DOMContentLoaded/load事件加載其他資源和內容。
異步加載 HTML 片段——當頁面通過后臺渲染時,把 HTML 拆分,通過異步請求,分塊發送給瀏覽器。更多相關細節可以在這里找到。
viewportViewport :字面意思為視圖窗口,在移動web開發中使用。表示將設備瀏覽器寬度虛擬成一個特定的值(或計算得出),這樣利于移動web站點跨設備顯示效果基本一致。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支持。
在移動端瀏覽器當中,存在著兩種視口,一種是可見視口(也就是我們說的設備大小),另一種是視窗視口(網頁的寬度是多少)。
舉個例子:如果我們的屏幕是320像素 * 480像素的大小(iPhone4),假設在瀏覽器中,320像素的屏幕寬度能夠展示980像素寬度的內容。那么320像素的寬度就是可見視口的寬度,而能夠顯示的980像素的寬度就是視窗視口的寬度。
為了顯示更多的內容,大多數的瀏覽器會把自己的視窗視口擴大,簡易的理解,就是讓原本320像素的屏幕寬度能夠容下980像素甚至更寬的內容(將網頁等比例縮小)。
Viewport屬性值width 設置layout viewport 的寬度,為一個正整數,或字符串"width-device"
initial-scale 設置頁面的初始縮放值,為一個數字,可以帶小數
minimum-scale 允許用戶的最小縮放值,為一個數字,可以帶小數
maximum-scale 允許用戶的最大縮放值,為一個數字,可以帶小數
height 設置layout viewport 的高度,這個屬性對我們并不重要,很少使用
user-scalable 是否允許用戶進行縮放,值為"no"或"yes", no 代表不允許,yes代表允許這些屬性可以同時使用,也可以多帶帶使用或混合使用,多個屬性同時使用時用逗號隔開就行了。
Reflow和Repaint Reflow當涉及到DOM節點的布局屬性發生變化時,就會重新計算該屬性,瀏覽器會重新描繪相應的元素,此過程叫Reflow(回流或重排)。
Repaint當影響DOM元素可見性的屬性發生變化 (如 color) 時, 瀏覽器會重新描繪相應的元素, 此過程稱為Repaint(重繪)。因此重排必然會引起重繪。
引起Repaint和Reflow的一些操作調整窗口大小
字體大小
樣式表變動
元素內容變化,尤其是輸入控件
CSS偽類激活,在用戶交互過程中發生
DOM操作,DOM元素增刪、修改
width, clientWidth, scrollTop等布局寬高的計算
Repaint和Reflow是不可避免的,只能說對性能的影響減到最小,給出下面幾條建議:避免逐條更改樣式。建議集中修改樣式,例如操作className。
避免頻繁操作DOM。創建一個documentFragment或div,在它上面應用所有DOM操作,最后添加到文檔里。設置display:none的元素上操作,最后顯示出來。
避免頻繁讀取元素幾何屬性(例如scrollTop)。絕對定位具有復雜動畫的元素。
絕對定位使它脫離文檔流,避免引起父元素及后續元素大量的回流
https://harttle.land/2015/08/...
http://www.blueidea.com/tech/...
img的alt屬性
如果無法顯示圖像,瀏覽器將顯示alt指定的內容
元素title屬性
在鼠標移到元素上時顯示title的內容
href和src區別href
href標識超文本引用,用在link和a等元素上,href是引用和頁面關聯,是在當前元素和引用資源之間建立聯系
若在文檔中添加href ,瀏覽器會識別該文檔為 CSS 文件,就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用 link 方式加載 CSS,而不是使用 @import 方式。
src
src表示引用資源,替換當前元素,用在img,script,iframe上,src是頁面內容不可缺少的一部分。
當瀏覽器解析到src ,會暫停其他資源的下載和處理(圖片不會暫停其他資源下載和處理),直到將該資源加載、編譯、執行完畢,圖片和框架等也如此,類似于將所指向資源應用到當前內容。這也是為什么建議把 js 腳本放在底部而不是頭部的原因。
https://blog.csdn.net/lhjueji...
瀏覽器的渲染過程解析HTML生成DOM樹。
解析CSS生成CSSOM規則樹。
將DOM樹與CSSOM規則樹合并在一起生成渲染樹。
遍歷渲染樹開始布局,計算每個節點的位置大小信息。
將渲染樹每個節點繪制到屏幕。
https://baijiahao.baidu.com/s...
為何會出現瀏覽器兼容問題同一產品,版本越老 bug 越多
同一產品,版本越新,功能越多
不同產品,不同標準,不同實現方式
處理兼容問題的思路要不要做
產品的角度(產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先)
成本的角度 (有無必要做某件事)
2.做到什么程度
讓哪些瀏覽器支持哪些效果
3..如何做
根據兼容需求選擇技術框架/庫(jquery)
根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
條件注釋、CSS Hack、js 能力檢測做一些修補
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級 (graceful degradation): 一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。
https://github.com/jirengu/fr...
doctype有什么用doctype是一種標準通用標記語言的文檔類型聲明,目的是告訴標準通用標記語言解析器要使用什么樣的文檔類型定義(DTD)來解析文檔。
聲明是用來指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令。
聲明必須是HTML文檔的第一行,位于html標簽之前。
瀏覽器本身分為兩種模式,一種是標準模式,一種是怪異模式,瀏覽器通過doctype來區分這兩種模式,doctype在html中的作用就是觸發瀏覽器的標準模式,如果html中省略了doctype,瀏覽器就會進入到Quirks模式的怪異狀態,在這種模式下,有些樣式會和標準模式存在差異,而html標準和dom標準值規定了標準模式下的行為,沒有對怪異模式做出規定,因此不同瀏覽器在怪異模式下的處理也是不同的,所以一定要在html開頭使用doctype。
行內元素和塊級元素有哪些 行內元素一個行內元素只占據它對應標簽的邊框所包含的空間
一般情況下,行內元素只能包含數據和其他行內元素
b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea塊級元素
占據一整行,高度、行高、內邊距和外邊距都可以改變,可以容納塊級標簽和其他行內標簽
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footeriframe框架有那些優缺點 優點:
iframe能夠原封不動的把嵌入的網頁展現出來。
如果有多個網頁引用iframe,那么你只需要修改iframe的內容,就可以實現調用的每一個頁面內容的更改,方便快捷。
網頁如果為了統一風格,頭部和版本都是一樣的,就可以寫成一個頁面,用iframe來嵌套,可以增加代碼的可重用。
如果遇到加載緩慢的第三方內容如圖標和廣告,這些問題可以由iframe來解決。
缺點:搜索引擎的爬蟲程序無法解讀這種頁面
框架結構中出現各種滾動條
使用框架結構時,保證設置正確的導航鏈接。
iframe頁面會增加服務器的http請求
label標簽有什么作用label 標簽通常是寫在表單內,它關聯一個控件,使用 label 可以實現點擊文字選取對應的控件。
HTML5的form如何關閉自動完成功能
將不想要自動完成的 form 或 input 設置為 autocomplete=off
MDN
DOM和BOM有什么區別DOM
Document Object Model,文檔對象模型
DOM 是為了操作文檔出現的 API,document 是其的一個對象
DOM和文檔有關,這里的文檔指的是網頁,也就是html文檔。DOM和瀏覽器無關,他關注的是網頁本身的內容。
BOM
Browser Object Model,瀏覽器對象模型
BOM 是為了操作瀏覽器出現的 API,window 是其的一個對象
window 對象既為 javascript 訪問瀏覽器提供API,同時在 ECMAScript 中充當 Global 對象
瀏覽器通過優先級規則,判斷元素展示哪些樣式。優先級通過 4 個維度指標確定,我們假定以a、b、c、d命名,分別代表以下含義:
a表示是否使用內聯樣式(inline style)。如果使用,a為 1,否則為 0。
b表示 ID 選擇器的數量。
c表示類選擇器、屬性選擇器和偽類選擇器數量之和。
d表示標簽(類型)選擇器和偽元素選擇器之和。
優先級的結果并非通過以上四個值生成一個得分,而是每個值分開比較。a、b、c、d權重從左到右,依次減小。判斷優先級時,從左到右,一一比較,直到比較出最大值,即可停止。所以,如果b的值不同,那么c和d不管多大,都不會對結果產生影響。比如0,1,0,0的優先級高于0,0,10,10。
當出現優先級相等的情況時,最晚出現的樣式規則會被采納。如果你在樣式表里寫了相同的規則(無論是在該文件內部還是其它樣式文件中),那么最后出現的(在文件底部的)樣式優先級更高,因此會被采納。
在寫樣式時,我會使用較低的優先級,這樣這些樣式可以輕易地覆蓋掉。尤其對寫 UI 組件的時候更為重要,這樣使用者就不需要通過非常復雜的優先級規則或使用!important的方式,去覆蓋組件的樣式了。
https://www.smashingmagazine....
https://www.sitepoint.com/web...
重置(resetting)CSS 和 標準化(normalizing)CSS 的區別是什么?你會選擇哪種方式,為什么?重置(Resetting): 重置意味著除去所有的瀏覽器默認樣式。對于頁面所有的元素,像margin、padding、font-size這些樣式全部置成一樣。你將必須重新定義各種元素的樣式。
標準化(Normalizing): 標準化沒有去掉所有的默認樣式,而是保留了有用的一部分,同時還糾正了一些常見錯誤。
當需要實現非常個性化的網頁設計時,我會選擇重置的方式,因為我要寫很多自定義的樣式以滿足設計需求,這時候就不再需要標準化的默認樣式了。
https://stackoverflow.com/que...
請闡述Float定位的工作原理。浮動(float)是 CSS 定位屬性。浮動元素從網頁的正常流動中移出,但是保持了部分的流動性,會影響其他元素的定位(比如文字會圍繞著浮動元素)。這一點與絕對定位不同,絕對定位的元素完全從文檔流中脫離。
CSS 的clear屬性通過使用left、right、both,讓該元素向下移動(清除浮動)到浮動元素下面。
如果父元素只包含浮動元素,那么該父元素的高度將塌縮為 0。我們可以通過清除(clear)從浮動元素后到父元素關閉前之間的浮動來修復這個問題。
有一種 hack 的方法,是自定義一個.clearfix類,利用偽元素選擇器::after清除浮動。另外還有一些方法,比如添加空的和設置浮動元素父元素的overflow屬性。與這些方法不同的是,clearfix方法,只需要給父元素添加一個類,定義如下:
.clearfix::after { content: ""; display: block; clear: both; }
值得一提的是,把父元素屬性設置為overflow: auto或overflow: hidden,會使其內部的子元素形成塊格式化上下文(Block Formatting Context),并且父元素會擴張自己,使其能夠包圍它的子元素。
https://css-tricks.com/all-ab...
請闡述z-index屬性,并說明如何形成層疊上下文(stacking context)。CSS 中的z-index屬性控制重疊元素的垂直疊加順序。z-index只能影響position值不是static的元素。
沒有定義z-index的值時,元素按照它們出現在 DOM 中的順序堆疊(層級越低,出現位置越靠上)。非靜態定位的元素(及其子元素)將始終覆蓋靜態定位(static)的元素,而不管 HTML 層次結構如何。
層疊上下文是包含一組圖層的元素。 在一組層疊上下文中,其子元素的z-index值是相對于該父元素而不是 document root 設置的。每個層疊上下文完全獨立于它的兄弟元素。如果元素 B 位于元素 A 之上,則即使元素 A 的子元素 C 具有比元素 B 更高的z-index值,元素 C 也永遠不會在元素 B 之上.
每個層疊上下文是自包含的:當元素的內容發生層疊后,整個該元素將會在父層疊上下文中按順序進行層疊。少數 CSS 屬性會觸發一個新的層疊上下文,例如opacity小于 1,filter不是none,transform不是none。
https://css-tricks.com/almana...
https://philipwalton.com/arti...
https://developer.mozilla.org...
請闡述塊格式化上下文(Block Formatting Context)及其工作原理。塊格式上下文(BFC)是 Web 頁面的可視化 CSS 渲染的部分,是塊級盒布局發生的區域,也是浮動元素與其他元素交互的區域。
一個 HTML 盒(Box)滿足以下任意一條,會創建塊格式化上下文:
float的值不是none.
position的值不是static或relative.
display的值是table-cell、table-caption、inline-block、flex、或inline-flex。
overflow的值不是visible。
在 BFC 中,每個盒的左外邊緣都與其包含的塊的左邊緣相接。
兩個相鄰的塊級盒在垂直方向上的邊距會發生合并(collapse)。更多內容請參考邊距合并(margin collapsing)。
https://developer.mozilla.org...
https://www.sitepoint.com/und...
有哪些清除浮動的技術,都適用哪些情況?空div方法:。
Clearfix 方法:上文使用.clearfix類已經提到。
overflow: auto或overflow: hidden方法:上文已經提到。
在大型項目中,我會使用 Clearfix 方法,在需要的地方使用.clearfix。設置overflow: hidden的方法可能使其子元素顯示不完整,當子元素的高度大于父元素時。
請解釋什么是雪碧圖(css sprites),以及如何實現?雪碧圖是把多張圖片整合到一張上的圖片。它被運用在眾多使用了很多小圖標的網站上(Gmail 在使用)。實現方法:
使用生成器將多張圖片打包成一張雪碧圖,并為其生成合適的 CSS。
每張圖片都有相應的 CSS 類,該類定義了background-image、background-position和background-size屬性。
使用圖片時,將相應的類添加到你的元素中。
好處:
減少加載多張圖片的 HTTP 請求數(一張雪碧圖只需要一個請求)。但是對于 HTTP2 而言,加載多張圖片不再是問題。
提前加載資源,防止在需要時才在開始下載引發的問題,比如只出現在:hover偽類中的圖片,不會出現閃爍。
https://css-tricks.com/css-sp...
如何解決不同瀏覽器的樣式兼容性問題?在確定問題原因和有問題的瀏覽器后,使用多帶帶的樣式表,僅供出現問題的瀏覽器加載。這種方法需要使用服務器端渲染。
使用已經處理好此類問題的庫,比如 Bootstrap。
使用 autoprefixer 自動生成 CSS 屬性前綴。
使用 Reset CSS 或 Normalize.css。
如何為功能受限的瀏覽器提供頁面? 使用什么樣的技術和流程?優雅的降級:為現代瀏覽器構建應用,同時確保它在舊版瀏覽器中正常運行。
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
漸進式增強:構建基于用戶體驗的應用,但在瀏覽器支持時添加新增功能。
利用 caniuse.com 檢查特性支持。
使用 autoprefixer 自動生成 CSS 屬性前綴。
使用 Modernizr進行特性檢測。
有什么不同的方式可以隱藏內容(使其僅適用于屏幕閱讀器)?這些方法與可訪問性(a11y)有關。
visibility: hidden:元素仍然在頁面流中,并占用空間。
width: 0; height: 0:使元素不占用屏幕上的任何空間,導致不顯示它。
position: absolute; left: -99999px: 將它置于屏幕之外。
text-indent: -9999px:這只適用于block元素中的文本。
Metadata: 例如通過使用 Schema.org,RDF 和 JSON-LD。
WAI-ARIA:如何增加網頁可訪問性的 W3C 技術規范。
即使 WAI-ARIA 是理想的解決方案,我也會采用絕對定位方法,因為它具有最少的注意事項,適用于大多數元素,而且使用起來非常簡單。
https://www.w3.org/TR/wai-ari...
https://developer.mozilla.org...
http://a11yproject.com/
除了screen,你還能說出一個 @media 屬性的例子嗎?all
適用于所有設備。
print
為了加載合適的文檔到當前使用的可視窗口. 需要提前咨詢 paged media(媒體屏幕尺寸), 以滿足個別設備網頁尺寸不匹配等問題。
screen
主要適用于彩色的電腦屏幕
speech
解析speech這個合成器. 注意: CSS2已經有一個相似的媒體類型叫aural.
https://developer.mozilla.org...
首先,瀏覽器從最右邊的選擇器,即關鍵選擇器(key selector),向左依次匹配。根據關鍵選擇器,瀏覽器從 DOM 中篩選出元素,然后向上遍歷被選元素的父元素,判斷是否匹配。選擇器匹配語句鏈越短,瀏覽器的匹配速度越快。避免使用標簽和通用選擇器作為關鍵選擇器,因為它們會匹配大量的元素,瀏覽器必須要進行大量的工作,去判斷這些元素的父元素們是否匹配。
BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
BEM (Block Element Modifier)原則上建議為獨立的 CSS 類命名,并且在需要層級關系時,將關系也體現在命名中,這自然會使選擇器高效且易于覆蓋。
搞清楚哪些 CSS 屬性會觸發重新布局(reflow)、重繪(repaint)和合成(compositing)。在寫樣式時,避免觸發重新布局的可能。
https://developers.google.com...
https://csstriggers.com/
使用 CSS 預處理的優缺點分別是什么?優點:
提高 CSS 可維護性。
易于編寫嵌套選擇器。
引入變量,增添主題功能。可以在不同的項目中共享主題文件。
通過混合(Mixins)生成重復的 CSS。
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
將代碼分割成多個文件。不進行預處理的 CSS,雖然也可以分割成多個文件,但需要建立多個 HTTP 請求加載這些文件。
缺點:
需要預處理工具。
重新編譯的時間可能會很慢。
對于你使用過的 CSS 預處理,說說喜歡和不喜歡的地方?喜歡:
絕大部分優點上題以及提過。
Less 用 JavaScript 實現,與 NodeJS 高度結合。
Dislikes:
我通過node-sass使用 Sass,它用 C ++ 編寫的 LibSass 綁定。在 Node 版本切換時,我必須經常重新編譯。
Less 中,變量名稱以@作為前綴,容易與 CSS 關鍵字混淆,如@media、@import和@font-face。
如何實現一個使用非標準字體的網頁設計?使用@font-face并為不同的font-weight定義font-family。
解釋瀏覽器如何確定哪些元素與 CSS 選擇器匹配。這部分與上面關于編寫高效的 CSS 有關。瀏覽器從最右邊的選擇器(關鍵選擇器)根據關鍵選擇器,瀏覽器從 DOM 中篩選出元素,然后向上遍歷被選元素的父元素,判斷是否匹配。選擇器匹配語句鏈越短,瀏覽器的匹配速度越快。
例如,對于形如p span的選擇器,瀏覽器首先找到所有元素,并遍歷它的父元素直到根元素以找到
元素。對于特定的,只要找到一個
,就知道"`已經匹配并停止繼續匹配。
https://stackoverflow.com/que...
描述偽元素及其用途。CSS 偽元素是添加到選擇器的關鍵字,去選擇元素的特定部分。它們可以用于裝飾(:first-line,:first-letter)或將元素添加到標記中(與 content:...組合),而不必修改標記(:before,:after)。
:first-line和:first-letter可以用來修飾文字。
上面提到的.clearfix方法中,使用clear: both來添加不占空間的元素。
使用:before和after展示提示中的三角箭頭。鼓勵關注點分離,因為三角被視為樣式的一部分,而不是真正的 DOM。如果不使用額外的 HTML 元素,只用 CSS 樣式繪制三角形是不太可能的。
https://css-tricks.com/almana...
說說你對盒模型的理解,以及如何告知瀏覽器使用不同的盒模型渲染布局。CSS 盒模型描述了以文檔樹中的元素而生成的矩形框,并根據排版模式進行布局。每個盒子都有一個內容區域(例如文本,圖像等)以及周圍可選的padding、border和margin區域。
CSS 盒模型負責計算:
塊級元素占用多少空間。
邊框是否重疊,邊距是否合并。
盒子的尺寸。
盒模型有以下規則:
塊級元素的大小由width、height、padding、border和margin決定。
如果沒有指定height,則塊級元素的高度等于其包含子元素的內容高度加上padding(除非有浮動元素,請參閱下文)。
如果沒有指定width,則非浮動塊級元素的寬度等于其父元素的寬度減去父元素的padding。
元素的height是由內容的height來計算的。
元素的width是由內容的width來計算的。
默認情況下,padding和border不是元素width和height的組成部分。
https://www.smashingmagazine....
* { box-sizing: border-box; }會產生怎樣的效果?元素默認應用了box-sizing: content-box,元素的寬高只會決定內容(content)的大小。
box-sizing: border-box改變計算元素width和height的方式,border和padding的大小也將計算在內。
元素的height = 內容(content)的高度 + 垂直方向的padding + 垂直方向border的寬度
元素的width = 內容(content)的寬度 + 水平方向的padding + 水平方向border的寬度
display的屬性值都有哪些?none, block, inline, inline-block, table, table-row, table-cell, list-item.
inline和inline-block有什么區別?我把block也加入其中,為了獲得更好的比較。
block | inline-block | inline | |
---|---|---|---|
大小 | 填充其父容器的寬度。 | 取決于內容。 | 取決于內容。 |
定位 | 從新的一行開始,并且不允許旁邊有 HTML 元素(除非是float) | 與其他內容一起流動,并允許旁邊有其他元素。 | 與其他內容一起流動,并允許旁邊有其他元素。 |
能否設置width和height | 能 | 能 | 不能。 設置會被忽略。 |
可以使用vertical-align對齊 | 不可以 | 可以 | 可以 |
邊距(margin)和填充(padding) | 各個方向都存在 | 各個方向都存在 | 只有水平方向存在。垂直方向會被忽略。 盡管border和padding在content周圍,但垂直方向上的空間取決于"line-height" |
浮動(float) | - | - | 就像一個block元素,可以設置垂直邊距和填充。 |
經過定位的元素,其position屬性值必然是relative、absolute、fixed或sticky。
static:默認定位屬性值。該關鍵字指定元素使用正常的布局行為,即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative:該關鍵字下,元素先放置在未添加定位時的位置,再在不改變頁面布局的前提下調整元素位置(因此會在此元素未添加定位時所在位置留下空白)。
absolute:不為元素預留空間,通過指定元素相對于最近的非 static 定位祖先元素的偏移,來確定元素位置。絕對定位的元素可以設置外邊距(margins),且不會與其他邊距合并。
fixed:不為元素預留空間,而是通過指定元素相對于屏幕視口(viewport)的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時,元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時,容器由視口改為該祖先。
sticky:盒位置根據正常流計算(這稱為正常流動中的位置),然后相對于該元素在流中的 flow root(BFC)和 containing block(最近的塊級祖先元素)定位。在所有情況下(即便被定位元素為 table 時),該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時,后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同。
https://developer.mozilla.org...
你使用過哪些現有的 CSS 框架?你是如何改進它們的?Bootstrap: 更新周期緩慢。Bootstrap 4 已經處于 alpha 版本將近兩年了。添加了在頁面中廣泛使用的微調按鈕組件。
Semantic UI:源代碼結構使得自定義主題很難理解。非常規主題系統的使用體驗很差。外部庫的路徑需要硬編碼(hard code)配置。變量重新賦值沒有 Bootstrap 設計得好。
Bulma: 需要很多非語義的類和標記,顯得很多余。不向后兼容,以至于升級版本后,會破壞應用的正常運行。
你了解 CSS Flex 和 Grid 嗎?Flex 主要用于一維布局,而 Grid 則用于二維布局。
Flexflex容器中存在兩條軸, 橫軸和縱軸, 容器中的每個單元稱為flex item。
在容器上可以設置6個屬性:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
注意:當設置 flex 布局之后,子元素的 float、clear、vertical-align 的屬性將會失效。
Flex 項目屬性有六種屬性可運用在 item 項目上:
order
flex-basis
flex-grow
flex-shrink
flex
align-self
GridCSS網格布局用于將頁面分割成數個主要區域,或者用來定義組件內部元素間大小、位置和圖層之間的關系。
像表格一樣,網格布局讓我們能夠按行或列來對齊元素。 但是,使用CSS網格可能還是比CSS表格更容易布局。 例如,網格容器的子元素可以自己定位,以便它們像CSS定位的元素一樣,真正的有重疊和層次。
響應式設計與自適應設計有何不同?響應式設計和自適應設計都以提高不同設備間的用戶體驗為目標,根據視窗大小、分辨率、使用環境和控制方式等參數進行優化調整。
響應式設計的適應性原則:網站應該憑借一份代碼,在各種設備上都有良好的顯示和使用效果。響應式網站通過使用媒體查詢,自適應柵格和響應式圖片,基于多種因素進行變化,創造出優良的用戶體驗。就像一個球通過膨脹和收縮,來適應不同大小的籃圈。
自適應設計更像是漸進式增強的現代解釋。與響應式設計單一地去適配不同,自適應設計通過檢測設備和其他特征,從早已定義好的一系列視窗大小和其他特性中,選出最恰當的功能和布局。與使用一個球去穿過各種的籃筐不同,自適應設計允許使用多個球,然后根據不同的籃筐大小,去選擇最合適的一個。
https://developer.mozilla.org...
http://mediumwell.com/respons...
https://css-tricks.com/the-di...
你有沒有使用過視網膜分辨率的圖形?當中使用什么技術?我傾向于使用更高分辨率的圖形(顯示尺寸的兩倍)來處理視網膜顯示。更好的方法是使用媒體查詢,像@media only screen and (min-device-pixel-ratio: 2) { ... },然后改變background-image。
對于圖標類的圖形,我會盡可能使用 svg 和圖標字體,因為它們在任何分辨率下,都能被渲染得十分清晰。
還有一種方法是,在檢查了window.devicePixelRatio的值后,利用 JavaScript 將 btn.onclick = function() {} btn.onclick = null
DOM2
DOM2級事件可以冒泡和捕獲
通過addEventListener綁定
通過removeEventListener解綁
// 綁定 btn.addEventListener("click", sayHi) // 解綁 btn.removeEventListener("click", sayHi)
DOM3
DOM3具有更多事件類型
DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型,全部類型如下:
UI事件,當用戶與頁面上的元素交互時觸發,如:load、scroll 焦點事件,當元素獲得或失去焦點時觸發,如:blur、focus 鼠標事件,當用戶通過鼠標在頁面執行操作時觸發如:dbclick、mouseup 滾輪事件,當使用鼠標滾輪或類似設備時觸發,如:mousewheel 文本事件,當在文檔中輸入文本時觸發,如:textInput 鍵盤事件,當用戶通過鍵盤在頁面上執行操作時觸發,如:keydown、keypress 合成事件,當為IME(輸入法編輯器)輸入字符時觸發,如:compositionstart 變動事件,當底層DOM結構發生變化時觸發,如:DOMsubtreeModified
https://www.jianshu.com/p/3ac...
如何自定義事件原生提供了3個方法實現自定義事件
createEvent,設置事件類型,是 html 事件還是 鼠標事件
initEvent 初始化事件,事件名稱,是否允許冒泡,是否阻止自定義事件
dispatchEvent 觸發事件
MDN
target和currentTarget區別event.target
返回觸發事件的元素
event.currentTarget
返回綁定事件的元素
prototype和__proto__的關系是什么所有的對象都擁有__proto__屬性,它指向對象構造函數的prototype屬性
let obj = {} obj.__proto__ === Object.prototype // true function Test(){} test.__proto__ == Test.prototype // true
所有的函數都同時擁有__proto__和protytpe屬性
函數的__proto__指向自己的函數實現 函數的protytpe是一個對象 所以函數的prototype也有__proto__屬性 指向Object.prototype
function func() {} func.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__指向null
Object.prototype.__proto__ // null原型繼承
所有的JS對象都有一個prototype屬性,指向它的原型對象。當試圖訪問一個對象的屬性時,如果沒有在該對象上找到,它還會搜尋該對象的原型,以及該對象的原型的原型,依次層層向上搜索,直到找到一個名字匹配的屬性或到達原型鏈的末尾。
繼承JS高程第3版 第6章 繼承
寄生組合式繼承
function SuperType(name) { this.name = name this.colors = ["red"] } SuperType.prototype.sayName = function() { console.log(this.name) } // 繼承實例屬性 function SubType(name, age) { SuperType.call(this, name) this.age = age } function inheritPrototype(subType, superType) { let prototype = Object.create(superType.prototype) prototype.constructor = subType subType.prototype = prototype } // 繼承原型方法 inheritPrototype(SubType, SuperType) // 定義自己的原型方法 SubType.prototype.sayAge = function() { console.log(this.age) }閉包
閉包是指有權訪問另一個函數作用域中的變量的函數。
function sayHi(name) { return () => { console.log(`Hi! ${name}`) } } const test = sayHi("xiaoming") test() // Hi! xiaoming
雖然sayHi函數已經執行完畢,但是其活動對象也不會被銷毀,因為test函數仍然引用著sayHi函數中的變量name,這就是閉包。
但也因為閉包引用著另一個函數的變量,導致另一個函數已經不使用了也無法銷毀,所以閉包使用過多,會占用較多的內存,這也是一個副作用。
這個題目是考察閉包的使用
function sayHi() { console.log("hi") } function threeTimes(fn) { let times = 0 return () => { if (times++ < 3) { fn() } } } const newFn = threeTimes(sayHi) newFn() newFn() newFn() newFn() newFn() // 后面兩次執行都無任何反應
通過閉包變量 times 來控制函數的執行
實現add函數,讓add(a)(b)和add(a,b)兩種調用結果相同function add(a, b) { if (b === undefined) { return function(x) { return a + x } } return a + b }Ajax
Ajax(asynchronous JavaScript and XML)是使用客戶端上的許多 Web 技術,創建異步 Web 應用的一種 Web 開發技術。借助 Ajax,Web 應用可以異步(在后臺)向服務器發送數據和從服務器檢索數據,而不會干擾現有頁面的顯示和行為。通過將數據交換層與表示層分離,Ajax 允許網頁和擴展 Web 應用程序動態更改內容,而無需重新加載整個頁面。實際上,現在通常將 JSON 替換為 XML,因為 JavaScript 對 JSON 有原生支持優勢。
XMLHttpRequest API 經常用于異步通信。此外還有最近流行的fetch API。
let xmlhttp if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp = new XMLHttpRequest() } else { // IE6, IE5 瀏覽器執行代碼 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } xmlhttp.onreadystatechange = () => { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText } } xmlhttp.open("GET", "/ajax/test.txt", true) xmlhttp.send()使用Ajax的優缺點分別是什么
優點
交互性更好。來自服務器的新內容可以動態更改,無需重新加載整個頁面。
減少與服務器的連接,因為腳本和樣式只需要被請求一次。
狀態可以維護在一個頁面上。JavaScript 變量和 DOM 狀態將得到保持,因為主容器頁面未被重新加載。
基本上包括大部分 SPA 的優點。
缺點
動態網頁很難收藏。
如果 JavaScript 已在瀏覽器中被禁用,則不起作用。
有些網絡爬蟲不執行 JavaScript,也不會看到 JavaScript 加載的內容。
基本上包括大部分 SPA 的缺點。
https://github.com/yangshun/f...
Ajax和Fetch區別ajax是使用XMLHttpRequest對象發起的,但是用起來很麻煩,所以ES6新規范就有了fetch,fetch發一個請求不用像ajax那樣寫一大堆代碼。
使用fetch無法取消一個請求,這是因為fetch基于Promise,而Promise無法做到這一點。
在默認情況下,fetch不會接受或者發送cookies
fetch沒有辦法原生監測請求的進度,而XMLHttpRequest可以
fetch只對網絡請求報錯,對400,500都當做成功的請求,需要封裝去處理
fetch由于是ES6規范,兼容性上比不上XMLHttpRequest
變量提升var會使變量提升,這意味著變量可以在聲明之前使用。let和const不會使變量提升,提前使用會報錯。
變量提升(hoisting)是用于解釋代碼中變量聲明行為的術語。使用var關鍵字聲明或初始化的變量,會將聲明語句“提升”到當前作用域的頂部。 但是,只有聲明才會觸發提升,賦值語句(如果有的話)將保持原樣。
用var聲明的變量的作用域是它當前的執行上下文,它可以是嵌套的函數,也可以是聲明在任何函數外的變量。let和const是塊級作用域,意味著它們只能在最近的一組花括號(function、if-else 代碼塊或 for 循環中)中訪問。
function foo() { // 所有變量在函數中都可訪問 var bar = "bar"; let baz = "baz"; const qux = "qux"; console.log(bar); // bar console.log(baz); // baz console.log(qux); // qux } console.log(bar); // ReferenceError: bar is not defined console.log(baz); // ReferenceError: baz is not defined console.log(qux); // ReferenceError: qux is not defined
if (true) { var bar = "bar"; let baz = "baz"; const qux = "qux"; } // 用 var 聲明的變量在函數作用域上都可訪問 console.log(bar); // bar // let 和 const 定義的變量在它們被定義的語句塊之外不可訪問 console.log(baz); // ReferenceError: baz is not defined console.log(qux); // ReferenceError: qux is not defined
var會使變量提升,這意味著變量可以在聲明之前使用。let和const不會使變量提升,提前使用會報錯。
console.log(foo); // undefined var foo = "foo"; console.log(baz); // ReferenceError: can"t access lexical declaration "baz" before initialization let baz = "baz"; console.log(bar); // ReferenceError: can"t access lexical declaration "bar" before initialization const bar = "bar";
用var重復聲明不會報錯,但let和const會。
var foo = "foo"; var foo = "bar"; console.log(foo); // "bar" let baz = "baz"; let baz = "qux"; // Uncaught SyntaxError: Identifier "baz" has already been declared
let和const的區別在于:let允許多次賦值,而const只允許一次。
// 這樣不會報錯。 let foo = "foo"; foo = "bar"; // 這樣會報錯。 const baz = "baz"; baz = "qux";
https://github.com/yangshun/f...
對象淺拷貝和深拷貝有什么區別在 JS 中,除了基本數據類型,還存在對象、數組這種引用類型。
基本數據類型,拷貝是直接拷貝變量的值,而引用類型拷貝的其實是變量的地址。
let o1 = {a: 1} let o2 = o1
在這種情況下,如果改變 o1 或 o2 其中一個值的話,另一個也會變,因為它們都指向同一個地址。
o2.a = 3 console.log(o1.a) // 3
而淺拷貝和深拷貝就是在這個基礎之上做的區分,如果在拷貝這個對象的時候,只對基本數據類型進行了拷貝,而對引用數據類型只是進行了引用的傳遞,而沒有重新創建一個新的對象,則認為是淺拷貝。反之,在對引用數據類型進行拷貝的時候,創建了一個新的對象,并且復制其內的成員變量,則認為是深拷貝。
怎么實現對象深拷貝let o1 = {a:{ b:1 } } let o2 = JSON.parse(JSON.stringify(o1))
另一種方法
function deepCopy(s) { const d = {} for (let k in s) { if (typeof s[k] == "object") { d[k] = deepCopy(s[k]) } else { d[k] = s[k] } } return d }數組去重
ES5
function unique(arry) { const temp = [] arry.forEach(e => { if (temp.indexOf(e) == -1) { temp.push(e) } }) return temp }
ES6
function unique (arr) { return Array.from(new Set(arr)) }數據類型
Undefined
Null
Boolean
Number
String
Object
symbol(ES6新增)
內置函數(原生函數)String
Number
Boolean
Object
Function
Array
Date
RegExp
Error
Symbol
原始值 "I am a string" 并不是一個對象,它只是一個字面量,并且是一個不可變的值。
如果要在這個字面量上執行一些操作,比如獲取長度、訪問其中某個字符等,那需要將其
轉換為 String 對象。
幸好,在必要時語言會自動把字符串字面量轉換成一個 String 對象,也就是說你并不需要
顯式創建一個對象。
Array.isArray([]) // true Array.isArray({}) // false typeof [] // "object" typeof {} // "object" Object.prototype == [].__proto__ // false Object.prototype == {}.__proto__ // true Array.prototype == [].__proto__ // true Array.prototype == {}.__proto__ // false自動分號
有時 JavaScript 會自動為代碼行補上缺失的分號,即自動分號插入(Automatic SemicolonInsertion,ASI)。
因為如果缺失了必要的 ; ,代碼將無法運行,語言的容錯性也會降低。ASI 能讓我們忽略那些不必要的 ; 。
請注意,ASI 只在換行符處起作用,而不會在代碼行的中間插入分號。
如果 JavaScript 解析器發現代碼行可能因為缺失分號而導致錯誤,那么它就會自動補上分
號。并且,只有在代碼行末尾與換行符之間除了空格和注釋之外沒有別的內容時,它才會
這樣做。
https://www.css88.com/archive...
cookie、localStorage、sessionStorage區別特性 | cookie | localStorage | sessionStorage |
---|---|---|---|
由誰初始化 | 客戶端或服務器,服務器可以使用Set-Cookie請求頭。 | 客戶端 | 客戶端 |
數據的生命周期 | 一般由服務器生成,可設置失效時間,如果在瀏覽器生成,默認是關閉瀏覽器之后失效 | 永久保存,可清除 | 僅在當前會話有效,關閉頁面后清除 |
存放數據大小 | 4KB | 5MB | 5MB |
與服務器通信 | 每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端保存 | 僅在客戶端保存 |
用途 | 一般由服務器生成,用于標識用戶身份 | 用于瀏覽器緩存數據 | 用于瀏覽器緩存數據 |
訪問權限 | 任意窗口 | 任意窗口 | 當前頁面窗口 |
自執行函數:1、聲明一個匿名函數2、馬上調用這個匿名函數。
作用:創建一個獨立的作用域。
好處:防止變量彌散到全局,以免各種js庫沖突。隔離作用域避免污染,或者截斷作用域鏈,避免閉包造成引用變量無法釋放。利用立即執行特性,返回需要的業務函數或對象,避免每次通過條件判斷來處理
場景:一般用于框架、插件等場景
多個頁面之間如何進行通信有如下幾個方式:
cookie
web worker
localeStorage和sessionStorage
css動畫和js動畫的差異代碼復雜度,js 動畫代碼相對復雜一些
動畫運行時,對動畫的控制程度上,js 能夠讓動畫,暫停,取消,終止,css動畫不能添加事件
動畫性能看,js 動畫多了一個js 解析的過程,性能不如 css 動畫好
https://zhuanlan.zhihu.com/p/...
如何實現文件斷點續傳斷點續傳最核心的內容就是把文件“切片”然后再一片一片的傳給服務器,但是這看似簡單的上傳過程卻有著無數的坑。
首先是文件的識別,一個文件被分成了若干份之后如何告訴服務器你切了多少塊,以及最終服務器應該如何把你上傳上去的文件進行合并,這都是要考慮的。
因此在文件開始上傳之前,我們和服務器要有一個“握手”的過程,告訴服務器文件信息,然后和服務器約定切片的大小,當和服務器達成共識之后就可以開始后續的文件傳輸了。
前臺要把每一塊的文件傳給后臺,成功之后前端和后端都要標識一下,以便后續的斷點。
當文件傳輸中斷之后用戶再次選擇文件就可以通過標識來判斷文件是否已經上傳了一部分,如果是的話,那么我們可以接著上次的進度繼續傳文件,以達到續傳的功能。
有了HTML5 的 File api之后切割文件比想想的要簡單的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
參數start是開始切片的位置,end是切片結束的位置 單位都是字節。通過控制start和end 就可以是實現文件的分塊
如
file.slice(0,1000); file.slice(1000,2000); file.slice(2000,3000); // ......
在把文件切成片之后,接下來要做的事情就是把這些碎片傳到服務器上。
如果中間掉線了,下次再傳的時候就得先從服務器獲取上一次上傳文件的位置,然后以這個位置開始上傳接下來的文件內容。
https://www.cnblogs.com/zhwl/...
new一個對象經歷了什么function Test(){} const test = new Test()
創建一個新對象:
const obj = {}
設置新對象的constructor屬性為構造函數的名稱,設置新對象的__proto__屬性指向構造函數的prototype對象
obj.constructor = Test obj.__proto__ = Test.prototype
使用新對象調用函數,函數中的this被指向新實例對象
Test.call(obj)
將初始化完畢的新對象地址,保存到等號左邊的變量中
bind、call、apply的區別call和apply其實
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114518.html
摘要:每天會折騰一道及以上題目,并將其解題思路記錄成文章,發布到和微信公眾號上。三匯總返回目錄在月日月日這半個月中,做了匯總了數組知識點。或者拉到本文最下面,添加的微信等會根據題解以及留言內容,進行補充,并添加上提供題解的小伙伴的昵稱和地址。 LeetCode 匯總 - 2019/08/15 Create by jsliang on 2019-08-12 19:39:34 Recently...
摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續更新中……,可以關注下github 項目地址 https:...
摘要:整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次,徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要:希望大家在這浮夸的前端圈里,保持冷靜,堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點,受到很多朋友的關注,都強烈要求再出多些React相前的面試題,受到大家的邀請,我又找了20多個React的使用者,他們給出了328道React的面試題,由我整理好發給大家,同時發布在了前端面試每日3+1的React專題,希望對大家有所幫助,同時大...
摘要:如何考察一個人是不是經驗豐富我們需要在問答式的面試中,對其項目經驗進行挖掘。如何設置筆試題現在網上有大量的面經的存在,對于我們面試是一個巨大的挑戰。尊重應聘者我們要尊重每一個來應聘的人,不要輕視別人,或者故意刁難別人。 時光荏苒,2個月前,我才剛總結了如何應對面試官,現在的我開始總結如何面試別人了。笑哭.png 1.我們需要什么樣的人 招聘肯定要有標準,這樣我們才能更快的找到我們需要的...
閱讀 4365·2021-11-24 10:24
閱讀 1409·2021-11-22 15:22
閱讀 2037·2021-11-17 09:33
閱讀 2427·2021-09-22 15:29
閱讀 514·2019-08-30 15:55
閱讀 1652·2019-08-29 18:42
閱讀 2730·2019-08-29 12:55
閱讀 1772·2019-08-26 13:55