闭合标签之前,将所有的标签放到页面底部,这能确保在脚本执行前页面已经完成了渲染
在JavaScript文件的下载、执行过程中,页面的渲染和用户交互会被阻塞
现代浏览器可以并行下载JavaScript文件,但是JavaScript文件的下载仍然会阻塞其他类型资源的下载
如果将脚本放到页面顶部,会由于脚本的下载与执行导致明显的延迟,通常表现为空白页面、用户无法浏览内容、无法与页面进行交互
2.合并脚本,减少页面中外链脚本文件的数量将会改善性能
由于下载每一个外链JavaScript,都会对应一个HTTP请求,而HTTP请求会带额外的性能开销,因此下载单个100KB的文件将比下载4个25KB的文件更快,因此可以使用打包工具对脚本进行打包处理
4.对JavaScript文件进行压缩,减少JavaScript文件大小
3.对某些脚本文件使用无阻塞的下载方法
使用延迟脚本:标签拥有defer属性,这个属性的用途加载后续文档元素的过程将和脚本的加载并行进行(异步),但是脚本的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成
使用异步脚本:标签拥有async属性,这个属性的作用是加载和渲染后续文档元素的过程将和 脚本的加载并行进行,脚本加载完毕立即执行,(执行时同样阻塞加载与渲染后续文档)
3.动态脚本元素:可以通过JavaScript动态创建元素来加载JavaScript文件。这种技术的重点在于:无论何时启动下载,文件的下载与执行不会阻塞页面其他进程。
未完。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87175.html
摘要:在本文中我将会介绍应用性能优化的一般原则。性能优化的流程图摘取自和合著的性能,描述了应用性能优化的处理流程。例如,对每台服务器,你面临着为单个分配堆内存和运行个并为每个分配堆内存的选择。不过位能使用堆内存最大理论值只有。 原文链接:http://www.cubrid.org/blog/dev-platform/the-principles-of-java-application-per...
摘要:浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗,提升用户首屏体验,提升用户访问速度,让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时,主要是通过进行通信。 最近项目慢慢走上正轨,需求趋于平稳,这才想起需要对整站进行性能优化。经过一段时间的学习,结合现在项目的实际性能情况,发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要:浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗,提升用户首屏体验,提升用户访问速度,让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时,主要是通过进行通信。 最近项目慢慢走上正轨,需求趋于平稳,这才想起需要对整站进行性能优化。经过一段时间的学习,结合现在项目的实际性能情况,发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
阅读 3151·2021-11-08 13:21
阅读 1175·2021-08-12 13:28
阅读 1381·2019-08-30 14:23
阅读 1894·2019-08-30 11:09
阅读 773·2019-08-29 13:22
阅读 2661·2019-08-29 13:12
阅读 2528·2019-08-26 17:04
阅读 2217·2019-08-26 13:22