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

常见前端性能优化方法

作者: 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.适当使用图片预加载和懒加载

    相关文章

      网友评论

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

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