普及下网站前端知识【局域网、公网、混合网络】站点监测

互联网fans

针对web前端的性能，一时间不知道入手的同学，可以看看，。
前端性能测试对象：
HTML、CSS、JS、AJAX等前端技术开发的Web页面
影响用户浏览网页速度的因素：
服务端数据返回、网络传输、页面渲染，页面资源结构等
前端性能测试目的：
计算出包含页面资源结构、页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标，对该页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并在此结果的基础上，给出一定的优化建议和解决方案，从而提升用户体验
页面结构分析工具： YSlow/PageSpeed
通过网页JS/CSS/Image数及请求数量、请求类型、缓存等方面的静态分析
多用于本地开发或者本地测试
真实用户浏览页面分析：OneAPM Browser Insight/DynaTrace Ajax Edition
通过真实浏览器访问页面，收集页面的w3c 标准信息，ajax，网络等数据等终端分析
多用于内网多终端系统检测和web网站检测
YSlow 雅虎的浏览器插件用于页面结构分析
PageSpeed  谷歌的阿帕奇和nginx 插件用于页面结构分析
OneAPM Browser Insight/DynaTrace Ajax Edition   js采集w3c 数据 用于分析终端用户网络和页面加载相关指标
区别：YSlow安装在客户端 ，  PageSpeed 安装在服务器端 ， OneAPM Browser Insight 等 通过各种语言探针脚本注入到页面上

明天继续 详解YSlow 指标 和指标背后的问题

Rockyw

感谢楼主分享！

互联网fans

我个人的习惯是 YSlow+OneAPM Browser Insight
先用YSlow 看3~5页面的评级，网站部署Browser Insight ，然后对这几个页面进行持续性压测（用真实浏览器压测，简单的就是安装浏览器插件自动刷新30s一次或一分钟一次，专业点的，测试有压测工具可以控制浏览器访问页面），看这几个指标的趋势，再到正式生产环境部署Browser Insight  一段时间吧 用户访问情况下 几个指标的值和趋势
然后对比
1  本地浏览器  yslow 指标
2  简单压测      Browser Insight 指标
3  用户终端      Browser Insight 指标
为什么要这么做呢？闲得慌吗？非也
首页 用yslow 对几个页面进行评级，看看评级最高页面和评级最低页面，这是研发团队技术实力的体验，以后从开发优化页面也就优化到这次评级最高的页面，道理很简单，你们这个页面都可以做成评级为假设为e ，那个评级为f的也改成e把，这是可以实现的，因为已经有了案例的，你让研发优化到a 这是不现实的，因为做不到。不然就是so you can you up no can no bi bi
然后在看看简单压测，因为在相同的网段，所以网络很稳定，先通过Browser Insight 看看在网络稳定情况下 的各种指标和趋势，上生产环境后主要就是网络和用户的网络和用户浏览器的造成的影响了，竟然遇到那种脑残用户，用着ie6海天天喊慢，没事还喜欢投诉。。。。。。
到了正式生产环境 看网络 看用户浏览器 和用户网络等指标
扯远了 先看看yslow第一项的含义与评分低背后的原因

互联网fans

1、尽量减少HTTP请求次数
     终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
     减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；

图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；

内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

    减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！
---------------------------------------------------------------------------------------------------------------------------------------------------------
为什么会产生这个问题呢？每个问题背后都有原因，虽然不能完全解决，我们也只能尽力了，
研发团队是瞎子！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
这是最重要的原因，也可能是外包公司，因为开发看本地打开本地服务器 好好的啊，他们怎么之道运维之后在正式生产环境下是什么样子，在用户哪里是什么样子，
研发的头 如果有点网站运维经验 可能海之道 ylsow 这种工具可以简单测试下，但是页面多了，以前也没有RUM 这种工具，看不见用户哪里速度
所以 看见才会重视，看不见那就只能靠 职业道德了，用YSlow 跑一下核心页面，看看得分，不求上升，但求不降
还有一个原因大家往往忽视了，研发时没有运维的人，没人告诉他们上线之后是怎么部署的。。。。。。。

从开发角度解决这个问题----前后端分离，前端项目构建过程优化
1 js文件合并压缩
2 css文件合并压缩
3 图片生成雪碧图
如果找不到开发的人，或者开发团队实力太弱，那就只能上硬的
1 先分析下 图片、样式、等静态文件是不是从一个固定的目录来的，如果是，给这个目录的url 加反向代理，跳转到另外一台服务器，
然后在这太服务器上 加缓存头啊，压缩头啊，调宽带，调并发 ，硬盘和宽带也要给力不然文件大了就惨了等什么，因为是静态文件所以加缓存的效果可能比较好，但也要看是否有人在不断更新站点，如果由更新的话，就要谨慎了，以免影响正常业务，

互联网fans

