网站性能优化实战

时间: 2019-10-11阅读: 958标签: 优化

一.网络传输性能优化

读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理html元素→加载完成。


1.资源打包压缩

目的:减少请求数、减小请求资源体积、提升网络传输速率

工具webpackjs压缩,html压缩,css提取压缩,依赖关系分析等)

3.图片资源优化

1)使用精灵图(雪碧图css sprite),就是很多张图标合并到一起,通过背景位置来控制

这里给大家推荐一个自动化生成雪碧图的工具:https://www.toptal.com/developers/css/sprite-generator 

2)使用字体图标


二.页面渲染性能优化

1.减少重排还是重绘

1)CSS属性读写分离:浏览器每次对元素样式进行读操作时,都必须进行一次重新渲染(重排 + 重绘),所以我们在使用js对元素样式进行读写操作时,最好将两者分离开,先读后写,避免出现两者交叉使用的情况。最最最客观的解决方案,就是不用JS去操作元素样式,这也是我最推荐的。

2)通过切换class或者style.csstext属性去批量操作元素样式

3)DOM元素离线更新:当对DOM进行相关操作时,例如innerHTML、appendChild等都可以使用Document Fragment对象进行离线操作,待元素“组装”完成后再一次插入页面,或者使用display:none 对元素隐藏,在元素“消失”后进行相关操作。

4)将没用的元素设为不可见:visibility: hidden,这样可以减小重绘的压力,必要的时候再将元素显示。

5)压缩DOM的深度,一个渲染层内不要有过深的子元素,少用DOM完成页面样式,多使用伪元素或者box-shadow取代。

6)图片在渲染前指定大小:因为img元素是内联元素,所以在加载图片后会改变宽高,严重的情况会导致整个页面重排,所以最好在渲染前就指定其大小,或者让其脱离文档流。

7)对页面中可能发生大量重排重绘的元素单独触发渲染层,使用GPU分担CPU压力。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/6354

js前端性能优化之函数节流和函数防抖

针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。节流:使得一定时间内只触发一次函数。 防抖动:将几次操作合并为一此操作进行。

vue-cli3.0 日常优化

使用cdn资源主要是为了减小打包文件体积,项目自动引入 第三方插件样式 去掉 使用cdn引入样式,定义文件夹的缩写路径,移除打包后文件的预加载prefetch/preload

纯CSS改写radio和checkbox,单选框、复选框样式优化

input 的单选框 radio 和复选框 checkbox 是样式是很难调的,设置背景和边框都不起效。我们可以使用下面的方法进行样式美化:纯CSS就能实现。

Javascript代码优化的8个知识点

本篇文章给大家分享了关Javascript代码优化的8点总结,希望我整理的内容能够帮助到大家。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

网站搜索引擎优化,值得关注的4个策略有哪些?

在做网站搜索引擎优化的过程中,对于企业站而言,由于SEO人员都是处于执行层面,甚至即使你有权制定SEO优化方案,偶尔也是草草就上手操作。当你运营到一定阶段的时候

JS 代码脏乱差?你需要知道这些优化技巧

JavaScript 是万众瞩目的力量。它是世界上最流行的编程语言。它容易理解,有丰富的学习资源,对初学者非常友好。JavaScript 有着庞大的资源库,对小公司和大企业都颇具吸引力。庞大的 JS 工具和库生态系统为开发者的生产力带来了福音

工程架构的优化

client端和server端的配置有重复的地方,优化的手段就是将两个文件中重复的配置项提取出来,然后利用webpack-merge包去合并配置。提取公共的配置到webpack.config.base.js文件

前端的性能优化(针对内容方面)

尽量减少HTTP请求数,80%的终端用户响应时间都花在了前端上,减少DNS查找,避免重定向 重定向用301和302状态码,下面是一个有301状态码的HTTP头:

React 中 的 9 种优化技术

谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%

加速vue组件渲染之性能优化

平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!