首页 > 网站建设 >

网站建设如何优化脚本执行?

发布时间:2019-10-17 作者:网站建设

  网站建设公司在Web开发中,我们常常需要多问几次是否可以让代码更高效一些。浏览器具备越来越多的特性,并且逐渐向移动设备转移,也要求我们的代码更加紧凑。如何优化脚本执行就变得越来越重要了。有许多简单的策略和代码可以保证相对理想的前端性能。
  无论当前JavaScript代码是在内嵌还是外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞。大多数浏览器都是用单一进程来处理用户界面(UI)更新和JavaScript脚本执行,所以同一时刻只能做其中一件事。因为不知道JavaScript是否会向HTML中添加或修改元素,所以在下载和执行JavaScript的时候都会阻塞页面的下载和渲染,等JavaScript全部下载和执行完毕之后再解析和渲染页面。而在浏览器解析到<body>标签之前,不会渲染页面的任何部分。所以如果JavaScript的下载和执行时间过长,而且被放在页面顶部,就会导致明显的延迟。虽然现代浏览器可以并行下载JavaScript,但是JavaScript下载仍然会阻塞其他资源的下载。因此推荐将所有<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
  脚本处理不当会阻塞页面加载、渲染,因此在使用时需要将CSS写在头部、将JavaScript写在尾部或异步。
  由于每个<script>标签初始下载时都会阻塞页面渲染,因此减少页面包含的<script>标签数量有助于改善这一情况。这不只针对外链脚本,内嵌脚本的数量同样也要限制。浏览器在解析HTML页面的过程中每遇到一个<script>标签,都会因执行脚本而导致一定的延时,因此最小化延迟时间将会明显改善页面的总体性能。这个问题在处理外链JavaScript文件时略有不同。考虑到HTTP请求会带来额外的性能开销,因此下载单个100KB的文件将比下载5个20KB的文件更快。也就是说,减少页面中外链脚本的数量将会改善性能,所以要尽量合并和压缩JavaScript。
  采用扩展属性defer或async延迟加载脚本,减少JavaScript对性能的影响。深圳网站建设公司本文关于“网站建设如何优化脚本执行?”的知识就介绍分享到这里,谢谢关注,博纳网络编辑整理。
 
文章标题:网站建设如何优化脚本执行?
本文地址:https://www.198bona.com/news/4306.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