2、减少DNS查找次数
       域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入http://bbs.linuxtone.org/时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

      缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。

     Internet Explorer默认情况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改为了1小时）。

     当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量可以减少DNS查找次数。

     减少主机名的数量还可以减少页面中并行下载的数量。减少DNS查找次数可以节省响应时间，但是减少并行下载却会增加响应时间。我的指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。
---------------------------------------------------------------
为什么回村在这个问题呢？因为本地调试是永远不会出现因为dns 查找慢到底网页加载慢的，看不见因为dns引起的缓慢，所以就疏忽了，在加上国内务必复杂的网络环境，会放大dns解析时间 ，例如山东电信网段某公司开通域名和端口号，给西安处于网通某公司的提供门店类软件服务，以前是cs 架构，现在换成bs 架构，现场给客户演示，页面虽然看见了，但是却一直loading，导致按钮无法点击，这真是坑啊。
这就是页面 要加载各种资源的域名管理，运维如果滞后与开发或者系统集成，往往会出现各个厂商只顾自己的子集的页面组件，最后出来的页面会请求一堆域名，第一次打开页面和翻山一样。
讲了这么多，该上硬的了

由于DNS查找是需要时间的，而且它们通常都是只缓存一定的时间，所以应该尽可能地减少DNS查找的次数。
减少DNS查找次数，最理想的方法就是将所有的内容资源都放在同一个域(Domain)下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能。
但理想总归是理想，上面的理想做法会带来另外一个问题，就是由于这些资源都在同一个域，而HTTP /1.1 中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），高版本的浏览器例如火狐或者谷歌是4~8 现在，那么就会出现下载资源时的排队现象，这样就会降低性能。
所以，折衷的做法是：建议在一个网站里面使用至少2个域，但不多于4个域来提供资源。我认为这条建议是很合理的，也值得我们在项目实践中去应用
如果是sns 类或者 电商类 一个页面会加载100张左右类似的图片例如 用户图像，商品图像，建议采用js延迟加载，并且讲这些图片分布在不同的域名上 例如 js和css 公用图片公用一个   人头像用2个 商品用2个
具体分配需要进行测试 1  看ysolw的评分 2看 Browser Insight  资源加载时间和首屏时间选取最佳分配方案

互联网fans

3、避免跳转
跳转是使用301和302代码实现的。下面是一个响应代码为301的HTTP头：
     HTTP/1.1 301 Moved Permanently
     Location: http://http://bbs.linuxtone.org/
     Content-Type: text/html
这个正常情况下很少出现少数情况下会有
1 登录或者统一登录

呢么什么是特殊情况呢，每年都有那么几天大姨妈，那就是seo，搜索引擎优化和网站改版，这个页面不要了跳转到新的页面
还有一种 就是给访问地址统一加/作为结尾，也是seo
不过内网系统少，现在移动互联网这种情况也少了

补充内容 (2015-10-31 20:50):
据说还有一种 跳转 是cdn加速 通过http重定向来实线的，多用于资源文件加速，现在多数喜欢dns解析的cdn加速

互联网fans

4、可缓存的AJAX
     Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不异味着“即时”，这很重要。

     为了提高性能，优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax：
   Gizp压缩文件
   减少DNS查找次数
   精简JavaScript
   避免跳转
   配置ETags
这些都要慎重


    让我们来看一个例子：一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。如果地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。
       即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。
-----------------------
这是错误的指南，
其实我们很难分清那些是需要被缓存ajax，而且ajax 都是业务api接口 轻易不要动，动也是也得和开发确认是否可以动，js解析ajax返回的结果是 很容易出错的，所以返回内容也不要动
so 一般不要打ajax的注意

需要注意的是ajax 请求的耗时是个很重要的指标，不能因为是ajax就不在乎他的速度，现在越来越多的业务都靠ajax吃饭，监控ajax 相应时间，发送数据量，接受数据量，服务器返回状态，都是很关键指标  Browser Insight 对这些指标都做了监控有事是 服务器返回状态一定程度上网络是否异常的表现

互联网fans

说了半天 没截图 看看 Browser Insight 的一个解图 ，主要用于 公网和全国vpn 等 连锁系统的网络问题和server问题定位与分析

互联网fans

5、推迟加载内容
       你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？
       把整个过程按照onload事件分隔成两部分，JavaScript是一个理想的选择。例如，如果你有用于实现拖放和动画的JavaScript，那么它就以等待稍后加载，因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以推迟加载
       当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下，通过程序提高网站性能的方法告诉我们，在支持JavaScript的情况下，可以先去除用户体验，不过这要保证你的网站在没有JavaScript也可以正常运行。在确定页面运行正常后，再加载脚本来实现如拖放和动画等更加花哨的效果。
