【转】 普及下网站前端知识【局域网、公网、混合网络】站点监测（下篇）
（接上一篇文档）
6、预加载交互资源---实施条件oneapm bi指标--- 网页加载完成, 资源加载完成.
网页加载完成后,伴随这用户的操作,可能需要加载更多的样式,脚本,模板等,一般由这么几种策略各有利弊
1 在网页加载的过程中就加载这些资源,例如把css,js等文件写在一个文件里面,[优点:简单方便操作快,缺点:增加了文件大小,影响网页加载速度]
2 在BI指标网页加载完成后或者资源加载完成后加载[优点:不影响网页加载速度,初始化文件大小不边,缺点:开发人员技术要求较高]
js核心事件(domcontentloaded 事件)一般用户加载通过js渲染页面的脚本现在主流的js模块管理均从该事件开始加载资源 例如:RequireJS
js核心事件 (onload事件) 一般用于加载第三方资源
3 用户交互事件触发加载资源[优点:最小化加载资源,缺点:需要准确的判断那个事件在那个事件之前,在之前的事件加载资源,如果在当前事件加载资源会造成卡顿]
预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本,模板等）。
使用这种方法，当用户要通过交互引发的资源加载或者访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。
7、减少DOM元素数量
pc电脑: 就今天 网络和浏览器性能而言 这个已经可以忽略的,
手机平板 在移动端还是要注意下,dom不能太多,结构不能在复杂 
因为移动端 低版本手机的浏览器性能不行 2g 等网络下 网络也不行
如果用户场景是wifi 就不用考虑太多,
使用Browser Insight 可以活取用户的系统类型 浏览器类型 网络类型等指标 可以看用户使用场景
8、根据域名划分页面内容
把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如，你可以把用到的HTML内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上。
你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the Carpool Lane找到更多相关信息。
这个之前已经说过了，因为浏览器在单位时间内一个域名上下载资源是有限，而且所以一般用３个左右的域名来加速资源下载
所以说，运维先与研发做一些基础的 域名管理工作，就可以最大化加速站点性能，而且日后的ｃｄｎ工作也好开展
9、使iframe的数量最小
10、不要出现404错误
这两个是业务范畴的 基本回避不了 所以就不解释了
11、使用内容分发网络
用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
但是首先我们应该做些什么呢？
按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。根据应用的需求来改变网站结构，这可能会包括一些比较复杂的任务，如在服务器间同步Session状态和合并数据库更新等。要想缩短用户和内容服务器的距离，这些架构步骤可能是不可避免的。
要记住，在终端用户的响应时间中有80%到90%的响应时间用于下载图像、样式表、脚本、Flash等页面内容。这就是网站性能黄金守则。和重新设计你的应用程序架构这样比较困难的任务相比，首先来分布静态内容会更好一点。这不仅会缩短响应时间，而且对于内容分发网络来说它更容易实现。
内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
因为中国复杂无必的网络，使的ｃｄｎ 成为任何商业话运营网站的必选，更大规模的网站还要面临多个数据中心建设的难题
就ｃｄｎ 而言，做好资源的域名管理，动静态分离，图片资源多使用几个域名，就可以了，多数使用ｃｄｎ的难题都源于域名没管理好．．．．．．．．．．．．．．．
目前国内的ｃｄｎ 急速服务使用时候都是绑定域名的ｃｎａｍｅ 如果域名没管理好，那上ｃｄｎ也很困难
12、为文件头指定Expires或Cache-Control
这条守则包括两方面的内容：
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求
网页内容设计现在越来越丰富，这就意味着页面中要包含更多的脚本、样式表、图片和Flash。第一次访问你页面的用户就意味着进行多次的HTTP请求，但是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要的HTTP请求。Expires文件头经常用于图像文件，但是应该在所有的内容都使用他，包括脚本、样式表和Flash等。
浏览器（和代理）使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。下面这个例子是一个较长时间的Expires文件头，它告诉浏览器这个响应直到2010年4月15日才过期。
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你使用的是Apache服务器，可以使用ExpiresDefault来设定相对当前日期的过期时间。下面这个例子是使用ExpiresDefault来设定请求时间后10年过期的文件头：
ExpiresDefault "access plus 10 years"
要切记，如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。依Yahoo!来说我们经常使用这样的步骤：在内容的文件名中加上版本号，如yahoo_2.0.6.js。
使用Expires文件头只有会在用户已经访问过你的网站后才会起作用。当用户首次访问你的网站时这对减少HTTP请求次数来说是无效的，因为浏览器的缓存是空的。因此这种方法对于你网站性能的改进情况要依据他们“预缓存”存在时对你页面的点击频率（“预缓存”中已经包含了页面中的所有内容）。Yahoo!建立了一套测量方法，我们发现所有的页面浏览量中有75~85%都有“预缓存”。通过使用Expires文件头，增加了缓存在浏览器中内容的数量，并且可以在用户接下来的请求中再次使用这些内容，这甚至都不需要通过用户发送一个字节的请求。
-------------------------------------------------------------------------
这些配置都是配置浏览器缓存的,具体配置坛子里面有
这里要注意 静态内容和动态内容,以及静态内容的版本号管理
这里配置的缓存主要是客户端缓存,
加缓存的首要条件就是 静态文件要加版本号
静态文件添加版本号 可以说是一个技术公司基本技术分水岭,因为这设计基础的项目构建过程和发布过程
一般可以选择把版本号放在目录中,一个版本号一个目录 这样不高效,操作却简单
也可以给每个文件打版本号,这样最高效,更新了的文件就版本号升级,不更新就不升级,但是会存在版本号依赖,比较难搞
所以只有带有版本号的文件或者目录是 绝对静态的 其他的都是相对静态的
因为这里配置的是客户端缓存,缓存后不好更新,所以要慎重,看缓存了是否对业务由影响
所以一般建议按域名配置 这个域名下的资源全部缓存1天或者一小时,需要缓存的放在这里,开发子集可以衡量
