美文网首页
前端性能优化

前端性能优化

作者: demoxjl | 来源:发表于2020-04-06 12:14 被阅读0次

1.减小http的请求大小,减少没必要的图片,css,js和html等对文件压缩优化缩短网络传输等待延时
2.减少http的请求:(缩短页面请求的等待时间)
在浏览器与服务器通信时,主要通过http进行通信,浏览器与服务器需要经过三次握手(Connection:keep-alive,握手不断开),每次握手
花费大量时间。而且不同浏览器对资源文件并发请求数量有限,http请求量达到一定数量,资源请求
就处于等待状态,因此减少http的请求数量可以很大成都市对网站性能进行优化。
3.使用webpack/gulp等工程化打包工具把多个js,css文件集合成一个,减少http请求数量
4.使用精灵图片,将多张图片合并成一张,减少请求;或者使用background属性访问图片,可以减少图
片总字节数
5.懒加载:控制网页的内容在一开始无需加载,不需要发请求,等到用户真正需要的时候立即加载内
容,控制了网页一次性的请求量(淘宝的图片,屏幕滑动到哪里加载到哪里)
6.减少DOM操作
7.图标使用字体图标(IconFont)替换
8.利用浏览器缓存:浏览器缓存将资源存储在本地,等下次请求该资源时,若已存在,则不需向服务器重新发送请求,直接在本地读取
9.避免页面中空的href和src,浏览器会把空的内容进行加载,直到查找失败,会阻塞页面中其他内容的下载进程
10.为指定的HTML页面配置Cache-Control和Expires,将内容缓存起来

         <meta http-equiv="Cache-Control" content="max-age: 7200" >
         <meta http-equiv="expires"  content="Wed 20 jun 2020 23:59:59 GMT" >

11.优化页面的排版顺序,内容侧重于左侧导航,先加载内容区域,在加载左侧导航

<body>
    <content></content>
    <asideNav></asideNav>
</body>

相关文章

  • 前端性能优化(中)

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

  • 前端性能优化(下)

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

  • 前端性能优化(上)

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

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

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

  • 前端性能优化

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

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

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

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

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

  • 前端性能优化

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

  • 2019-10-22

    2018 前端性能优化清单

  • 2020-04-11

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

网友评论

      本文标题:前端性能优化

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