-----------------------------------------------------------------------------
这个描述其实并不准确
因为网页加载的时候，一次一个域名下，只能同时下载1~4个文件，所以假设这个页面一共向3个域名发起请求，那么会有一个最大文件数限制
网页显示的时候，是按照样式 层叠显示的，js执行，也是和很多关键事件有关的，所以
总的说来，1 控制head内的文件数量 例如head内文件一页面呈现的css文件为主，必要的js文件为辅-----------------------oneapm bi 首屏时间
                 2 js文件是何时引入根据js的功能来定，因为js下载会阻塞页面渲染，所以一般建议少在渲染前加载js
                    js 第一个关键事件是 domcontentloaded ，表示网页文档加载完成，可以交互了---------------------------------oneapm bi网页加载完成
                         一般在这个事件之前加载的为核心js，在这个事件之后加载的为业务js和图片等资源
                    js 第二个关键的事件是 onload，表示网页加载阶段的资源加载完成，网页加载即将借宿了------------------oneapm bi资源加载完成
                        一般在onload 之后加载广告 特效等组件
通过 分级加载 提升降低网页内同时下载的资源的数量，减小文件在浏览器端的等待时间，从而加速网页正体加载，还节省cpu ，显得网页快

还记得打开一个网页时候cpu 就呼呼的吗？
对于用那些工具来实线网页内的内容 分级加载，以后再说

对于开发的同学来讲要用好开发相关的库和工具
对运维的同学来讲 要提前配置域名，不然所有资源在一个域名下，怎么扯都是扯淡

                  

互联网fans

6、预加载交互资源---实施条件oneapm bi指标--- 网页加载完成, 资源加载完成.
      网页加载完成后,伴随这用户的操作,可能需要加载更多的样式,脚本,模板等,一般由这么几种策略各有利弊
      1 在网页加载的过程中就加载这些资源,例如把css,js等文件写在一个文件里面,[优点:简单方便操作快,缺点:增加了文件大小,影响网页加载速度]
      2 在BI指标网页加载完成后或者资源加载完成后加载[优点:不影响网页加载速度,初始化文件大小不边,缺点:开发人员技术要求较高]
         js核心事件(domcontentloaded 事件)一般用户加载通过js渲染页面的脚本现在主流的js模块管理均从该事件开始加载资源 例如:RequireJS
         js核心事件 (onload事件) 一般用于加载第三方资源  
      3 用户交互事件触发加载资源[优点:最小化加载资源,缺点:需要准确的判断那个事件在那个事件之前,在之前的事件加载资源,如果在当前事件加载资源会造成卡顿]


      预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本,模板等）。
      使用这种方法，当用户要通过交互引发的资源加载或者访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

互联网fans

7、减少DOM元素数量
pc电脑: 就今天 网络和浏览器性能而言 这个已经可以忽略的,
手机平板 在移动端还是要注意下,dom不能太多,结构不能在复杂
因为移动端 低版本手机的浏览器性能不行 2g 等网络下 网络也不行
如果用户场景是wifi 就不用考虑太多,
使用Browser Insight 可以活取用户的系统类型 浏览器类型 网络类型等指标 可以看用户使用场景

互联网fans

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找到更多相关信息。
   这个之前已经说过了，因为浏览器在单位时间内一个域名上下载资源是有限，而且所以一般用３个左右的域名来加速资源下载
所以说，运维先与研发做一些基础的　域名管理工作，就可以最大化加速站点性能，而且日后的ｃｄｎ工作也好开展

互联网fans

9、使iframe的数量最小
10、不要出现404错误
　　这两个是业务范畴的　基本回避不了　所以就不解释了

互联网fans

11、使用内容分发网络
     用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。但是首先我们应该做些什么呢？
     按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。根据应用的需求来改变网站结构，这可能会包括一些比较复杂的任务，如在服务器间同步Session状态和合并数据库更新等。要想缩短用户和内容服务器的距离，这些架构步骤可能是不可避免的。
     要记住，在终端用户的响应时间中有80%到90%的响应时间用于下载图像、样式表、脚本、Flash等页面内容。这就是网站性能黄金守则。和重新设计你的应用程序架构这样比较困难的任务相比，首先来分布静态内容会更好一点。这不仅会缩短响应时间，而且对于内容分发网络来说它更容易实现。
     内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
因为中国复杂无必的网络，使的ｃｄｎ　成为任何商业话运营网站的必选，更大规模的网站还要面临多个数据中心建设的难题
就ｃｄｎ　而言，做好资源的域名管理，动静态分离，图片资源多使用几个域名，就可以了，多数使用ｃｄｎ的难题都源于域名没管理好．．．．．．．．．．．．．．．
目前国内的ｃｄｎ　急速服务使用时候都是绑定域名的ｃｎａｍｅ　　如果域名没管理好，那上ｃｄｎ也很困难，

互联网fans

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天或者一小时,需要缓存的放在这里,开发子集可以衡量