【前端大讲堂】性能优化必知必会

二叶草 2020年2月1日22:19:44优化评论阅读模式

【前端大讲堂】性能优化必知必会

个参与过开发企业级Web应用的前端工程师或许都曾思考过前端性能优化方面的问题。优化方法多种多样,你知道几种?

1.为什么要优化?

【前端大讲堂】性能优化必知必会

Web性能对于用户体验有及其重要的影响:

【前端大讲堂】性能优化必知必会优化可以带来访问速度的提升,为用户提供更好的用户体验。

2.优化总体思路和级别

【前端大讲堂】性能优化必知必会

【前端大讲堂】性能优化必知必会

【前端大讲堂】性能优化必知必会

优化级别呈现金字塔,越低的越容易实现,团队采用也越广泛。越往上层,优化难度越来越大,能完成的团队也越来越少。

3.静态资源优化

【前端大讲堂】性能优化必知必会

优化思路:主要是减少静态资源的加载时间,主要包括html、css、js和图片等文件,静态资源的加载时间是前端性能最大的瓶颈(特别是图片、音频和视频等)

具体优化方法:

合并css、js文件、制作雪碧图。减少HTTP请求数,节省网络流量。特别是手机端

静态资源使用CDN:浏览器端通过邻近的节点访问资源

html、css和js文件压缩、图片压缩、后台开启gzip压缩:减少请求返回的数据大小

静态资源缓存

4.后台接口优化

【前端大讲堂】性能优化必知必会

涉及到多个接口请求合并,SQL语句优化,Tomcat或Nginx服务器配置优化等内容。因为主要是后台工程师关注的内容,这里就不予展开。

5.页面渲染优化

【前端大讲堂】性能优化必知必会

优化思路:现在的网络用户希望他们访问的页面具有交互性并且运行顺畅。页面不仅要快速加载,而且要顺畅地运行;滚动应与手指的滑动一样快,并且动画和交互应如丝绸般顺滑。

了解浏览器如何处理 HTML、JavaScript 和 CSS,并确保编写的代码(和要包括的其他第三方代码)尽可能高效地运行。

具体优化方法:

01

优化JavaScript代码的执行。

比如使用requestAnimationFrame来更新页面;使用Web Worker来处理复杂的计算;避免在scroll或touchmove回调函数中修改样式。

02

优化CSS

正确的使用CSS选择器;避免使用CSS表达式等。

03

防止CSS阻塞渲染

通常情况下 CSS 被认为是阻塞渲染的资源,在CSSOM 构建完成之前,页面不会被渲染,放在顶部让样式表能够尽早开始加载。但如果把引入样式表的 link 放在文档底部,页面虽然能立刻呈现出来,但是页面加载出来的时候会是没有样式的,是混乱的。当后来样式表加载进来后,页面会立即进行重绘,这也就是通常所说的闪烁了。

04

防止JavaScript阻塞文档解析。

当在 HTML 文档中遇到 script 标签后控制权将交给 JavaScript,在 JavaScript 下载并执行完成之前,都不会解析 HTML。因此如果将 JavaScript 放在文档顶部,恰好这个时候 JavaScript 脚本加载的特别慢,用户将会等待很长一段时间,这段个时候 HTML 文档还没有解析到 body 部分,页面会是空白的。

6.优化测试工具

【前端大讲堂】性能优化必知必会

Yahoo开源的YSlow

【前端大讲堂】性能优化必知必会

Goolge推出的Google PageSpeed Insights

【前端大讲堂】性能优化必知必会

7.参考链接:

【前端大讲堂】性能优化必知必会

http://fex.baidu.com/blog/2014/03/fis-optimize/

https://developers.google.com/web/fundamentals/performance/rendering/?hl=zh-cn

http://www.zhangxinxu.com/wordpress/2013/05/caching-tutorial-for-web-authors-and-webmasters/

本文来源于:【前端大讲堂】性能优化必知必会-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
nginx解析漏洞 优化

nginx解析漏洞

phpstudy(小皮模板存在nginx解析漏洞) 影响版本 phptsuy8.1.07的Nginx1.5.11版本影响版本 phptsuy8.1.07的Nginx1.5.11版本 phpstudy介...
网站SEO优化基础流程(新手必看) 优化

网站SEO优化基础流程(新手必看)

宝塔面板搭建一个获取网站的Favicon图标的APIgetFavicon是一个可以获取网站的Favicon图标并显示在你的网页上的项目。安装方法很简单,属于开箱即食。这篇文章还是基于宝塔面板来搭建。 ...

发表评论