⑴ 如何对前端性能进行优化
前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇见的前端优化问题。前端性能进行优化规则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。
前端性能进行优化都有哪些规则
减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话，把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发，包括图片
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：
新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
举个css表达式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件，可以参考原则4。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
11. 精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。
12. 避免跳转
有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http:// .com时，实际上返回的是一个包含301代码的跳转，它指向的是http:// .com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转， 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。
13. 删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。
18. 避免404
比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。
19. 减少Cookie的大小
Cookie里面别塞那么多东西，因为每个请求都得带着他跑。
20. 使用无cookie的域
比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50
那就不用用一张500*500的大尺寸图片，影响加载
23. 缩小favicon.ico并缓存
⑵ 以下哪些是常见的web前端性能关注点
前端性能关注的重点主要有以下几点
1. 加载时间指标，主要包括三个时间断
a. Time to First Impression
表示从用户在浏览器键入url按下回车键一刻开始到页面开始有反应(用户可以在页面中看见一点点内容)为止。经常能感觉到的一个信号就是网页开始显示title。
b.Time to onLoad Event
表示从页面开始显示内容,到浏览器开始触发OnLoad函数这一时间段。只有当初始的文本和所引用的对象加载完成,浏览器才开始触发OnLoad函数
c.Time to Fully Loaded
表示从上一时间段末到整个网页完全加载完成(所有OnLoad函数以及相关的动态资源加载
完成)。在网页中含有timeout或定时刷新之类处理时较为难判断结束点。
2. 资源情况指标
网页由初始的html文本中嵌入图片以及通过XHR或者修改dom树动态加载的内容组成,css负责样式,js负责行为。所以当网页资源过多为了下载资源客户端和服务器的网络来回就更多。下面是资源方面相关的指标。
a. Total Number of Requests
包括html网页请求,css、js资源下载及其它网络请求。优化的目标之一是要尽量减少请求数。
b. Total Number of HTTP 300s/400s/500s
表示返回状态为3009重定向）、400（客户端错误）、500（服务器端错误）的http请求。尽量避免这些请求以提高页面load的时间。造成这些状态的原因经常是服务器的实施、配置和部署问题。
c. Total Size of Web Site
构成网页元素总的大小。图片或者js库的增加都会对下载时间造成重要的影响。
d. Total Size of Images/CSS/JS
image、css、js在网页元素大小中占主要比例。
e. Total Number of XHR(XMLHttpRequest) Requests
通过js异步从服务器端获得数据的请求数。一些js框架提供了跟服务器端的更新机器就是XHR请求。通过配置可以减少XHR请求的数目
3. 网络连接指标
浏览器底层的网络连接对资源的下载速度有很大影响。资源的下载过程分为很多阶段。下面介绍这些阶段以及浏览器、网络、请求如何影响这些阶段的时间
a. DNS Time
dns 查询的时间。网页请求会产生一次寻找该网页资源所在主机的dns查询。在同个域名进行网页切换不会造成新的dns查询。
b. Connect Time
指浏览器和服务器之间建立tcp/ip连接的时间对于ssl连接包括握手的时间。网络连接过慢、使用ssl、使用短连接而非常连接都是造成connect time较多的原因。
c. Server Time
指收到请求后服务器逻辑处理的时间
d. Transfer Time
这一指标与浏览器和服务器之间的连接速度相一致通过减小传输内容或使用cdn来降Transfer Time。
e. Wait Time
等待时间和同一个域中服务资源的数量直接相关。每个域的浏览器的物理网络的限制，导致资源等待可用的连接。减少资源的数量（或将资源散布在不同的域）能将这一时间降低。平均等待时间的大小更能反映等待时间是否需要注意。
f. Number of Domains / Single Resource Domains
部署网站资源的域主机数量是很重要的，因为它影响的DNS连接和等待时间。专门用户资源下载的域是必要的他将直接减少等待时间。应避免单一的资源域否则你将为dns查询以及资源下载付出昂贵的代价。
⑶ 前端开发，页面优化，性能优化有哪些方面
常用的优化有两部分
第一：面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域
9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二：面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的
⑷ 你有用过哪些前端性能优化的方法
这个是面试常问的问题了。
我来简单说下几个方面：
1.减少http请求：在YUI35规则中也有提到，主要是优化js、css和图片资源三个方面，因为html是没有办法避免的。因此，我们可以做一下的几项操作：
合并js文件
合并css文件
雪碧图的使用(css sprite)
使用base64表示简单的图片
2.减少资源体积
压缩css
压缩js
压缩图片
3.图片加载处理：
图片预加载
图片懒加载
首屏加载时进度条的显示
就简单说这些，特别详细的可以网上看下。
⑸ 常见的前端性能优化手段都有哪些都有多大收益
规则01：尽量减少HTTP请求
前端优化的黄金准则指导着前端页面的优化策略：只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。当然很多人就会说，既然这样，那我们就减少页面组件的数量不就OK了吗？那你试试，你会掀起一场性能优化和产品设计之间的大PK。
所以，我们要减少HTTP请求是要平衡性能和设计的。如果找到这个平衡点呢？书中从以下几个方面做了介绍，我逐一说明：
① 图片地图
初看“图片地图”四个字，对非专业的前端人员来说一头雾水，我的第一印象就是这样的，咱们以京东的移动站点为例，右侧用户和购物车的图标，正常实现我会选择如下方式：
<a href=”用户跳转页面URL”>
<div class=”定义用户icon显示的样式表”></div>
</a>
<a href=”购物车跳转页面URL”>
<div class=” 定义用户icon显示的样式表”></div>
</a>
这种方式无可厚非的，但是两张图片就有两个HTTP请求，这明显是增加了页面中的HTTP请求。那么我们可以把这两个HTTP请求变成一个吗？
答案当然是可以的，这就是图片地图：允许在一张图片上关联多个URL，而目标URL的选择取决于用户单击了图片上的哪个位置。
这样上面京东两个图标合并成一张图片，这样图片的HTTP请求就减少了一个。
示例代码如下：
<img src=合并后的图片>
<map name=”map1”>
<areashape=”rect” coords=”0,0,40,40” href=”用户跳转页面URL”>
<areashape=”rect” coords=”50,0,90,40” href=”购物车跳转页面URL”>
</map>
不过图片地图只支持矩形形状，其他形状不支持。
② 请CSS喝“雪碧”（CSS Sprites）CSS Sprites一句话：将多个图片合并到一张单独的图片，这样就大大减少了页面中图片的HTTP请求。
③ 内联图片和脚本使用data:URL（Base64编码）模式直接将图片包含在Web页面中而无需进行HTTP请求。但是此种方法存在明显缺陷：- 不受IE的欢迎；- 图片太大不宜采用这种方式，因为Base64编码之后会增加图片大小，这样页面整体的下载量会变大；- 内联图片在页面跳转的时候不会被缓存。（大图片可以使用浏览器的本地缓存，在首次访问的时候保存到浏览器缓存中，典型的是HTML5的manifest缓存机制以及LocalStorage等）。
④ 样式表的合并将页面样式定义、脚本、页面本身代码严格区分开，但是样式表、脚本也不是分割越细越好，因为没多引用一个样式表就增加一次HTPP请求，能合并的样式表尽量合并。一个网站有一个公用样式表定义，每个页面只要有一个样式表就OK啦。
通过以上四个努力之后，你会发现你的网页响应时间最多能减少一半，这不是作者说大话，也不是我狂吹，我亲手用我的移动网站首页做了一个尝试，本地测试之后响应时间能减少40%左右。所以减少页面HTTP请求数量，是一个很重要的原则。遵循此原则可以同时改善首次访问和后续访问的响应时间，而每一个网站的首次响应时间会决定用户之后还来不来的重要原因。
规则02：使用内容发布网络（CDN的使用）
什么叫内容发布网络（CDN）？它是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。主要用于发布页面静态资源：图片、css文件、js文件等。如此，能轻易地提高响应速度。关于CDN的具体详细原理以及优缺点，各位可以自行询问度娘或者google。
规则03：添加Expires头
浏览器使用缓存来减少HTTP请求的数据，并减小HTTP响应的大小，使页面加载更快。Web服务器使用Expires头来告诉浏览器它可以使用一个组件的当前副本，直到指定的deadline为止。HTTP规范中称此头为：在这一时间之后响应被认为失效。个人对这块表示不想使用，其实就是一句话，把一些css、js、图片在首次访问的时候全部缓存到浏览器本地，从我做移动网站的过程中发现，其实没有这么复杂，完全可以使用HTML5提供的本地缓存机制就OK了。关于HTML5本地缓存机制，各位可以查阅相关资料。后续我也会对HTML5的缓存机制进行介绍的。
规则04：压缩组件（使用Gzip方式）
书中关于压缩从gzip压缩方式到如何压缩讲了很多，我想直接跳过，对于做PC网站或者移动网站来说，急需要压缩的是css文件和js文件，至于如何压缩，网上有很多在线工具，去挑选一个自己用的顺手看的顺眼的就好，当然也有人选择对HTML进行压缩，这样也可以。但是实际工作中我没有这么做。之所谓没有这么做，是因为我觉得很麻烦。不要鄙视我，毕竟我不是一个真正意义上的前端工程师，哈哈！
规则05：将CSS样式表放在顶部
如果将css样式定义放在页面中或者页面底部，会出现短暂白屏或者某一区域短暂白板的情况，这和浏览器的运营机制有关的，不管页面如何加载，页面都是逐步呈现的。所以在每做一个页面的时候，用Link标签把每一个样式表定义放在head中。
规则06：将javascript脚本放在底部
浏览器在加载css文件时，页面逐步呈现会被阻止，直到所有css文件加载完毕，所以要把css文件的引用放到head中去，这样在加载css文件时不会组织页面的呈现。但是对于js文件，在使用的时候，它下面所有也页面内容的呈现都会被阻塞，将脚本放在页面越靠下的地方，就意味着越多的内容能够逐步呈现。
规则07：避免使用CSS表达式
CSS表达式是动态玩CSS的一种很强大的方式，但是强大的同时也存在很高的危险性。因为css表达式的频繁求值会导致css表达式性能低下。如果真想玩css表达式，可以选用只求值一次的表达式或者使用事件处理来改变css的值。
规则08：使用外部javascript和CSS内联js和css其实比外部文件有更快的响应速度，那为什么还要用外部呢？因为使用外部的js和css可以让浏览器缓存他们，这样不仅HTML文档大小减少，而且不会增加HTTP请求数量。另外，使用外部js和css可以提高组件的可复用性。
规则09：减少DNS查询
DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。
规则10：精简javascript
如何精简？
其实W3Cfuns已经给大家准备好精简JS所需的所有工具“前端神器”，这点W3Cfuns为大家做的很不错，在这个规则里我们就用到“JS压缩/混淆/美化工具”
最初始的精简方式：就是移除不必要的字符减小js文件大小，改善加载时间。包括所有的注释、不必要的空白字符。
高级一点的精简方式就是：混淆。
它不但会移除不必要的字符，还会改写代码，比如函数和变量的名字会被改成很短的字符串，这样使js代码更简练更难阅读。
但是我一般很少使用混淆，一个现在互联网时代，代码没有必要整的那么神秘，大可以大家一起share，天下代码一起抄，只要抄出自己的特色就ok了。
而且一旦使用混淆，对于js代码的维护和调试都很复杂，因为有时候混淆之后的js代码完全看不懂。其实实际开发过程中，从文件大小和代码可复用性来说，不仅仅是js代码需要精简，css代码一样也很需要精简。
规则11：避免重定向
重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。
最常见的Redirect就是301和302两种。
关于重定向的性能影响这里就不说了，自行查阅相关资料吧。
在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。
规则12：删除重复脚本
重复的js代码除了有不必要的HTTP请求之外，还会浪费执行js的时间。
将你使用的js代码模块化，可以很好地避免这个问题，至于js模块化如何实现，现在有很多可以使用的开源框架，我用的比较多的是我们公司玉伯的Sea.js。
规则13：配置ETag
Etag（Entity Tag），实体标签，是Web服务器和浏览器用户确认缓存组件的有效性的一种机制。写的很复杂，对我这种非专业的前端开发人员来说，有点过了，关于这个原则有兴趣的自己看吧。
规则14：使Ajax可缓存
针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变。
⑹ 前端性能优化的具体方法有哪些
解决办法一：
减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
当需要设置的样式很多时设置className而不是直接操作style。
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
解决办法二：
减少HTTP请求次数
使用CDN：CDN在前端开发的作用
避免空的src和href
为文件头指定Expires
使用gzip压缩内容
把CSS放到顶部
把JS放到底部
避 免使用CSS表达式
将CSS和JS放到外部文件中
避免跳转
可缓存的AJAX
使用GET来完成AJAX请求
⑺ 常用的前端性能优化方法有哪些
1、减少http请求，合理设置HTTP缓存
2、使用浏览器缓存
3、启用压缩
4、CSS Sprites，合并 CSS图片，减少请求数
5、CSS放在页面最上部，javascript放在页面最下面
⑻ 简单谈谈前端性能优化
这个话题，贼大。
个人认为：核心在于，HTTP 请求的减少和请求包大小的减少再加上对代码的重构。
HTTP 请求的减少，瞧瞧现在的前端工程化，工程化的作用之一正是将那些散乱的 js 、css 库全部都集成起来，压缩成一个文件，这么多文件压缩成一个，这请求不就减少了么~还有一个就是”精灵图技术“也是优化的体现，就不展开了。
请求包大小的减少，这个简直是能减就减啊，比如以前的时候，我们需要将图片直接发送到浏览器上是吧，现在可以不用！如果只是发生一段代码到客户的浏览器上，然后客户用自己的机器生成图片，这得有多快啊，毕竟一段代码大还是一张图片大还是很容易分清的，特别的是 GIF 图！这时候用上 svg 或是 canvas 技术，就不需要发送巨大的 GIF 图片了，只需要调用浏览器的资源生成图像即可。
重构，反正不满意重构就是了，满意了加功能然后继续重构就是了。
但这都是还只是皮毛啊这是，如果用到框架，那还要讲到框架的优化，因为前端框架的优化同样是性能优化，那都能写几十页了都......
如果再深入讲到浏览器自身......啊，要死了死了，技术是无穷的，命是有限的！
⑼ web前端有哪些性能优
一，关键资源字节数
字节数也就是我通常说的减少资源文件（js,css,image,video...）的大小
1，压缩
前端使用uglify混淆压缩
后端开启gzip
对图片进行压缩，使用压缩比例更高的格式（webP）
强缓存（http状态码：200），不用请求服务器直接使用本地缓存
协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源
使用localstorage对数据进行存储
使用http2.0的多路复用合并请求
配置combo，在无法使用http2.0的情况下作为一种合并资源请求的手段
使用spite图
使用svg-symbol
2，缓存
3，针对首屏优化
对非关键资源延迟加载、异步加载，减少首屏资源大小
二，关键资源连接数
1，合并请求
2，减少图片请求数
3，针对一些场景采用css、js内联的方式
4，使用强缓存减少了一次服务器请求
5，非关键资源延迟、异步加载，减少了首屏资源连接数
三，关键渲染路径
网上有张关于页面渲染路径的图，这里我就不放了，大家有兴趣自己网络下
1，bigpipe分块输出
这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点。这种方式主要解决了直出页面阻塞的问题
2，bigrender分块渲染
常规的手段就是采用前端模板渲染页面，针对首屏时间主要减少了首次构建DOM树时的节点数
3，针对reflow，repaint，composit路径处理
4，涉及到动画时关于layer的概念render layer、graphics layer
5，css放在头部、js放底部避免阻塞DOM树的构建，
关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。
核心：css资源不会阻塞DOM树的构建但会阻塞DOM的渲染，JS会阻塞DOM树的构建，CSS会阻塞JS的执行
⑽ 前端开发 “性能”有多重要
关于页面相应时间，有一条着名的“2-5-8原则”。当用户访问一个页面：
在2秒内得到响应时，会感觉系统响应很快；
在2-5秒之间得到响应时，会感觉系统的响应速度还可以；
在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但可以接受；
而超过8秒后仍然无法得到响应时，用户会感觉系统糟透了，进而选择离开这个站点，或者发起第二次请求。
对于一个网站如果希望抓住用户，网站的速度以及稳定性是非常重要的。
从各式各样的前端监控平台中，你都可以获得页面很多的性能指标。本文将介绍几个几个比较关键的指标，并给出相应的优化思路。
开始渲染时间
该时间点表示浏览器开始绘制页面，在此之前页面都是白屏，所以也称为白屏时间。
该时间点可用公式Time To Start Render = TTFB（Time To First Byte） + TTDD（Time To Document Download） + TTHE（Time To Head End）表示。其中TTFB表示浏览器发起请求到服务器返回第一个字节的时间，TTDD表示从服务器加载HTML文档的时间，TTHE表示文档头部解析完成所需要的时间。在高级浏览器中有对应的属性可以获取该时间点。Chrome可通过chrome.loadTimes().firstPaintTime获取，IE9+可以通过performance.timing.msFirstPaint获取，在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值。开始渲染时间越快，用户就能更快的看见页面。
对于该时间点的优化有：
1)优化服务器响应时间，服务器端尽早输出
2)减少html文件大小
3)减少头部资源,脚本尽量放在body中
DOM Ready
该时间点表示dom解析已经完成，资源还没有加载完成, 这个时候用户与页面的交互已经可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以表示。TTSR上面已经介绍过了，TTDC表示DOM树创建所耗时间。TTST表示BODY中所有静态脚本加载和执行的时间。在高级浏览器中有DOMContentLoaded事件对应。
详细规范可以查看W3C的HTML5规范。从MDN文档上可以看出该事件主要是指dom文档加载解析完成，看上去很简单，但是DOMContentLoaded事件的触发与css,js息息相关，现在有专门的名词Critical Rendering Path(关键呈现路径)来描述。
在不支持DOMContentLoaded事件的浏览器中可以通过模拟获取近似值，主要的模拟方法有：
1）低版本webkit内核浏览器可以通过轮询document.readyState来实现
2）ie中可通过setTimeout不断调用documentElement的doScroll方法，直到其可用来实现
具体实现方法可以参考主流框架(jquery等)的实现。 DOM Ready时间点意味着用户与页面可以进行交互了，因此越早越好，对于该时间点的优化有：
1）减少dom结构的复杂度，节点尽可能少，嵌套不要太深
2）优化关键呈现路径
首屏时间
该时间点表示用户看到第一屏页面的时间，这个时间点很重要但是很难获取，一般都只能通过模拟获取一个近似时间。一般模拟方法有：
1）不断获取屏幕截图，当截图不再变化时，可以视为首屏时间。可参考webPagetest的Speed Index算法；
2）一般影响首屏的主要因素是图片的加载，通过页面加载完后判断图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。当然还需考虑其他细节，具体可参考【7天打造前端性能监控系统】
针对该时间点的优化有：
1）页面首屏的显示尽量不要依赖于js代码，js尽量放到domReady后执行或加载
2）首屏外的图片延迟加载
3）首屏结构尽量简单，首屏外的css可延迟加载
onload
该时间点是window.onload事件触发的时间，表示原始文档和所有引用的内容已经加载完成，用户最明显的感觉就是浏览器tab上loading状态结束。
该时间点的优化方式有：
1）减少资源的请求数和文件大小
2）将非初始化脚本放到onLoad之后执行
3）无需同步的脚本异步加载
为了优化整站性能，页面onload的时候可以考虑做一些预加载，把其它页面需要用到的资源预先加载进来。