前端优化的目的是什么Web前端从哪方面来优化网站
您的当点位置:易名营销技术->网站排名->百度网站排名->浏览文章
百度网站排名

前端优化的目的是什么Web前端从哪方面来优化网站

来源:前端,优化,目的,的是,是什么,什么,哪方面,方面 发布:2020年04月04日 预览337

  前端优化的目的是什么?Web前端从哪方面来优化网站?

  前端是重大的,包括 HTML、 CSS、 javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的体例。那么,前端优化的目的是什么 ?

  1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作相应得更及时,能够给用户提供更为友爱的体验。

  2. 从服务商角度而言,优化能够削减页面请求数、或者减小请求所占带宽,能够节省可观的资源。

  总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相称的资源行使。

  前端优化的途径有许多,按粒度大致可以分为两类不锈钢闸阀,第一类是页面级别的优化,例如 HTTP请求数、脚本的无壅塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化,例如 javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外,本着进步投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

  一、页面级优化

  1. 削减 HTTP请求数

  这条策略基本上所有前端人都知道,而且也是最紧张最有用的。都说要削减 HTTP请求,那请求多了到底会怎么样呢 ?首先,每个请求都是有成本的,既包含时间成本也包含资源成本。一个完备的请求都必要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器相应、接收数据如许一个 “漫长” 而复杂的过程。时间成本就是用户必要看到或者 “感受” 到这个资源是必须要等待这个过程结束的,资源上因为每个请求都必要携带数据,因此每个请求都必要占用带宽。另外,因为欣赏器进行并发请求的请求数是有上限的 (详细参见此处 ),因此请求数多了以后,欣赏器必要分批进行请求,因此会增长用户的等待时间,会给用户造成站点速度慢如许一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是欣赏器的进度条会一向存在。

  削减 HTTP请求数的重要途径包括:

  (1). 从设计实现层面简化页面

  假如你的页面像百度首页一样简单,那么接下来的规则基本上都用不着了。保持页面简洁、削减资源的使用时最直接的。假如不是如许,你的页面必要华丽的皮肤,则继承阅读下面的内容。

  (2). 合理设置 HTTP缓存

  缓存的力量是壮大的,恰当的缓存设置可以大大的削减 HTTP请求。以有啊首页为例,当欣赏器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据 (如图 1.1),而当第二次访问即欣赏器已缓存之后访问则仅有 10个请求百度快照排名,共 20多 K数据 (如图 1.2)。 (这里必要说明的是,假如直接 F5刷新页面的话结果是不一样的,这种情况下请求数照旧一样,不过被缓存资源的请求服务器是 304相应,只有 Header没有Body ,可以节省带宽 )

  怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少转变的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;转变不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的详细设置和原理此处就不再胪陈了,有爱好的可以参考下列文章:

  (3). 资源合并与压缩

  假如可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。另外, CSS、 javascript、Image 都可以用响应的工具进行压缩,压缩后每每能省下不少空间。

  (4). CSS Sprites

  合并 CSS图片,削减请求数的又一个好办法。

  (5). Inline Images

  使用 data: URL scheme的体例将图片嵌入到页面或 CSS中,假如不考虑资源管理上的题目的话,不失为一个好办法。假如是嵌入页面的话换来的是增大了页面的体积,而且无法行使欣赏器缓存。使用在 CSS中的图片则更为理想一些。

  (6). Lazy Load Images(本身对这一块的内容照旧不了解)

  这条策略现实上并不肯定能削减 HTTP请求数辽宁人事考试网,但是却能在某些条件下或者页面刚加载时削减 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继承今后滚屏的时候才加载后续的图片。如许一来,如果用户只对第一屏的内容感爱好时,那剩余的图片请求就都节省了。 有啊首页 曾经的做法是在加载的时候把第一屏之后的图片地址缓存在 Textarea标签中,待用户往下滚屏的时候才 “惰性” 加载。

  2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)

  前文有谈到,欣赏器是可以并发请求的,这一特点使得其能够更快的加载资源,然而外链脚本在加载时却会壅塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于壅塞状况,直到脚本加载完成后才会开始加载。假如将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。解决这一题目的方法有许多,在 这里有比较细致的介绍 (这里是译文和 更细致的例子 ),而最简单可依靠的方法就是将脚本尽可能的今后挪,削减对并发下载的影响。

  3. 异步实行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)

  inline脚本对性能的影响与外部脚原形比,是有过之而无不及。首页,与外部脚本一样, inline脚本在实行的时候一样会壅塞并发请求,除此之外,因为欣赏器在页面处理方面是单线程的,当 inline脚本在页面渲染之前实行时,页面的渲染工作则会被推迟。简而言之, inline脚本在实行的时候,页面处于空白状况。鉴于以上两点缘故原由,建议将实行时间较长的 inline脚本异步实行,异步的体例有许多种,例如使用 script元素的defer 属性(存在兼容性题目和其他一些题目,例如不能使用 document.write)、使用setTimeout ,此外,在HTML5中引入了 Web Workers的机制,恰恰可以解决此类题目。

  4. Lazy Load javascript(只有在必要加载的时候加载,在一样平常情况下并不加载信息内容。)

  随着 javascript框架的流行,越来越多的站点也使用起了框架。不过,一个框架每每包括了许多的功能实现,这些功能并不是每一个页面都必要的,假如下载了不必要的脚本则算得上是一种资源虚耗 -既虚耗了带宽又虚耗了实行花费的时间。目前的做法也许有两种,一种是为那些流量分外大的页面专门定制一个专用的 mini版框架,另一种则是 Lazy Load。YUI 则使用了第二种体例,在 YUI的实现中,最初只加载核心模块湘商开户,其他模块可以等到必要使用的时候才加载。

  5. 将 CSS放在 HEAD中

  假如将 CSS放在其他地方比如 BODY中,则欣赏器有可能还未下载息争析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状况跳转到 CSS状况,用户体验比较糟糕。除此之外,有些欣赏器会在 CSS下载完成后才开始渲染页面,假如 CSS放在靠下的位置则会导致欣赏器将渲染时间推迟。

  6. 异步请求 Callback(就是将一些举动样式提掏出来,慢慢的加载信息的内容)

  在某些页面中可能存在如许一种需求,必要使用 script标签来异步的请求数据。类似:

  javascript:

  /*Callback 函数*/

  function myCallback(info){

  //do something here

  }

  HTML:

  cb返回的内容 :

  myCallback('Hello world!');

  像以上这种体例直接在页面上写