雅虎34条页面优化法则

1. 尽量减少HTTP的请求次数： 合并文件，CSS Sprites, 图片地图， 内联图像
2. 减少DNS查找次数
3. 避免跳转
4. 可缓存的AJAX
5. 推迟加载内容
6. 预加载
7. 减少DOM元素数量
8. 根据域名划分页面内容
9. 使iframe的数量最小
10. 不要出现404
11. 使用内容分发网站
12. 为文件头指定EXpirse或Cache-control
13. Gzip压缩文件内容
14. 配置Etag
15. 尽早刷新输出缓冲
16. 使用GET完后AJAX请求
17. 吧样式表置于顶部
18. 避免使用CSS表达式
19. 使用外部JS和CSS
20. 消减JS和CSS
21. 用 代替@import
22. 避免使用滤镜
23. 将脚本置于页面底部
24. 删除重复脚本
25. 减少DOM访问
26. 开发智能事件处理程序
27. 减少Cookie体积
28. 对于页面内容使用无Cookie域名
29. 优化图像
30. 优化CSS sprite
31. 不要子啊HTML中缩放图像
32. favicon.ico要小且可缓存
33. 保持单个内容小于25K
34. 打包组件成复合文本

从输入URL到页面加载完后经历了什么

1. 浏览器接受URL， URL的信息包括： 协议， 网络地址：端口号， 资源路径， 查询字符串？， 片段标识符#

2. 将URL与缓存进行对比，如果请求页面在缓存中且未过期，直接进行第八步
   缓存分为彻底缓存和协商缓存，这里的是否过期指定是彻底缓存

- 彻底缓存的机制

HTTP首部字段： cache-control Expires

• Expires是一个绝对事件即服务器时间（现已很少用）
• cache-control中的max-age 保存一个相对时间，如Cache-Control: max-age = 48420, 表示缓存在48420s内有效
  cache-control还有其他指令：

  cache-control还有其他指令：
  （ 请求/响应指令）
  no-cache,使用缓存前必须和服务器进行确认，也就是需要发起请求。
  no-store,不缓存；
  （响应指令）
  public，缓存文件保存在缓存服务器上，且其他用户也可以访问；
  private，只有特定用户才能访问该缓存资源。

- 缓存协商

当缓存过期时， 浏览器会向服务器发起请求询问资源是否真的过期这就是缓存协商
HTTP首部字段： last-modified Etag

• last-modified是第一次请求资源时， 服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。当然，用该方法也存在问题，比如修改时间有变化但实际内容没有变化，而服务器却再次将资源发送给浏览器。所以，使用Etag进行判断更好。
• Etag 资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

  缓存协商的过程需要发起一起HTTP请求，如果返回304则继续使用缓存。对于移动端一次请求还是有代价的，所以我们需要避免304。
  对于很少进行更改的静态文件，可以在文件名中加入版本号，如get.v1.js，并且把Cache-Control的max-age设置成一年半载，这样就不会发送请求。
  需要注意的是，当这些文件更新的时候，我们需要更新其版本号，这样浏览器才会到服务器下载新资源。

1. DNS解析：网络地址不是IP地址，通过DNS解析域名返回一个IP地址
   3.1 DNS协议：
   DNS数据库是域名和IP地址相互映射的一个分布式数据库，DNS协议用来将域名转换为IP地址，它运行在UDP协议之上。为什么选择UDP而非TCP？原因如下：UDP无需连接，时效性更好，进行一次查询只需要两个DNS包。而TCP需要先用3个包建立连接，再用2个DNS包进行查询，最后用4个包断开连接，连接成本远大于查询本身，容易让DNS服务器不堪重负。
   3.2 DNS查询：
   操作系统会先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。
   否则，查找本地DNS解析器缓存，如果查找到则返回。
   否则，查找本地DNS服务器，如果查找到则返回。
   否则，1）未用转发模式，按根域服务器 ->顶级域,.com->第二层域，example.com ->子域，www.example.com的顺序找到IP地址。2）用转发模式，按上一级DNS服务器->上上级->….逐级向上查询找到IP地址。

2. 浏览器和服务器通过三次握手建立TCP链接

3. 浏览器向服务器发送HTTP请求

4. 服务器接收到请求，从它的文档空间中查找资源并饭会HTTP响应

5. 浏览器接受HTTP响应，根据HTTP header里的状态码，做出处理
   1XX 表示消息
   2XX 表示成功
   3XX 表示重定向
   4XX 表示请求错误
   5XX 表示服务器端错误
   常见状态码：
   200 OK
   表示请求成功 一切正常
   301 Moved Permanently
   重定向，客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL
   302 Found
   临时重定向，类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
   304 Not Modified
   客户端有缓冲的文档并发出了一个条件性的请求。服务器告诉客户，原来缓冲的文档还可以继续使用。
   400 Bad Request
   请求出现语法错误。
   403 Forbidden
   资源不可用。
   404 Not Found
   无法找到指定位置的资源。
   405 Method Not Allowed
   请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。
   500 Internal Server Error
   服务器遇到了意料不到的情况，不能完成客户的请求。
   501 Not Implemented
   服务器不支持实现请求所需要的功能。

6. 如果是可以缓存的，这个响应则会被存储起来。

7. 解码
   9.1 浏览器拿到index.html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载
   9.2 解析成对应的树形数据结构DOM树、CSS规则树，Javascript脚本通过DOM API和CSSOM API来操作DOM树、CSS规则树。

8. 渲染
   10.1 计算CSS样式（JS可动态修改dom或css,进一步改变渲染树和分布）
   10.2 构建渲染树（Repaint：屏幕的一部分要重画，比如某个CSS的背景色变了，元素的几何尺寸没有变。Reflow：几何尺寸变了，我们需要重新验证并计算Render Tree。）
   10.3 确认布局（定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……）
   10.4 绘制（调用操作系统Native GUI的API绘制，将每个节点转化为实际像素绘制到视口上）

9. 关闭TCP链接或者继续保持连接
   通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。

百度面试

注重基础

1. extend是继承，如何自己用原生JS实现继承
2. =>函数与普通匿名函数的区别（this）
3. CSS选择器的权重

转载和借鉴：
作者：minxuan
链接：http://www.jianshu.com/p/71cf7f69eca8