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

静态资源优化

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

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

接口访问优化

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

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

页面渲染速度的优化

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客编程

Vue-Router 入门与提高实战示例

路由(routing)是指从源到目的地时,决定端到端路径的决策过程。 对于VueRouter而言,路由就是根据一个请求路径选中一个组件进行 渲染的决策过程:

1.9K20
来自专栏yukong的小专栏

vue后台管理之动态加载路由

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实...

1.1K20
来自专栏网站源码

博客复制弹窗提示版权

CSS与JS文件配套下载:https://www.lanzous.com/i1j8ppi

29740
来自专栏python3

python导入模块--import--1

    python前面写的程序,后面就可以将它当成一个模块导入,取其精华舍弃不用的随意使用,最理想的情况是任何一个功能,只要写一次,以后所有人都可以任意调用,...

11520
来自专栏Python疯子

Selenium和PhantomJS 终极最全使用总结

1. 加载页面[image.png]PhantomJS 截取的是网页的完整页面,包括下拉进度条的内容

97430
来自专栏乐百川的学习频道

做一个统计单词数目的Atom插件

本文是Atom 教程 制作单词计数插件的简化介绍,所有代码都来自这篇文章。如果希望参考详细的文档,请直接查看原文。这篇文章用一个简单的小例子,为我们讲解了如何编...

193100
来自专栏向治洪

React Native之hellWord

初始化项目工程 ---- 进入自己的工作空间然后shift+鼠标右键打开命令行窗口执行如下命令创建RN工程HelloWorld: ? 然后使用Androi...

22080
来自专栏河湾欢儿的专栏

js基础_2(页面加载和延迟脚本)

25820
来自专栏小白鼠

Ionic3 自定义指令

组件的概念比较大,本文讲解的是属性指令和结构指令的创建和使用,Angular官方文档

14130
来自专栏Theo Tsao

Vim的基本使用(二)

本文包含Vim的基本使用有: 可视模式、指定计数、重复命令、外部命令、命令行编辑、文件编辑、分割窗口、GUI命令、配置。 另附一张Vim Cheat Sheet...

12820

扫码关注云+社区

领取腾讯云代金券