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

前端w88手机版的目的是什么Web前端从哪方面来w88手机版网站

来源:前端,w88手机版,目的,的是,是什么,什么,哪方面,方面 发布:2021年08月29日 预览576

  前端w88手机版的目的是什么?Web前端从哪方面来?

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

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

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

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

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

  一、页面级w88手机版

  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!');

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