前端优化

作者: 该昵称注册中 | 来源:发表于2018-04-27 15:28 被阅读0次
网页的性能优化
  1. 网页在加载js时,可以把js放在最后加载,或者用h5的async/defer加载.
  2. 在加载图片时,对小图片可以用base64位的图片加载,把多个图片放在一张图片里面,通过位置的不同显示不同的图片,这样可以减少请求图片的请求,称为雪碧图,对图片进行压缩处理,
  3. 减少加载的js和css个数 进行合并 减少iframe的使用
  4. 写高性能DOM:回流和重绘.回流:DOM结构中每个元素都有自己的盒子模型,浏览器要根据它的样式来计算它在浏览器中出现的位置,称为回流。重绘:当各种盒子的位置,颜色,字体大小都确定后,浏览器就根据它的特性对元素进行绘制.称为重绘。DOM元素的添加,删除,替换都会触发回流+重绘.仅修改DOM元素的字体,只触发重绘(不需要调整布局).回流一定触发重绘,重绘不一定触发回流。如何避免触发回流和重绘,display的值会影响布局,从而影响布局元素位子发生改变,1:减少DOM的操作,2:添加多个DOM节点时,先拼接好,再一次性添加上去.3:对于要多次使用的DOM,可以先用变量保存起来,不要每次都去查找耗资源
  5. 减少闭包的使用,内存要得到及时的释放
  6. 用div+css代替table布局
代码优化
  1. 减少HTTP请求, http优化,使用语义化标签,减少iframe,避免重定向
  2. css优化 布局代码写在前面,删除空样式,不滥用浮动,字体,更具需求加 选择器优化 避免使用表达式 避免使用id选择 避免使用 important
  3. js 优化 压缩 减少重复代码 少使用闭包
  4. 图片的优化 图片合并 使用css sprite技术
  5. 减少DOM操作 缓存已经访问过的元素 离线跟新节点 在添加到树中,避免用js输出布局 css控制

相关文章

  • 前端性能优化(中)

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

  • 前端性能优化(下)

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

  • 前端性能优化(上)

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

  • 前端性能优化-开篇

    前端性能优化问题是每个前端需要掌握的技术。这篇文章从渲染优化、代码优化、资源优化、构建优化、传输加载优化、更多流行...

  • 前端性能优化

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

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

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

  • 前端性能优化

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

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • JavaScript

    前端 优化策略-自查表 前端性能优化常用总结鸟瞰前端 , 再论性能优化 跨域,你需要知道的全在这里内存分析与内存泄...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

网友评论

    本文标题:前端优化

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