Web前端性能优化教程07:精简JS 移除重复脚本

摘 要

  \\\\是W前端性能优化系列文章中的第七篇,主要讲述内容:精简代码,以及移出重复脚本 教程可查看:W前端性能优化一、精简基础知识精简:从代码中移除所有的注释以及不必要的空白

   \\\\是W前端性能优化系列文章中的第七篇,主要讲述内容:精简代码,以及移出重复脚本 教程可查看:W前端性能优化一、精简基础知识精简:从代码中移除所有的注释以及不必要的空白字符空格,换行和制表符,减少文件的大小 :和精简一样,会从代码中移除注释和空白,另外也会改写代码 作为的一部分,函数和变量的名字将被转换为更短的字符串,所以进一步减少了文件的大小 的缺点缺陷:混淆过程本身很有可能引入错误 :由于混淆会改变符号,因此需要对任何不能改变的符号进行标记,防止混淆器修改它们 :经过混淆的代码很难阅读,这使得在产品环境中更加难以调试 而言,精简出错的概率会少很多 一个和混淆的示例这个示例将使用M进行精简,使用进行混淆 如下::;;;;;;;;;;;;;;;;;M精简后的代码:;;;;混淆后的代码:;;;可见,混淆更能减少代码的大小 对和混淆进行抉择我们知道启用压缩能减少组件的传送大小,压缩后精简和混淆的差别会进一步减少,综合考虑混淆可能带来的额外的风险,所以优先考虑使用精简 ,如果对于性能的极致追求,可以使用混淆,但要做足测试,确保混淆不会带来其他的问题 作为流行的前端框架,除了有开发版外,也提供了一个版本,供实际部署使用,这个版本就使用了混淆,最大化地减少代码总量 二、重复脚本出现重复脚本的原因导致一个脚本的重复又两个主要因素:团队大小和脚本数量 开发一个网站需要大数量的资源,不同的团队需要构建一个大型的不同部分,当团队整合和沟通工作没有做足,则容易出现重复脚本的情况 脚本数量也是重要的一环,脚本数量越多越容易出现重复脚本的情况 脚本如何损伤性能在没有缓存的情况下,如果在中重复链接了相同的脚本,以下包括将会产生两次请求,以上则不会 产生不必要的请求外,对脚本进行重复执行也会浪费时间,脚本的重复执行在浏览器中都存在 如何避免重复形成良好的脚本组织 脚本有可能出现在不同的脚本包含同一段脚本的情况,有些是必要的,但有些却不是必要的,所以需要对脚本进行一个良好的组织 脚本管理器函数 \\
  • 102
    A+
发布日期:2019年09月05日  所属分类: Seo进阶