查看本文之前，期待您了解过 javascript变量声明提升(hoisting)的机制

先来看一段函数声明的代码

1
2
3
4
5

f();

function f() {
    alert('正常运行');
}

这段代码能够正常执行吗？

显然是可以的。
根据javascript的机制，这段代码将被解析为：

1
2
3
4
5
6
7

var f;

f = function() {
  alert("正常运行");
};

f();

如果是构造函数呢？

1
2
3
4
5
6
7
8

new F();

function F() {
    this.init();
}
F.prototype.init = function () {
    alert('正常运行');
}

凭直觉，这段代码能够正常执行吗？

更多

• 引入了新的盒模型处理机制，该模型用于决定元素在盒子中的分布方式以及如何处理盒子的可用空间。

• css3 新增了8个属性

  • box-align 定义子元素在盒子内垂直方向上的空间分配方式
  • box-direction 定义盒子的显示顺序
  • box-flex 定义子元素在盒子内的自适应尺寸
  • box-flex-group 定义子元素群组
  • box-lines 定义子元素分列显示
  • box-ordinal-group 定义子元素在盒子内的显示位置
  • box-orient 定义盒子分布的坐标轴
  • box-pack 定义子元素在盒子内水平方向的空间分配方式

实战练习源码

以往webapp的模块加载方式

iframe方式

iframe的方式将每个模块作为单独的页面开发，通过菜单动态载入。

• 优点：实现思路方便。
• 缺点：阻塞全局onload请求、开多了窗口会严重卡顿，代码冗余。

更多

收集经典的前端开发面试题

减少页面加载时间的方法?

• 优化图片，选择合适的格式。
• 优化 css，压缩合并 css。
• 优化 js，压缩合并 js。
• 指定高度和宽度，如果浏览器没有找到这两个参数，会一边下载图片一边计算大小。
• 减少 http 请求，合并文件，合并图片。
• 懒加载
• 异步请求

GET 和 POST 的请求最大能多大？

• GET 请求是放在 url 里面的，理论上没有限制，但是 IE 有长度限制，大概是 2083 字节。
• POST 理论上也是没有限制的，是由服务器的处理程序设置，以及服务器配置决定。

更多

网页内容

• 减少 http 请求次数
• 减少 DNS 查询次数
• 避免页面跳转
• 缓存 ajax
• 延迟加载
• 提前加载
• 减少 dom 元素数量
• 根据域名划分内容
• 减少 iframe 数量
• 避免 404

服务器

• 使用 CDN
• 添加 Expires 或者 cache-control 报头文
• Gzip 压缩传输文件
• 配置 ETags
• 尽早 flush 输出
• 使用 GET ajax 请求
• 避免空的图片 src

cookie

• 减少 cookie 大小
• 页面内容使用无 cookie 域名

更多

收集经典的前端开发面试题

setTimeout 的时间定义为 0 有什么用？

• javascript 引擎是单线程处理任务的，它把任务放在队列中，不会同步执行，必须在完成一个任务后才开始另一个任务。
• 由于 setTimeout 可以把任务从某个队列中跳出成为新队列，因此能够得到期望的结果。

怎么理解 this

• this 指向的总是调用函数的那个对象。
• this 一般情况下，是全局对象 Global。

什么是闭包

• 闭包是一个概念，我的理解是函数里的函数，能够读取函数内部变量的函数。
• 就是将函数内部和函数外部连接起来的一座桥梁。
• 闭包是不被内存回收机制回收的。

更多

收集经典的前端开发面试题

什么是 CSS 盒子模型

• 页面上的每个元素都被浏览器看做是一个矩形的盒子。
• 由内容、填充、边框、边界组成。

什么是 css sprite

• 将多个图片拼接在一个图片中，通过 background-position 和元素尺寸调节显示想要的背景的方案。
• 优点：
  _ 减少 HTTP 请求数，加快页面加载速度。
  _ 提高压缩比、减少图片大小 * 更换风格方便，只需在一张或者几张图片上修改颜色或者样式即可。
• 缺点：
  _ 图片合并麻烦
  _ 维护麻烦，修改一个图片可能需要重新布局整个图片、样式

display:none; 于 visibility:hidden; 的区别？

• 前者让元素在 dom 中消失，不占据空间，后者不会消失、并占据，只是内容不可见。
• 前者是非继承的，父节点消失、子节点也会消失，后者相反，即使父节点消失，设置子节点为 visibility: visible;可显现子节点。
• 修改前者会造成文档重排，后者只会造成元素重绘。
• 读屏器不会读取前者，会读取后者。

更多

收集经典的前端开发面试题

Doctype 是什么？说明特点。

• 声明必须处于HTML文档的头部，在标签之前。
• 声明不是一个HTML标签，是一个用于告诉浏览器使用哪种HTML规范的。
• 该标签可以声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的版本。

img 的 title 和 alt 有什么区别

• title 用于为元素提供附加的提示，通常鼠标滑动到元素上会显示。
• alt 是 img 特有的属性，是图片内容的自定义描述，用于图片无法加载时，描述图片内容。
• 搜索引擎会分析 alt 描述。

什么是 web 语义化，为什么需要语义化。

• 是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 CSS 命名的语义化。
• HTML 标签的语义化是指：使用例如 H1-H6 等恰当的表达文档结构。
• CSS 命名的语义化是指：为 HTML 标签添加有意义的 class、id。
  需要语义化的原因：
  _ 去掉样式后页面依然呈现清晰的结构。
  _ 盲人使用读屏器更好的阅读。
  _ 搜索引擎更好的理解页面，有利于收录。
  _ 团队项目可持续运作和维护。

更多

• 新增了几个文本属性

  • text-shadow 定义文本阴影或者模糊效果
  • text-overflow 定义省略文本的处理方式
  • word-wrap 定义文本超过指定容器的边界时是否断开转行。

• 完善了颜色控制，实现了对不透明效果的支持。

  • HSL 通过色调（H）、饱和度（S）、亮度（L）三个颜色通道的变化来表示颜色。
  • HSLA 在上面的基础上增加了透明度（A）的设置
  • RGBA 在 RGB 基础上增加了透明度（A）的设置
  • opacity 定义不透明度

• text-shadow 属性接受一个以逗号分隔的阴影效果列表。

实战练习源码

• 不要阻塞I/O事件队列

• 编写通用的错误处理函数来避免复制和粘贴错误处理代码。