前端的性能优化(针对内容方面)小白知识_优化使用教程

减少Http请求:1.尽量减少HTTP请求数,80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。2.减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法

前端的性能优化(针对内容方面)小白知识

减少Http请求:

1.尽量减少HTTP请求数,80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。

前端的性能优化(针对内容方面)小白知识_优化使用教程

2.减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法。

3.合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的,当然,也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话,合并文件就是一项比较麻烦的工作了,但把这个作为站点发布过程的一部分确实可以提高响应时间。

4.CSS Sprites是减少图片请求数量的首选方式。把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。

5.图像映射可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用,比如导航条。给image map设置坐标的过程既无聊又容易出错,用image map来做导航也不容易,所以不推荐用这种方式。

6.行内图片(Base64编码)用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小,把行内图片放在(缓存的)样式表中是个好办法,而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。

7.减少页面的HTTP请求数是个起点,这是提升站点首次访问速度的重要指导原则。

减少DNS查找:

1.域名系统建立了主机名和IP地址间的映射,就像电话簿上人名和号码的映射一样。当你在浏览器输入www.yahoo.com的时候,浏览器就会联系DNS解析器返回服务器的IP地址。DNS是有成本的,它需要20到120毫秒去查找给定主机名的IP地址。在DNS查找完成之前,浏览器无法从主机名下载任何东西。

2.DNS查找被缓存起来更高效,由用户的ISP(网络服务提供商)或者本地网络存在一个特殊的缓存服务器上,但还可以缓存在个人用户的计算机上。DNS信息被保存在操作系统的DNS cache(微软Windows上的”DNS客户端服务”)里。大多数浏览器有独立于操作系统的自己的cache。只要浏览器在自己的cache里还保留着这条记录,它就不会向操作系统查询DNS。

3.IE默认缓存DNS查找30分钟,写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟,可以用network.dnsCacheExpiration配置项设置。(Fasterfox把缓存时间改成了1小时 P.S. Fasterfox是FF的一个提速插件)

4.如果客户端的DNS cache是空的(包括浏览器的和操作系统的),DNS查找数等于页面上不同的主机名数,包括页面URL,图片,脚本文件,样式表,Flash对象等等组件中的主机名,减少不同的主机名就可以减少DNS查找。

5.减少不同主机名的数量同时也减少了页面能够并行下载的组件数量,避免DNS查找削减了响应时间,而减少并行下载数量却增加了响应时间。我的原则是把组件分散在2到4个主机名下,这是同时减少DNS查找和允许高并发下载的折中方案。

避免重定向 重定向用301和302状态码,下面是一个有301状态码的HTTP头:

1.HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html   浏览器会自动跳转到Location域指明的URL。重定向需要的所有信息都在HTTP头部,而响应体一般是空的。其实额外的HTTP头,比如Expires和Cache-Control也表示重定向。除此之外还有别的跳转方式:refresh元标签和JavaScript,但如果你必须得做重定向,最好用标准的3xxHTTP状态码,主要是为了让返回按钮能正常使用。

2.牢记重定向会拖慢用户体验,在用户和HTML文档之间插入重定向会延迟页面上的所有东西,页面无法渲染,组件也无法开始下载,直到HTML文档被送达浏览器。

3.有一种常见的极其浪费资源的重定向,而且web开发人员一般都意识不到这一点,就是URL尾部缺少一个斜线的时候。例如,跳转到http://astrology.yahoo.com/as…://astrology.yahoo.com/astrology/的301响应(注意添在尾部的斜线)。在Apache中可以用Alias,mod_rewrite或者DirectorySlash指令来取消不必要的重定向。

4.重定向最常见的用途是把旧站点连接到新的站点,还可以连接同一站点的不同部分,针对用户的不同情况(浏览器类型,用户帐号类型等等)做一些处理。用重定向来连接两个网站是最简单的,只需要少量的额外代码。虽然在这些时候使用重定向减少了开发人员的开发复杂度,但降低了用户体验。一种替代方案是用Alias和mod_rewrite,前提是两个代码路径都在相同的服务器上。如果是因为域名变化而使用了重定向,就可以创建一条CNAME(创建一个指向另一个域名的DNS记录作为别名)结合Alias或者mod_rewrite指令。

让Ajax可缓存:

1.Ajax的一个好处是可以给用户提供即时反馈,因为它能够从后台服务器异步请求信息。然而,用了Ajax就无法保证用户在等待异步JavaScript和XML响应返回期间不会非常无聊。在很多应用程序中,用户能够一直等待取决于如何使用Ajax。例如,在基于web的电子邮件客户端中,用户为了寻找符合他们搜索标准的邮件消息,将会保持对Ajax请求返回结果的关注。重要的是,要记得“异步”并不意味着“即时”。

