技术博客

前端面试题--理论

1.输入网址按下回车，到看到网页这个过程中发生了什么

  1. 域名解析
  2. 发起TCP的3次握手
  3. 简历TCP连接后发起http请求
  4. 服务器端响应http请求，浏览器得到html代码
  5. 浏览器解析html代码，并请求html代码中的资源
  6. 浏览器对html进行渲染呈现给用户
    参考：一次完成的HTTP事务是怎样一个过程

2.谈谈你对前端性能优化的理解

  1. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
  2. 请求宽带：开启GZip，精简JavaScript，移除重复脚本，图像优化，字体图标
  3. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使用Ajax可缓存
  4. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
  5. 代码校验：避免CSS表达式，避免重定向
    参考：前端工程与性能优化

3.简述盒子模型

用IE6盒子模型和W3C盒子模型
文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边据边界margin、边框边距border、内边距边界padding和内容边界content。
CSSS3中有box-sizing属性可以控制盒子的计算方式
content-box：padding和border不被包含在定义的width和height之内。对象的事件宽高等于width和height加上padding和border；
border-box：padding和border被包含在定义的widht和height之内；
参考：盒模型

4.浏览器本地存储

在HTML5中提供了sessionStorage和localStorage
sessionStorage：用于本地存储一个会话session中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储
localStorage：用于持久化的本地存储，除非主动删除，否则永久不会过期；

5.清除浮动

1
2
3
4
5
6
7
8
.clearfix:after {
  content:"";           // 生成内容作为最后一个元素
  display:block;        // 使生成的元素以块级元素显示，沾满剩余空间；
  height:0;             // 避免生成内容破坏原有布局的高度
  visibility:hidden;    // 使生成的内容不可见
  clear:both;           // 用来闭合浮动
}
.clearfix { *zoom:1; }  // 触发IE hasLayout

6.减少页面加载时间的方法

  • 尽量减少页面中重复的HTTp请求数量
  • 服务器开启gzip压缩
  • css样式的定义放在文件顶部
  • JavaScript脚本放在文件末尾
  • 压缩合并JavaScript、CSS
  • 使用多域名负载网页内的多个文件、图片
    参考：减少页面加载时间的方法