thinkphp做的商城网站分销平台,北京搜索引擎推广公司,西部数码网站管理助手2.0,建设小说网站首页一、背景 我们要监测网站的加载情况#xff0c;可以使用 window.performance 来简单的检测。 window.performance 是W3C性能小组引入的新的API#xff0c;目前IE9以上的浏览器都支持。一个performance对象的完整结构如下图所示#xff1a; memory字段代表JavaScript对内存的…一、背景 我们要监测网站的加载情况可以使用 window.performance 来简单的检测。 window.performance 是W3C性能小组引入的新的API目前IE9以上的浏览器都支持。一个performance对象的完整结构如下图所示 memory字段代表JavaScript对内存的占用。 navigation字段统计的是一些网页导航相关的数据 redirectCount:重定向的数量只读但是这个接口有同源策略限制即仅能检测同源的重定向type 返回值应该是0,1,2 中的一个。分别对应三个枚举值: 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面比如点一个链接或者一般的get方式)1 : TYPE_RELOAD (用户通过刷新包括JS调用刷新接口等方式访问页面)2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)最重要的是timing字段的统计数据它包含了网络、解析等一系列的时间数据。 timing的整体结构如下图所示 二、痛点 我们通过window.performance来检测加载情况并不能非常直观的分析出影响网站加载速度的具体因素因此我们需要专业的工具来辅助我们完成。 三、在线监测工具 1、GTmetrix https://gtmetrix.com/ 不需要FQ需要人工自己分析 2、PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/需要FQ无需人工分析会自动分析出优化相关内容 四、GTmetrix 使用简介 以淘宝网分析为例 得分情况 一般互联网的网站得分要达到C包含A和B以上最好能达到B。 切换到 PageSpeed 选项卡 1. 可用的用户名2. 避免使用着陆页面重定向3. 指定缓存验证4. 优化图片5. 利用浏览器Cache加过期时间6. 请求最小化7. 重定向最小化8. 指定图像尺寸9. 压缩js10. 延迟解析js11. 压缩html12. 启用GZIP压缩13. 尽早指定字符集14. 压缩css15. 从静态资源中删除查询字符串16. 如果压缩了指定Accept-Encoding的头17. 避免不良请求18. 使用Keep-Alive19. 使用网上css20. .... 切换到 YSlow 选项卡 1. 减少HTTP请求次数
合并图片、CSS、JS改进首次访问用户等待时间。
2. 使用CDN
就近缓存智能路由负载均衡WSA全站动态加速
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候浏览器渲染的时候会把当前页面的URL作为它们的属性值从而把页面的内容加载进来作为它们的值。
4. 为文件头指定Expires
使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
5. 使用gzip压缩内容
压缩任何一个文本类型的响应包括XML和JSON都是值得的。旧文章
6. 把CSS放到顶部
7. 把JS放到底部
防止js加载对之后资源造成阻塞。
8. 避免使用CSS表达式
9. 将CSS和JS放到外部文件中
目的是缓存但有时候为了减少请求也会直接写到页面里需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时需要注意减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
11. 精简CSS和JS
12. 避免跳转
同域注意避免反斜杠 “/” 的跳转
跨域使用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并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时浏览器中的POST方法是一个“两步走”的过程首先发送文件头然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
是否存在一个是更贴切的标签可以使用人生不仅仅是DIVCSS
18. 避免404
有些站点把404错误响应页面改为“你是不是要找***”这虽然改进了用户体验但是同样也会浪费服务器资源如数据库等。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先这种加载会破坏并行加载其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
19. 减少Cookie的大小
20. 使用无cookie的域
比如图片 CSS 等Yahoo! 的静态文件都在主域名以外客户端请求静态文件的时候减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
png24的在IE6半透明那种东西别乱使淡定的切成PNG8jpg
22. 不要在HTML中缩放图片
23. 缩小favicon.ico并缓存 切换到 Waterfall 选项卡 首先看下页面加载时间轴 1.URL重定向时间Redirect duration 包括
Redirect from a non-www to www (eg. example.com to www.example.com)
Redirect to a secure URL (eg. http:// to https://)
Redirect to set cookies
Redirect to a mobile version of the site
说明一个网站可能会执行多个重定向链这个时间为总时间如果没有重定向则为0。
优化即通过减少重定向 2.连接时间Connection duration 包括即阻塞时间DNS时间连接时间发送请求时间说明即第一个200OK的发送时间优化一般时间很短无优化 3.后端持续时间Backend duration 包括后端处理数据的时间说明后端响应时间优化后端代码优化重中之重 推荐Why is my page slow? 4.接收到第一个字节的时间Time to First Byte (TTFB) 包括顾名思义前三个时间的加和说明即从开始测试到页面接收到响应的时间优化优化应用程序代码实施缓存机制微调Web服务器配置或升级服务器硬件。 5.DOM交互时间点DOM interactive time不重要 说明与下面的DOM内容加载时间点非常接近没有标记 6.DOM内容加载时间点DOM content loaded time 说明如果没有阻止JS执行样式并且没有解析器阻止JS它将于上面的DOM interactive time 相同许多JavaScript框架使用这个时间点作为开始执行他们的代码的起点。优化由于这个时间经常被js用作起点并且这个时间的延迟代表着延迟渲染故确保样式、js的加载顺序和js延迟是非常重要的 推荐 style and script order is optimized and that parsing of JavaScript is deferred. 7.第一次渲染时间点First paint time 说明在这一时间点前浏览器将只显示一个空白页面 8.第一个内容被渲染完时间点First contentful paint time 说明当任何内容被渲染时可以是文本图像或画布渲染。目的是为了更好的体现用户的体验因为它会在实际的内容被加载到页面上时进行标记而不仅仅是任何改变 - 但是通常可能与First Paint相同。所以这个指标是让你了解你的用户什么时候收到消费信息文本视觉等对于性能评估来说比背景改变或者应用风格更有用。如果浏览器没有执行渲染即HTML结果为空白页则渲染时间可能会丢失。 9.加载完成时间点Onload time 说明当页面处理完成并且页面上的所有资源图像CSS等已经完成加载时。此时JavaScript window.onload事件触发括号中的时间是执行由Onload事件触发的JavaScript的时间 五、 PageSpeed Insights 使用简介 以淘宝网分析为例 给出的优化建议 转载于:https://www.cnblogs.com/chenyablog/p/9712583.html