2.要提高性能,优化这些Ajax响应至关重要。最重要的提高Ajax性能的方法就是让响应变得可缓存,就像在添上Expires或者Cache-Control HTTP头中讨论的一样。下面适用于Ajax的其它规则:

3.Gzip组件 减少DNS查找 压缩JavaScript 避免重定向 配置ETags   我们一起看看例子,一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通讯录,以便实现自动完成功能。如果用户从上一次使用之后再没有修改过她的通讯录,而且Ajax响应是可缓存的,有尚未过期的Expires或者Cache-Control HTTP头,那么之前的通讯录就可以从缓存中读出。必须通知浏览器,应该继续使用之前缓存的通讯录响应,还是去请求一个新的。可以通过给通讯录的Ajax URL里添加一个表明用户通讯录最后修改时间的时间戳来实现,例如&t=1190241612。如果通讯录从上一次下载之后再没有被修改过,时间戳不变,通讯录就将从浏览器缓存中直接读出,从而避免一次额外的HTTP往返消耗。如果用户已经修改了通讯录,时间戳也可以确保新的URL不会匹配缓存的响应,浏览器将请求新的通讯录条目。

4.即使Ajax响应是动态创建的,而且可能只适用于单用户,它们也可以被缓存,而这样会让你的Web 2.0应用更快。

延迟加载组件:

1.JavaScript是分隔onload事件之前和之后的一个理想选择。例如,如果有JavaScript代码和支持拖放以及动画的库,这些都可以先等会儿,因为拖放元素是在页面最初渲染之后的。其它可以延迟加载的部分包括隐藏内容(在某个交互动作之后才出现的内容)和折叠的图片。

2.工具可帮你减轻工作量:YUI Image Loader可以延迟加载折叠的图片,还有YUI Get utility是一种引入JS和CSS的简单方法。Yahoo!主页就是一个例子,可以打开Firebug的网络面板仔细看看。

3.最好让性能目标符合其它web开发最佳实践,比如“渐进增强”。如果客户端支持JavaScript,可以提高用户体验,但必须确保页面在不支持JavaScript时也能正常工作。所以,在确定页面运行正常之后,可以用一些延迟加载脚本增强它,以支持一些拖放和动画之类的华丽效果。

预加载组件:

实际应用中有以下几种预加载的类型:

1.无条件预加载——尽快开始加载,获取一些额外的组件。google.com就是一个sprite图片预加载的好例子,这个sprite图片并不是google.com主页需要的,而是搜索结果页面上的内容。 条件性预加载——根据用户操作猜测用户将要跳转到哪里并据此预加载。在search.yahoo.com的输入框里键入内容后,可以看到那些额外组件是怎样请求加载的。 提前预加载——在推出新设计之前预加载。经常在重新设计之后会听到:“这个新网站不错,但比以前更慢了”,一部分原因是用户访问先前的页面都是有旧缓存的,但新的却是一种空缓存状态下的体验。可以通过在将要推出新设计之前预加载一些组件来减轻这种负面影响,老站可以利用浏览器空闲的时间来请求那些新站需要的图片和脚本。

减少DOM元素的数量:

1.大量的DOM元素是一种征兆——页面上有些内容无关的标记需要清理。正在用嵌套表格来布局吗?还是为了修复布局问题而添了一堆的<div>s?或许应该用更好的语义化标记。

2.YUI CSS utilities对布局有很大帮助:grids.css针对整体布局,fonts.css和reset.css可以用来去除浏览器的默认格式。这是个开始清理和思考标记的好机会,例如只在语义上有意义的时候使用<div>,而不是因为它能够渲染一个新行。

3.DOM元素的数量很容易测试,只需要在Firebug的控制台里输入:

document.getElementsByTagName(‘*’).length

4.那么多少DOM元素才算是太多呢?可以参考其它类似的标记良好的页面,例如Yahoo!主页是一个相当繁忙的页面,但只有不到700个元素(HTML标签)。

跨域分离组件:

1.分离组件可以最大化并行下载,但要确保只用不超过2-4个域,因为存在DNS查找的代价。例如,可以把HTML和动态内容部署在www.example.org,而把静态组件分离到static1.example.org和static2.example.org。

海计划公众号
(0)
上一篇 2020/03/30 16:11
下一篇 2020/03/30 16:11

