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

网页性能优化(一) #1

Open
Roe-Tian opened this issue Oct 12, 2019 · 0 comments
Open

网页性能优化(一) #1

Roe-Tian opened this issue Oct 12, 2019 · 0 comments
Labels
前端性能优化 前端网页性能优化

Comments

@Roe-Tian
Copy link
Owner

Roe-Tian commented Oct 12, 2019 •
edited
Loading

前言

在面试过程中，不免会被问到网页优化的问题。对于一个网页的好坏，取决于访问速度的快慢。往往1秒钟的差距，会流失大量的潜在客户。所以，优化网页是前端开发人员的必备技能。优化的问题也一致探讨，最著名的则是Yahoo的35军规，它总结了网页在大部分情况下如何去进行优化措施。但往往规则靠死记硬背是不现实的，只有动手实践才能真真的掌握。

正文

往往在真实的生产环境中，前端花费大部分的时间去加载资源，下载资源。所以，加快网页加载速度最为有效的方法是减少http请求。

1. 减少css标签、javascript标签

以前，我们经常可以在网站后台看到如下的场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="example1.css">
    <link rel="stylesheet" href="example2.css">
    <link rel="stylesheet" href="example3.css">
    <link rel="stylesheet" href="example4.css">
    <link rel="stylesheet" href="example5.css">
    <title>example</title>
</head>
<body>
     // ...dom内容
    <script src="example1.js"></script>
    <script src="example2.js"></script>
    <script src="example3.js"></script>
    <script src="example4.js"></script>
    <script src="example5.js"></script>
</body>
</html>

在这样的情况下，往往页面的加载速度会降低，一般页面大概适合2-3个script文件进行加载，所以，我们第一步要做的就是，将这么多的资源文件适当的合并起来，css文件也是如此。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bundle.css">
    <title>example</title>
</head>
<body>
//...
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
</body>
</html>

在现在的工业化开发中，都往往会用到打包工具，像webpack、gulp等，对文件进行打包，分块，部分加载等。因此，这一类的问题造成的影响正在逐步的降低。

2. 图片资源的加载

往往在大型项目的开发中，对于图片资源的处理是一件很费力的事情，我们单从减少http请求的角度来，看待图片请求的问题，最简单的方法往往是使用雪碧图的方式。如图：
image
在写css样式时，会使用background-image和background-position去加载各种背景图片资源。但是，如果将这些资源进行合并是能减少整体网页的请求次数，加载网页性能的。

3. 使用base64的图片资源

首先，有人会疑问何为base64的图片资源。通常，图片在网络传输中，都是以base64加密的方式进行传输的。因此，我们为了减少不必要的网络请求，我们可以将一下图片进行base64加密，然后直接放到img标签的src中,或者图片背景资源的url中。

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

注：这种情况的使用，往往是在图片比较小的情况下，如果图片较大的话，往往会增加整体资源的体积，而使得下载资源时间增长。

4. 使用image map(感觉不常用，本人没使用过)

有些在线的网站可以将图片制作成map，然后在html中使用，如：

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

这种图片处理的方式，也与雪碧图的原理差不多，可以减少对图片资源的请求

总结

在优化网站性能的方式有很多种，这只是第一篇——减少http请求的方式。
@Roe-Tian Roe-Tian added the 前端性能优化 前端网页性能优化 label Oct 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
前端性能优化 前端网页性能优化
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Roe-Tian