美文网首页
前端性能优化的方式

前端性能优化的方式

作者: loushumei | 来源:发表于2020-07-16 15:00 被阅读0次
原则:
  • 多使用内存、缓存或其他方法
  • 减少CPU计算量,减少网络加载耗时(适用于所有编程的性能优化-空间换时间)

从何入手:让加载更快让渲染更快

「 让加载更快 」

1. 减少资源体积:
  • 压缩代码:webpack配置 mode:'production'
  • 图片压缩
2. 减少访问次数:
  • 合并代码: js文件 css文件 图片(雪碧图)
  • SSR: 服务端渲染:将网页和数据一起加载,一起渲染
    如早先的JSP ASP PHP ,现在的vue React SSR.
  • 缓存:webpack配置 output.filename:'bundle.[contenthash].js',静态资源加hash后缀,根据文件内容计算hash;文件内容不变,则hash不变,则url不变;url和文件不变,则自动触发http缓存机制,返回 304
    使用更快的网络:
  • CDN:根据区域访问运营商的IP,访问更快

「 让渲染更快 」

1. CSS放在 head里面,JS放在body最下面
在渲染DOM节点前把CSS规则加载完,防止重复渲染Render Tree 渲染页面时,如果遇到script,则暂停渲染,优先加载并执行JS代码, 完成再继续放在中间阻塞dom渲染
2. 尽早开始执行js,用DOMContentLoaded触发
```
 window.addEventListener('load',function(){
    //页面加载完全部资源才执行,包括图片,视频
})
window.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完即可执行,包括图片,视频可能没加载完
})
```
3. 懒加载,图片懒加载,上滑加载更多
```
<img id="img1" src="preview.png" data-realsrc="abc.png" alt="">
<script type="text/javascript">
    var img1=document.getElementById('img1')
    //判断滑动到底部的时候赋值给图片真正的src
    img1.src=img.getAttribute('data-realsrc')
</script>
```
4. 对DOM查询进行缓存
5. 频繁的ODM操作,合并到一起插入结构
6. 节流throttle 防抖 debounce

相关文章

  • 前端性能优化(中)

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

  • 前端性能优化(下)

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

  • 前端性能优化(上)

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

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

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

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 前端性能优化总结

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

  • 前端性能优化方式

    2.前端性能优化方式 减少http请求。 大量图片渲染使用懒加载技术,图片压缩。 压缩代码,将javascript...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 前端性能优化的方式

    原则: 多使用内存、缓存或其他方法 减少CPU计算量,减少网络加载耗时(适用于所有编程的性能优化-空间换时间) 从...

网友评论

      本文标题:前端性能优化的方式

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