您可能感兴趣的内容

  • Js两个异步请求 同步合并数据使用教程_请求菜鸟知识

    业务代码经常会有 两个不一样的请求,拿到数据后合并成新数组的操作。
    但是在异步请求中我们不知道哪个请求的回调更快返回,从而使代码的合并时间无法确定。这就需要在两个异步请求都完成后再做数据处理。展示代码 //定义两个http请求方法
    const getList1 = ()=>{return new Promise((res,rej) =>{//省去get方法获

    2020/03/24
  • Nginx 转发 socket 端口配置使用教程_socket使用教程

    Nginx 转发 socket 端口常见场景:在线学习应用,在常规功能之外,增加一个聊天室功能,后端选择 swoole 提供服务提供者,同时不想前端直接 ip:port 方式链接到服务,需要使用 Nginx 进行转发。常规情况,我们可以在用户页面,直接建立 socket 链接,但这样的操作会暴露端口,带来一定的安全隐患,使用 Nginx 进行转发,可以隐藏端

    2020/03/30
  • js 多个异步的并发控制小白指南_异步基础入门

    请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。function sendRequest (urls: string[], max: number, callback: () => void) {}fetch

    2020/03/30
  • PotlabIcons使用教程_免费动画SVG图标集合

    PotlabIcons使用教程 官方网址:http://www.potlabicons.com/ 简介描述:免费动画SVG图标集合 PotlabIcons是一个提供免费SVG动画素…

    2020/03/06
  • flatiron.js菜鸟指南一款 Node.js 和浏览器的框架组件

    flatiron.js基础入门 官方网址:http://flatironjs.org GitHub:https://github.com/flatiron/flatiron 简介描…

    2020/03/05
  • unveil使用指南_非常轻量级的jQuery插件,用于延迟加载图像

    unveil使用指南 GitHub:https://github.com/luis-almeida/unveil 简介描述:非常轻量级的jQuery插件,用于延迟加载图像 unve…

    2020/03/06
  • js重写内置的call、apply、bind小白指南_apply指南攻略

    首先看call和apply,第一个参数就是改变的this指向,写谁就是谁,如果是非严格模式下,传递null或undefined指向的也是window,二者唯一的区别是执行函数时,传递的参数方式不同,call是一个个的传递,apply是把需要传递的参数放到数组中整体传递。·func.call([context], x, y)·func.apply([conte

    2020/03/20
  • Vue中的全部指令入门知识_指令入门百科

    动态参数可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: … 动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。动态参数表达式有一些语法约束,因为某些字符,例如空

    2020/03/29
  • html页面实现返回上一页浏览位置使用帮助_页面菜鸟教程网

    1.如果上一页是静态页面,可以用 history.go(-1)方法;go() 方法可加载历史列表中的某个具体的页面。该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。该方法返回上一页,不刷新页面,但

    2020/03/29
  • web开发-前后端分离原理入门百科_web菜鸟知识

    前言前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端HTML页面通过A

    2020/03/31
  • lovefield使用说明_一个用于Web应用程序的关系数据库

    lovefield使用说明 官方网址:https://google.github.io/lovefield/ GitHub:https://github.com/google/lo…

    2020/03/06
  • JavaScript深入之参数按值传递小白入门_参数菜鸟指南

    在《JavaScript高级程序设计》第三版 4.1.3,讲到传递参数:ECMAscript中所有函数的参数都是按值传递按值传递也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样var value = 1;
    function foo(v) {v = 2;console.log(v); //2
    }
    foo(value);
    con

    2020/04/05
  • Effeckt.css基础指南_一个高性能的过渡和动画库

    Effeckt.css基础指南 官方网址:https://h5bp.org/Effeckt.css/ GitHub:https://github.com/h5bp/Effeckt….

    2020/03/06
  • JS反调试技术小白常识_调试入门基础教程

    本文简单整理一下日常使用到的JS反调试技术,主要目的防止非法用户查看网页运行流程,分析代码。虽然不是绝对安全的,但也在一定程度上提高了调试破解的难度。 DevTools1.Debugger断点调试在Chrome浏览器中,最常用到的就是DevTools工具进行调试JS,分析代码。而在DevTools有一个debuger函数是断点函数,使用后会中断代码执行流程。

    2020/03/26
  • Js中变量声明效率问题使用攻略_变量入门教程

    var theString1 = “字符串1”;
    var theString2 = “字符串1”;
    var theString3 = “字符串1”;
    var theString = {theString1: “字符串1”,theString2: “字符串1”,theString3: “字符串1”,
    }var time1 = new Date();
    for(v

    2020/03/29
  • nginx获取客户端请求的真实IP指南教程_nginx使用指南

    nginx获取客户端请求的真实IP指南教程 客户端通过nginx代理访问后端tomcat服务器时,后端服务器收到的请求信息中只有nginx代理的IP信息,无法看到client的真实…

    2020/03/20