码迷,mamicode.com
首页 > Web开发 > 详细

【转】如何提高WEB的性能?

时间:2020-01-10 15:55:55      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:选择   样式表   由来   工具   支持   大文件   ***   因此   import   


1.清理HTML文档

 

  • 精简html代码结构
  • 恰当放置css;推荐将css放在html头部,可保证正常的渲染过程,避免用户等待白屏页面( 知觉性能 )
  • 正确放置javascript;如若放在head标签或者html上部,会阻塞html和css的加载过程,这个错误导致页面加载时间变成,增加用户的等待时间。所以可将javascript放置底部。

 

2.优化css性能

 

  • 不少网站管理员在网页中错误的使用 @import 指令 来引入外部样式表。这是一个过时的方法,它会阻止浏览并行下载。link 标签才是***的选择,它也能提高网站的前端性能。多说一句,通过 link 标签请求加载的外部样式表不会阻止并行下载。

 

3.减少外部HTTP请求

研究你网站的每个组成部分, 消除任何影响访问者体验不好的成分。 这些成分可能是:

 

 

  • 不必要的图片

  • 没用的 JavaScript 代码

  • 过多的 css

  • 多余的插件

4. 压缩 CSS, JS 和 HTML

使用压缩工具可以非常简单地把无用的字节从你的 CSS、JS 和 HTML 文件修剪掉。关于压缩的相关信息,可以参阅如何压缩 CSS、JS 和 HTML。

 

 

 

5. 使用预先获取

预先获取可以 在真正需要之前 通过取得必需的资源和相关数据来改善访问用户的浏览体验,主要有3类预先获取:

 

 

  • 链接预先获取

  • DNS 预先获取

  • 预先渲染

6. 使用 CDN 和缓存提高速度

  • 合理地设置浏览器缓存,能让浏览器自动存储某些文件,以便加快传输速度。此方法的配置可以直接在源服务器的配置文件中完成。

 

 

 

7. 压缩文件

 

 

  • 文件压缩能使网站的内容轻量化,更易于管理。 最常用的文件压缩方法之一是 Gzip。 这是缩小文档、音频文件、PNG图像和等其他大文件的***方法。
  • Brotli 是一个比较新的文件压缩算法,目前正变得越来越受欢迎。 此开放源代码算法由来自 Google 和其他组织的软件工程师定期更新,现已被证明比其他现有压缩方法更好用。 这种算法的支持目前还比较少,但作为后起之秀指日可待。

 

8. 优化你的图片

  • 大量的写真集和庞大的高清图片会阻塞网页渲染速度。没有优化的高清图片可能会有几兆字节(mb)。因此适当地对它们进行优化可以改善网页的前端性能。

 

 

9. 使用轻量级框架

【转】如何提高WEB的性能?

标签:选择   样式表   由来   工具   支持   大文件   ***   因此   import   

原文地址:https://www.cnblogs.com/cyqdeshenluo/p/12176256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!