Web 前端性能优化概要

优化方向

  • 页面加载速度。
  • 代码运行速度。

优化的方法

  1. 指定优化目标。目标需要是具体的,可度量的。比如,在 50Kb 每秒的网络环境下,加载首屏所用时间少于 2 秒。
  2. 从大头去优化。如果提高页面加载速度,考虑优化加载时间最长的资源。如果要提高代码运行速度,考虑优化最耗时的操作。
  3. 制定和实施优化策略。
  4. 验证。

提升页面加载速度

  • HTTP 的缓存。
    • 强缓存。
    • 协商缓存。
  • 减少 HTTP 发送内容的大小。
    • 服务器端启用压缩服务,如用 gzip。
    • 文件内容的压缩。
    • 删除无用的代码。
    • 用没有 Cookie 的域来放静态资源。
    • 选择合适的图片格式。考虑用 Webp 格式的图片。
  • 减少 HTTP 数量。
    • 多个资源文件合并一个。JS,CSS,图片(小图标可以用图片精灵 或 图标字体)。
    • 首屏的一些 CSS 可以考虑内联。
    • 体积比较小的图片可以考虑内联。
    • 避免空的 src 和 href。
  • 提升资源下载速度。
    • 使用 CDN。
    • 无阻塞加载 Script。
  • 减少 DNS 查找时间。
    • 减少域名数量。
  • 避免重定向。
  • 其他。
    • CSS 写在 <head> 中,JS 写在 </body> 前。

提升代码运行速度

JS

  • 优化耗时的循环。
  • 缓存一些耗性能的中间结果。
  • 将耗时的任务交给 worker 来做。
  • 防止内存泄漏。
  • 算法改进。

CSS

  • 如果需要动态更改CSS样式,尽量采用触发 reflow 次数较少的方式。
  • 选择器优化。
  • 避免使用 CSS 表达式。

HTML

  • 尽量不要用 iframe。
  • 减少 DOM 数量。

工具

  • YSlow 分析网站,提出提升网站性能的建议。
  • 阿里测 网站在不同地区的访问情况。
  • Chrome 开发工具中的 Profiles 和 Timeline。
  • jsPerf JS 执行效率测试。
  • Benchmark.js 同 jsPerf。

本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员叨叨叨

【13】如何使用PS进行图片批量处理

最近笔者在项目中做技能模块的时候,用到外包给的一系列技能图标,但发现外包给到的图标分辨率、尺寸不一致,所以想到之前学校里,软件设计与交互课上有提到PS可以将一系...

10620
来自专栏我和我大前端的故事

入门微信小程序 (二)语法篇

路由在项目开发中一直是个核心点,小程序路由方面经过很好的封装,提供了几个基本的跳转方法(这三个基本够用)

1.6K20
来自专栏Linyb极客之路

前端性能优化-雅虎军规35条

合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。

13950
来自专栏FreeBuf

XSS的原理分析与解剖

作者 Black-Hole 0×01 前言: 《xss攻击手法》一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的《白帽子讲WEB安全》...

22270
来自专栏程序员宝库

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想...

15650
来自专栏琯琯博客

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

一、谷歌浏览器插件 二、Sublime Text 插件 三、Phpstorm 插件 四、油猴脚本 4.1 脚本网站 4.2 自用的脚本 五、相关链接 ? 分享...

1.5K80
来自专栏Python数据科学

Jupyter notebook快速入门教程

如果你想使用Python学习数据分析或数据挖掘,那么它应该是你第一个应该知道并会使用的工具,它很容易上手,用起来非常方便,是个对新手非常友好的工具。而事实也证明...

9710
来自专栏韩东吉的Unity杂货铺

零基础入门 6: 菜单介绍

每个月总要忙那么一段时间,因为之前的存稿保持在日更,导致后续忙起来没有时间来得及写新的内容,就一直没有更新。今天趁着午休来更新一篇。主要说下Unity里复杂的菜...

15220
来自专栏DeveWork

Intro.js:网站功能操作分布引导插件(附中文独家使用教程)

现在如果你是第一次访问Jeff的阳台的首页,你会发现会出现如下图的一个“导游”界面。这个就是使用Intro.js 这个javascript 插件制作的。在当初接...

1.3K90
来自专栏Jerry的SAP技术分享

微信小程序开发系列五:微信小程序中如何响应用户输入事件

通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小...

13330

扫码关注云+社区

领取腾讯云代金券