web 页面性能优化

性能优化在视觉上有两个阶段:

加载阶段,能够快速的看到页面(首屏渲染时间);
交互阶段,能够快速响应操作(动画效果,接口返回速度等)

加载阶段

加载阶段，是指从发出请求到渲染出完整⻚⾯的过程，影响到这个阶段的主要因素有⽹络和JavaScript脚本。
网络决定资源的下载速度,javascript脚本阻塞dom解析,css脚本不阻塞dom解析(但是如果是放在head的话会阻
塞渲染)

优化策略

减少资源的大小,可以通过webpack打包优化工具,压缩代码,去除注释空格等;
如果资源很少可以把资源内联到html中;
传输过程可以开启gzip压缩;
cdn加速;
请求资源个数多的可以开启http2传输协议,增加一次性请求资源的数量和传输速度;
如果JavaScript代码没有DOM或者CSSOM的操作，则可以改成sync或者defer属性；
使⽤async标志的脚本⽂件⼀旦加载完成,会⽴即执⾏;⽽使⽤了defer标记的脚本⽂件，需要等到DOMContentLoaded事件之后执⾏。
同样对于CSS，如果不是在构建⻚⾯之前加载的,可以把资源放在html底部

交互阶段

交互阶段，主要是从⻚⾯加载完成到⽤⼾交互的整合过程，影响到这个阶段的主要因素是JavaScript脚本,次要原因有重绘->重排->合成

布局信息修改(大小,间距,布局方式等)–>重排
非布局信息修改(颜色,透明度) --> 重绘
通过CSS实现⼀些变形、渐变、动画等特效 -->合成

效率:合成>重绘>重排

优化⽅案:原则就是让单个帧的⽣成速度变快

减少javascript脚本执行时间

⼀种是将⼀次执⾏的函数分解为多个任务，使得每次的执⾏时间不要过久。
另⼀种是采⽤Web Workers。你可以把Web Workers当作主线程之外的⼀个线程，在Web Workers中是可以执⾏JavaScript脚本的，不过Web Workers中没有DOM、CSSOM环境，这意味着在Web Workers中是⽆法通过JavaScript来访问DOM的，所以我们可以把⼀些和DOM操作⽆关且耗时的任务放到Web Workers中去执⾏
如果不考虑兼容性可以调用requestIdleCallback这个api可以在浏览器空闲时执行代码,可以把大于一帧运行时间的js放到里面去运行,让用户看不出来卡顿

避免强制同步布局

正常情况,js在对dom进行添加删除的工作时,会开启一个新的任务去执行布局工作
但是如果js中在不断在添加dom后获取新添加的dom的属性,那么就会触发强制同步布局

合理利用css合成动画

css 动画不会被js阻塞,如果能提前知道对某个元素执⾏动画操作，那就最好将其标记为will-change，这是告诉渲染引擎需要将该元素单独⽣成⼀个图层

避免频繁的垃圾回收

垃圾回收会阻塞

web 页面性能优化相关推荐

web页面性能优化及SEO优化
web页面性能优化前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
web页面性能优化方法总结
最近老大给我布置了一道作业,让我去想想有哪些办法可以优化web页面的性能,回头一看,做了这么多年的前端开发,多少还是知道一些常规的性能优化策略,以下是我对性能优化的一个总结,共13点,如果描述错误,欢 ...
小tip: base64:URL背景图片与web页面性能优化（转载）
今天在代码看到css北京图片使用了base64格式表示图片,SO,百度了一下.感觉完全可以解释了. 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在H ...
小tip: base64:URL背景图片与web页面性能优化——张鑫旭
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
Web页面性能优化以及SEO
为什么要提高web性能? Web性能黄金准则:只有10%20%的最终用户响应时间花在了下载html文档上,其余的80%90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据著名 ...
web页面性能优化系列（附录）其他必会的基础知识
001:即建立TCP链接 1,根据域名解析IP获取IP地址 2,TCP|IP三次握手 1,根据域名解析IP获取IP地址-发生在互联层 DNS解析IP A:浏览器会先解析我们输入的url地址,浏览器会先 ...
web前端开发，如何提高页面性能优化？
web前端开发,如何提高页面性能优化? 内容方面减少HTTP请求次数减少DOM操作减少DNS查询使用Ajax 可缓存 css方面把css样式HTML代码页的上端从页面中分离css代码,从外 ...
web网站页面性能优化
Web前端的本质是:将信息快速并友好的展示给用户并能够与用户进行交互. 雅虎网站页面性能优化的34条黄金守则 http://www.mamicode.com/info-detail-139010.ht ...
web前端页面性能优化SEO优化
首先什么叫网站? 网站一般分为前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页 ...

web 页面性能优化

web 页面性能优化

性能优化在视觉上有两个阶段:

加载阶段

优化策略

交互阶段

web 页面性能优化相关推荐

最新文章

热门文章