Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

35条优化网站的建议 #8

Open
plh97 opened this issue Mar 17, 2018 · 0 comments
Open

35条优化网站的建议 #8

plh97 opened this issue Mar 17, 2018 · 0 comments
Assignees
@plh97
Labels
博客 写一些前端技术记录 学习 如果不学习，那今天和昨天又有什么区别 翻译 翻译一些经典文章 项目架构 前端工程化

Comments

@plh97
Copy link
Owner

plh97 commented Mar 17, 2018 •
edited
Loading

1.减少http请求

80%的页面初始化响应时间花费在前端，而大部分时间都是在下载所有的页面组件，例如图片，css，js等。所以减少请求数量是让网页变快的关键。
其中一种方法是将页面设计的更简单，但是有没有方法是能既将页面设计得丰富多彩，同时又拥有高性能呢？线面提供一些建议：

  • 合并文件 是一种方法来减少http请求，我们可以将多个js文件合并成一个js文件，css合并，但是合并通常会带来一些不可预知的后果，因此，对于css：less + css-module 是一种不错的组合。js =>模块化开发。rollup.js => 浏览器环境打包成iife格式，nodejs环境打包成cjs格式，通用node+浏览器 打包成umd格式。至于commonjs不了解。
  • css 雪碧图是一种不错的方法来减少图片请求。将多个小图标他们合并成单个背景图片是一种不错的方法，但是现在推荐svg。
  • 在线图片将图片转换成data64格式直接写入页面。会增加页面体积，一般情况不推荐使用，仅仅当你想做一次性的图片展示的时候推荐使用，例如input上传图片展示，这个时候推荐使用。自定义鼠标图标，直接将它写入css文件，推荐使用data64直接写入css文件。
    减少http请求次数仅仅只是开始。同时他也是提高用户初次访问时候页面性能的重要知道方针。

2.使用内容交付网络。(参照七牛cdn静态资源加速)

用户与web服务器的物理距离对响应时间有影响。因此同时布置多个web服务器分布在华南，华北，华中，深圳，上海，等集中地区，可以加速，但是你又应该从哪开始呢？

  • 第一步。作为实施物理距离分散的第一步，劝你不要试图重新设计你的web应用来使得它以分布式来架构，根据应用程序的不同，更改结构体系可能包括艰巨的任务。例如 sync session state，又或者是复制数据库等。。。尝试缩短用户和内容之间的距离，可能会造成结构体系等的延迟，或者根本通不过。（个人经验-七牛cdn静态资源，加速后，原本页面未经过压缩有1M+,首次加载需要7s+，使用七牛cdn加速后，1.5s即加载成功，但同时，每次更新页面，都必须要去七牛后台个人中心页面手动更新缓存我的七牛空间页面文件缓存，或许可以通过代码来更新资源，但我又不懂。这仅仅只是使用静态页面就变得这么麻烦，如果有数据库等，又要怎么做？）
  • 80%-90%的用户响应加载页面的时间都消耗在加载js,css,image,flash等资源文件。分解你的静态资源内容相对于重构页面架构更容易实现。这个不仅仅是实现了响应时间缩短，而且由于CDN(content delivery networks)的存在，这更加容易实现。
    image
  • CDN(content delivery networks)是一个分布在不同位置的网络服务器集合，用来更高效的向用户提供内容。有限选择ping值最低的来提供服务。
    image
  • 有些大公司有自己的cdn，但更高效的方式是用CDN服务供应商提供的服务(七牛cdn)。例如Yahoo.

3.添加Expires或者Cache-Control

image

2个规则

  • 对于静态组件，设置超长过期时间。
  • 对于动态组件，使用适当的Cache-Control来帮助浏览器提供有条件的请求。
    我们的网站设计得日益复杂，这意味着更多的静态资源，但是通过Expires的设置，可以避免多余的请求，通常公司图标需要这样设置，但是其实我们对于每一个资源都需要设置过期时间。
    浏览器和代理商使用缓存来减少http请求，使得页面加载更快，
      Expires: Thu, 15 Apr 2018 20:00:00 GMT                  // 在2018年4月15日8点过期
如果你的服务器是Apache，
      ExpiresDefault "access plus 10 years"                       // 10年后过期

如果设置了超长过期时间，那么更新文件只能通过 更改文件后缀的hash值来更新。

