专栏首页卡少编程之旅前端性能优化总结(简略)

前端性能优化总结(简略)

静态资源优化

这方面主要是减少静态资源的加载时间 减少http请求的数量和时间上来考虑

  • 合并压缩css、js文件,制作雪碧图 压缩图片:减少http的请求次数,节省网络请求时间
  • 静态资源cdn分发:客户端可以通过最佳的网络链路加载静态资源
  • 静态资源缓存机制,从而减少不必要的请求
  • 减少DNS的搜索时间 这个在前端处理的少一些

接口访问优化

这个主要还是要从服务端入手,node必不可少

  • 首屏采用服务端渲染 可以使用node做到前后处理都用js语言
  • 使用node来实现基于代理服务的接口合并方案 从而也减少了http请求

页面渲染速度的优化

网页的一些约定速成的优化,但实际效果可能并不明显

  • css放在顶部 实现优先渲染
  • js放在页面底部 从而避免阻塞
  • 恰当的DOM结构 从而减少DOM元素的数量 减少DOM树的复杂度
  • img标签设置宽高,避免回流和重绘的影响(先有占位)
  • React和Vue等框架中虚拟DOM的渲染方案,减少了dom的开销

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手机adb命令学习

    卡少
  • 纯前端json数据生成excel下载的实现

    卡少
  • 接触到的git的三个重要知识点

    卡少
  • python 中文处理方法

    python 中如果没有指定编码方式的话,那么默认支持的是ASCII码,如果出现中文则会报错,即便中文是注释也不行

    onety码生
  • Java中实现解码字符串的方法,实用代码

    需求:给定一个经过编码的字符串,要求返回它的解码后的字符串。 编码规则是:k[str],这个编码的含义是str出现了k次,k是一个正整数。 具体例子: s = ...

    用户1289394
  • Eclipse插件之FindBugs

    Eclipse是目前非常流行的开发平台,开放扩展的架构让很多程序员找到了自己个性化的工作环境。

    阿敏总司令
  • Airbnb机器学习自动化尝试:提高数据科学家工作效率的变革

    大数据文摘
  • 突破前端反调试--阻止页面不断debugger

    不知道你们有没有遇到过上图这样,有时候想调试网站,一打开开发者工具立即 debugger ,而且跳过了还是会继续,或者是有时候在调试网页时,突然就给你来一个 d...

    sergiojune
  • 2018年供应链发展中不容忽视的一点:分析

    绩效咨询公司The Hackett Group最近发布了其“Analytics: Laying the Foundation for Supply Chain ...

    人称T客
  • Oauth2.0验证器

    周末写的的小网站,功能是验证Oauth2.0授权服务器的可用性,帮助开发者调试Oauth2.0授权服务器,以便把服务器快速搭建出来。

    巴法

扫码关注云+社区

领取腾讯云代金券