web前端开发面试题(附答案)-1
<h3 id="1浏览器中输入url到网页显示整个过程发生了什么">1、浏览器中输入url到网页显示，整个过程发生了什么</h3><blockquote>
<p>域名解析<br>
发起tcp三次握手<br>
建立tcp连接之后发起htttp请求<br>
服务器端响应http请求，浏览器得到html代码<br>
浏览器器解析html代码，并请求html代码中的资源<br>
浏览器对页面进行渲染呈现给用户</p>
</blockquote>
<h3 id="2cookie的弊端">2、cookie的弊端</h3>
<blockquote>
<p>每个特定的域名下最多生成的cookie的个数有限制<br>
IE和Opera会清理近期最少使用的cookie，firefox会随机清理cookie<br>
cookie最大为4096字节，为了兼容一般不超过4095字节<br>
安全性问题，如果cookie被人劫持，就可以获得所有的session信息</p>
</blockquote>
<h3 id="3主流浏览器及内核">3、主流浏览器及内核</h3>
<blockquote>
<p>Google chrome：webkit/blink<br>
safari：webkit<br>
IE：trident<br>
firefox：gecko<br>
Opera：presto/webkit/blink</p>
</blockquote>
<h3 id="4sessionstorage和localstorage的区别">4、sessionStorage和localStorage的区别</h3>
<blockquote>
<p>sessionStorage用于本地存储一个会话session中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁。<br>
localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期的。</p>
</blockquote>
<h3 id="5谈谈对bfc规范的理解">5、谈谈对bfc规范的理解</h3>
<blockquote>
<p>bfc是block formatting context即格式化上下文<br>
bfc是页面css视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域<br>
bfc最重要的一个效果是，让处于bfc内部与外部的元素相互隔离，使内外的元素的定位不会相互影响</p>
</blockquote>
<h3 id="6请说出至少三种减少页面加载时间的方法">6、请说出至少三种减少页面加载时间的方法</h3>
<blockquote>
<p>尽量减少页面中重复的http请求<br>
css样式放置在文件头部、js脚本放置在文件末尾<br>
压缩合并js、css代码<br>
服务器开启gzip压缩</p>
</blockquote>
<h3 id="7对前端工程师这个职位是怎样理解的">7、对前端工程师这个职位是怎样理解的</h3>
<blockquote>
<p>前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到100分，甚至更好<br>
参与项目，快速高质量完成实现效果图<br>
做好页面结构、页面重构和用户体验<br>
处理hack、兼容以及写出优美的代码格式</p>
</blockquote>
<h3 id="8一次js请求一般情况下有哪些地方会有缓存处理">8、一次js请求一般情况下有哪些地方会有缓存处理</h3>
<blockquote>
<p>浏览器端存储<br>
浏览器端文件缓存<br>
http缓存<br>
服务器端文件类型缓存<br>
表现层&DOM缓存</p>
</blockquote>
<h3 id="9一个页面有大量的图片怎么优化这些图片的加载">9、一个页面有大量的图片，怎么优化这些图片的加载</h3>
<blockquote>
<p>图片懒加载，滚动到相应位置再加载图片<br>
图片预加载，预先加载展示图片的前一张和后一张<br>
使用cssSprite</p>
</blockquote>
<h3 id="10行内元素和块级元素有哪些img属于什么元素">10、行内元素和块级元素有哪些？img属于什么元素</h3>
<blockquote>
<h4 id="块元素">块元素</h4>
<p>address – 地址<br>
blockquote – 块引用<br>
center – 举中对齐块<br>
dir – 目录列表<br>
div – 常用块级容易，也是CSS layout的主要标签<br>
dl – 定义列表<br>
fieldset – form控制组<br>
form – 交互表单<br>
h1 – 大标题<br>
h2 – 副标题<br>
h3 – 3级标题<br>
h4 – 4级标题<br>
h5 – 5级标题<br>
h6 – 6级标题<br>
hr – 水平分隔线<br>
isindex – input prompt<br>
menu – 菜单列表<br>
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容<br>
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）<br>
ol – 有序表单<br>
p – 段落<br>
pre – 格式化文本<br>
table – 表格<br>
ul – 无序列表</p>
</blockquote>
<blockquote>
<h4 id="内联元素">内联元素</h4>
<p>a – 锚点<br>
abbr – 缩写<br>
acronym – 首字<br>
b – 粗体(不推荐)<br>
bdo – bidi override<br>
big – 大字体<br>
br – 换行<br>
cite – 引用<br>
code – 计算机代码(在引用源码的时候需要)<br>
dfn – 定义字段<br>
em – 强调<br>
font – 字体设定(不推荐)<br>
i – 斜体<br>
img – 图片<br>
input – 输入框<br>
kbd – 定义键盘文本<br>
label – 表格标签<br>
q – 短引用<br>
s – 中划线(不推荐)<br>
samp – 定义范例计算机代码<br>
select – 项目选择<br>
small – 小字体文本<br>
span – 常用内联容器，定义文本内区块<br>
strike – 中划线<br>
strong – 粗体强调<br>
sub – 下标<br>
sup – 上标<br>
textarea – 多行文本输入框<br>
tt – 电传文本<br>
u – 下划线</p>
</blockquote>
<blockquote>
<p>img属于行内替换元素，效果与块元素一致</p>
</blockquote>
<h4 id="11表单中readonly和disabled的区别">11、表单中readonly和disabled的区别</h4>
<blockquote>
<ul>
<li>共同点：能够使用户不能改变表单中的内容</li>
<li>不同点：<br>
1、readonly只对input和textarea有效，但是disabled对所有的表单元素都是有效的，包括radio、checkbox<br>
2、readonly可以获取到焦点，只是不能修改。disabled设置的文本框无法获取焦点<br>
3、如果表单的字段是disabled，则该字段不会发送（表单传值）和序列化</li>
</ul>
</blockquote><br><br>
来源：https://www.cnblogs.com/meijiang/p/11555078.html
頁:
[1]