4.Gzip Components 组件压缩（服务器端）

尤其对于单页面应用（SPA），这种将所有页面打包在一起，通常可以压缩至1/3.
image
image
从HTTP/1.1开始，web客户端通过请求的头部添加Accept-Encoding来告诉浏览器要压缩。

      Accept-Encoding: gzip, deflate

如果浏览器又看到这个的话，会做出如下响应

      Content-Encoding: gzip

image
Gzip是现在用的最多的高效小压缩的方法。它可以压缩70%，90%的浏览都经过Gzip压缩。如果你是Apache服务器，1.3版本是mod_gizp, 2.x版本用mod)deflate.,,
但是值得注意的是，压缩要基于文件类型，像html，js，css，json文件都需要压缩，但是图片和pdf是不需要压缩的，因为他们本身就经过压缩了，再去压缩他们只会浪费CPU，而且压缩后文件体积反而会增大，

5.将css样式文件放在顶部

Yahoo!性能研究，我们发现将css文档放在<head></head>种，页面会更快加载,具体请参照bootstrapt Starter template，

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

前端工程师在意页面性能，所以想要页面逐步加载，这也是Yahoo!工程师想要的，这就是，我们想要浏览器更快显示他的内容，这对于网速慢的用户尤其重要，当浏览器逐步加载页面的时候，标题导航栏顶部徽标最为等待页面的用户的视觉返回，这大大改善用户整体体验。而如果你将css文件放在文档底部的话，无法做到内容渐进式呈现，例如IE，这样子的话，页面会停留在空白页。
嗯~ o(￣▽￣)o，HTML规范文档也是这么要求的。

6.将js放在文档底部

js文件如果异常报错，会阻止同步的下载内容，一般建议延迟加载，给<script>标签添加defer属性，不过firfox又不支持，如果将脚本放在底部，并添加defer属性延迟加载，页面加载速度更快。

7.避免css 表达式

css表达式是一种强大(危险)的方式动态设置css属性，适用ie5-ie8，他可能会在极短的时间内执行1w次，

      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

8.是否要将js，css 和html文件分离

通常html文档都会下载，而css和js则会从缓存中加载。如果分离开，则html依然要下载，但是体积会减小。这个关键在于，用户从缓存中拿文件和重新加载新文件哪种情况更多。一种可以减少请求次数，另一种可以html文件体积。但是也有例外情况，比如Yahoo!和百度的首页的css和js就是内嵌的，因为大多数这种首页需要极速访问，也经过实际调研，也确实如此。这种会话只有很少的页面视图的主页，内嵌可以缩短最终用户的响应时间。
image
通常对于许多网站他们的第一个首页，有一些技术可以减少内联提供的http请求，以及通过外部文件实现缓存优势，其中一种方法，就是在首页内嵌js和css，但是在页面加载完成后，动态下载外部文件，后续页面将引用应该以及存在浏览器缓存中的外部文件。

9.减少DNS(Domain Name System)查找。

DNS将主机名映射到IP地址，就像查询人的手机号码一样，但是DNS映射是需要20-120ms才能找到的，所以DNS会缓存他之前的查找，例如chrome浏览器就有自己的DNS缓存，IE默认存储30分钟DNS缓存，减少唯一主机名数量，可以减少页面中查找DNS的并行下载时间。

10.压缩js和css

通常删除注释，以及空白字符，换行符，制表符(\n\t\s)，这个webpack，grunt，gulp，parcel等打包工具都可以做到，同样的，html标签之间的空白，幽灵节点，同样可以通过压缩消除。

11.避免重定向(Redirects)

例如nginx通常就将http => https,重定向是使用301和302状态码完成的，

      HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html

浏览器会自动将用户带到位置字段中指定的URL。重定向所需的所有信息都在标题中。响应的主体通常是空的。尽管名称不同，301和302响应在实践中都不会被缓存，除非额外的头文件（例如Expires或Cache-Control）指示它应该是。元刷新标记和JavaScript是将用户引导到不同URL的其他方式，但是如果您必须执行重定向，首选方法是使用标准的3xx HTTP状态代码，主要是为了确保后退按钮正常工作。
重定向会减慢用户体验，并且在HTML页面到来之前不会下载任何内容。
最浪费的重定向经常发生，web开发人员通常不知道例如当你访问https://www.baidu.com会发生重定向https://www.baidu.com/，然后默认加载https://www.baidu.com/目录下的index.html文件。
将就网址链接到新网站，是重定向最常见的用途，创建一个CNAME文件在被定向的url目录下。

