美文网首页
常见前端性能优化方法

常见前端性能优化方法

作者: zhangjianli | 来源:发表于2017-04-10 23:32 被阅读0次

对于前端工程师来说,性能优化是我们需要考虑的一个重要问题,下面介绍几种我知道的前端性能优化方法

1.减少Http请求
据测试至少80%的最终用户响应时间都花在了页面中组件上,所以改
善响应时间最简单的途径为减少http请求数量,主要方法有:CSS
Sprits(这 种方式是我最常用的,简单有效),内联图片和脚本,样式表合并
2.压缩组件:
通过减小http响应的大小来减少响应时间
3.将样式表放在顶部
尽量多使用<link>标签,因为@import标签必须在其他规则之前,可能导致白屏
4.将脚本放在底部
脚本放在</body>前,是在网页DOM结构加载完成时就执行,放在<head>中会在开始时执行,阻塞DOM结构渲染,出现白屏情况,用户体验也不好
5.避免CSS表达式
6.使用外部的JavaScript和CSS
使用外部js和css文件有机会被缓存起来
7.精简JavaScript和css
精简即为从代码中移出不必要的字符减小其大小,同时可以此压缩文件,精简CSS可以合并相同的类,移出不适用的类等
8.使用ajax缓存
9.适当使用图片预加载和懒加载

相关文章

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 常见前端性能优化方法

    对于前端工程师来说,性能优化是我们需要考虑的一个重要问题,下面介绍几种我知道的前端性能优化方法 1.减少Http请...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端性能优化 -- 从 10 多秒到 1.05 秒

    关于 性能优化 是个大的面,这篇文章主要涉及到 前端 的几个点,如 前端性能优化 的流程、常见技术手段、工具等。 ...

  • 前端性能优化

    Optimize.png 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程、常见技术手...

  • Java基础-优化

    网站性能优化 前端性能优化 应用服务器性能优化 解决线程安全的方法: 将对象设计成无状态对象,如Servlet 使...

  • 前端性能优化总结

    在实际的项目开发中,不管是前端也好,后端也好,都需要岁其性能进行优化,今天主要讲讲在前端常见的性能优化方式: 一、...

  • 前端工程师面试题(性能优化)

    1. 性能优化1 1.1 页面重构怎么操作? 1.2 什么叫优雅降级和渐进增强? 1.3 前端性能优化的方法? (...

网友评论

      本文标题:常见前端性能优化方法

      本文链接:https://www.haomeiwen.com/subject/jineattx.html