web前端開發面試題(附答案)-1

一、瀏覽器中輸入url到網頁顯示，整個過程發生了什麼

域名解析
發起tcp三次握手
創建tcp鏈接以後發起htttp請求
服務器端響應http請求，瀏覽器獲得html代碼
瀏覽器器解析html代碼，並請求html代碼中的資源
瀏覽器對頁面進行渲染呈現給用戶

二、cookie的弊端

每一個特定的域名下最多生成的cookie的個數有限制
IE和Opera會清理近期最少使用的cookie，firefox會隨機清理cookie
cookie最大爲4096字節，爲了兼容通常不超過4095字節
安全性問題，若是cookie被人劫持，就能夠得到全部的session信息

三、主流瀏覽器及內核

Google chrome：webkit/blink
safari：webkit
IE：trident
firefox：gecko
Opera：presto/webkit/blink

四、sessionStorage和localStorage的區別

sessionStorage用於本地存儲一個會話session中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據會被銷燬。
localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據永遠不會過時的。

五、談談對bfc規範的理解

bfc是block formatting context即格式化上下文
bfc是頁面css視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域
bfc最重要的一個效果是，讓處於bfc內部與外部的元素相互隔離，使內外的元素的定位不會相互影響

六、請說出至少三種減小頁面加載時間的方法

儘可能減小頁面中重複的http請求
css樣式放置在文件頭部、js腳本放置在文件末尾
壓縮合並js、css代碼
服務器開啓gzip壓縮

七、對前端工程師這個職位是怎樣理解的

前端是最貼近用戶的程序員，前端的能力就是能讓產品從90分進化到100分，甚至更好
參與項目，快速高質量完成實現效果圖
作好頁面結構、頁面重構和用戶體驗
處理hack、兼容以及寫出優美的代碼格式

八、一次js請求通常狀況下有哪些地方會有緩存處理

瀏覽器端存儲
瀏覽器端文件緩存
http緩存
服務器端文件類型緩存
表現層&DOM緩存

九、一個頁面有大量的圖片，怎麼優化這些圖片的加載

圖片懶加載，滾動到相應位置再加載圖片
圖片預加載，預先加載展現圖片的前一張和後一張
使用cssSprite

十、行內元素和塊級元素有哪些？img屬於什麼元素

塊元素

address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 經常使用塊級容易，也是CSS layout的主要標籤
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3級標題
h4 – 4級標題
h5 – 5級標題
h6 – 6級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
noscript – 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
ol – 有序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 無序列表

內聯元素

a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
bdo – bidi override
big – 大字體
br – 換行
cite – 引用
code – 計算機代碼(在引用源碼的時候須要)
dfn – 定義字段
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
kbd – 定義鍵盤文本
label – 表格標籤
q – 短引用
s – 中劃線(不推薦)
samp – 定義範例計算機代碼
select – 項目選擇
small – 小字體文本
span – 經常使用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線

img屬於行內替換元素，效果與塊元素一致

十一、表單中readonly和disabled的區別

• 共同點：可以使用戶不能改變表單中的內容
• 不一樣點： 一、readonly只對input和textarea有效，可是disabled對全部的表單元素都是有效的，包括radio、checkbox 二、readonly能夠獲取到焦點，只是不能修改。disabled設置的文本框沒法獲取焦點 三、若是表單的字段是disabled，則該字段不會發送（表單傳值）和序列化