12.删除重复的js文件，

13.设置 ETags

实体标签ETags唯一标识符

      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

14.将ajax数据实现可缓存

Ajax引用的好处之一，他想用户提供返回，因为它从后台请求数据。为了提高性能，优化Ajax响应非常重要，提高Ajax性能的最重要的方法就是将响应缓存，如添加过期或缓存控制头中所属，其他规则同样适用，

15.尽早清洗缓存

当用户请求页面时，后端服务器可能需要200到500毫秒才能将HTML页面拼接在一起。在此期间，浏览器在等待数据到达时处于空闲状态。在PHP中，你有函数flush()。它允许您将部分就绪的HTML响应发送到浏览器，以便浏览器可以在您的后端忙于HTML页面的其余部分时开始获取组件。好处主要出现在繁忙的后端或前端。
考虑刷新的好地方就在HEAD之后，因为头部的HTML通常更容易生成，并且允许您在浏览器中包含任何CSS和JavaScript文件，以便在后端仍在处理时开始并行读取。

例子

      ... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content -->

16.尽量使用Get请求

Yahoo! 团队发现，当使用ajax XMLHttpRequest,的时候，
POST实现浏览器，分为2个步骤，

  • 1.发送headers,
  • 2.再发送data
    POST相对GET的不同，
  • 1.POST比GET更安全;
  • 2.发送的数据量更大(因为url长度有限制);
  • 3.发送的数据类型更多，例如图片转化为二进制Blob格式，
  • 4.get会将数据缓存，post不会（在chrome里面，get会将静态资源缓存，而json数据不会缓存，ie则将全部缓存）

但是post更慢，
post请求过程

  • 1.浏览器请求tcp链接(第一次握手)
  • 2.浏览器答应tcp连接(第二次握手)
  • 3.浏览器得到确认，就将header头部发送给后台，(第三次握手，这个请求较小)
  • 4.浏览器返回100 continue响应
  • 5.浏览器开始发送数据
  • 6.服务器返回200 🆗响应
    get请求过程
  • 1.浏览器请求tcp链接(第一次握手)
  • 2.浏览器答应tcp连接(第二次握手)
  • 3.浏览器确认，并发送get的header头部，以及data数据(第三次握手，这个报文比较小)
  • 4.服务器返回200 🆗响应
    所以，最优使用get请求，当然如果你的cookie比较多又另算，如果仅仅只是想要得到数据，用get。

17.后加载组件

你可以看一下你的页面，哪些是为了呈现最初页面，必须要呈现的组件，而其余的组件可以稍后加载。

js在onload事件之后比较适合初始化某些库，原生js的onload事件和jQuery的$( document ).ready()有区别，jquery会在js文件加载完就执行，而原生onload事件，则要等到dom里面的图片全部加载好才能触发事件。

18.预加载组件

他是后加载组件的对立面，它可以节省时间

    1. 无条件预加载
  • 2.有条件预加载

19.减少DOM元素数量

复杂dom结构，js访问速度更慢，要遍历更多元素。

20.拆分组件跨域

比如说你的图片网站html存在https://www.example.com/,而你的静态资源，储存在http://static.example.com/，这样可以让你最大限度的平行下载，由于DNS查找惩罚，请确保域不超过2-4个。

21.减少ifrane'数量

iframes允许一个HTML文档插入父文档，了解iframe如何工作以便可以有效使用，这很重要。

<iframe>优点：

  • 像徽章和广告等第三方内容，例如github的徽章
  • 秘密沙盒
  • 并行脚本下载

<iframe>缺点：

  • 即使是空白页面也很昂贵
  • 阻止页面载入
  • 非语义化

22.不要404s

HTTP请求比较昂贵，因此提出http请求获得无用的响应完全没有必要。而有些网站提供了404前台页面，用户体验不错，但也浪费了服务器资源，特别糟糕当外部错误并是404时候，首先此下载会阻止并行下载，浏览器会尝试解析她，就好像他是js代码。

23.减少cookie体积

http cookie被用来做用户验证，以及其他个性化东西，信息关于cookie可以在服务器和浏览器之间交换，降低cookies大小可以减少用户响应时间，这很重要。
请注意以下四点

  • 消除不必要的cookie
  • 尽量减少cookie大小
  • 设置cookies域名，保证其他子域名不受营销
  • 设置过期时间

24.为组件使用无cookie域名

当浏览器制作一个请求，比如请求一个图片，这种完全没有cookies的必要。所以你要专门设置一个托管静态资源的子域名。

25.最小化dom访问

js遍历dom很慢，请注意以下三点：

  • 缓存对访问元素的引用
  • 更新节点 ’offline‘,并将他们加入到树中。
  • 避免使用js修复布局坍塌

26.发展智能事件处理

事件总代理，比如你有10个按钮的导航栏，不要分别给他们设置事件触发。请给他们的父容器设置总代理，对e.path做路径判断，ie没有path，请自行合成path，这个就是事件冒泡。
你不需要等到onload事件触发在添加事件代理，应为只有图片成功加载后才出发onload事件，你可以用jq的ready，或者原生的DOMContentLoaded，

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
</script>

27.选择<link>而不要@import

css放在最顶端，

28.避免filters这个css属性

29.优化图片

当设计师完成图纸，将图片传到web服务器之前，仍可以进行一些操作

  • 您可以检查GIF并查看它们是否使用与图像中颜色数相对应的调色板大小。使用imagemagick很容易检查使用 标识-verbose image.gif 当您在调色板中使用4色和256色“插槽”看到图像时，还有改进的空间。
  • 尝试将GIF转换为PNG并查看是否有保存。往往不是，有。由于浏览器支持有限，开发人员经常不愿意使用PNG，但这已成为过去。唯一真正的问题是真彩色PNG中的alpha透明度，但再次，GIF不是真正的颜色，也不支持可变透明度。因此GIF可以做的任何事情，调色板PNG（PNG8）也可以做到（动画除外）。这个简单的imagemagick命令会生成完全安全的PNG：
  • 在所有PNG上运行pngcrush（或任何其他PNG优化器工具）。
  • 在所有JPEG上运行jpegtran。该工具可以执行无损JPEG操作，例如旋转，也可用于优化和删除图像中的注释和其他无用信息（如EXIF信息）。

30.优化css 精灵

  • 将水平方向上的图像与垂直方向进行排列通常会导致文件较小。
  • 在精灵中组合相似的颜色可帮助您将颜色数量保持在较低的水平，理想情况下在256色以下，以适应PNG8。
  • “适合移动设备”并且不要在精灵图像之间留下很大的空白。这不会影响文件大小，但需要较少的内存供用户代理将图像解压缩为像素映射。 100x100图像是10万像素，其中1000x1000是100万像素

31.不要用scale缩放图片在html

请设置width或者height来缩放图片

32.将favicon.ico变得更小，可储存。

浏览器每次都会请求他，所以最好不要回应404，最好缓存它。
请注意以下3点

  • 保持它在1k以下。
  • 设置Expire 在headers里面，最好几个月以上。

33.保持组件低于25k

为什么呢？因为iphone不会缓存25k以上的组件。

34.将组件打包成多部分文.

35.避免空的img.src

为什么下述行为有害？

  • 通过发送大量意外流量来瘫痪您的服务器，特别是对于每天获得数百万页面浏览量的页面。
  • 浪费服务器计算周期生成一个永远不会被查看的页面。
    空的img.src会毁坏您的网站

参考：
@plh97 plh97 added 学习 如果不学习，那今天和昨天又有什么区别 项目架构 前端工程化 翻译 翻译一些经典文章 labels Mar 17, 2018
@plh97 plh97 self-assigned this Mar 17, 2018
@plh97 plh97 changed the title 雅虎的35条优化网站的建议 来自Yahoo!的35条优化网站的建议 Mar 18, 2018
@plh97 plh97 changed the title 来自Yahoo!的35条优化网站的建议 35条优化网站的建议 Mar 18, 2018
@plh97 plh97 added the 博客 写一些前端技术记录 label Mar 22, 2018
This was referenced Jun 27, 2018
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@plh97 plh97

Labels
博客 写一些前端技术记录 学习 如果不学习，那今天和昨天又有什么区别 翻译 翻译一些经典文章 项目架构 前端工程化
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@plh97