为什么推荐使用第三方CDN加速后的jquery库文件

发布网友 发布时间：2022-06-06 18:44

我来回答

共1个回答

热心网友 时间：2023-10-11 21:35

　　本文摘自：《Web 全栈工程师的自我修养》　　野生程序员是指仅凭对计算机开发的兴趣进入这个行业，从前端到后台一手包揽，但各方面能力都不精通的人。野生程序员有很强大的单兵作战能力，但是在编入正规军之后，可能会不适应新的做事方法。　　遭遇野生程序员　　腾讯公司内部的团队很多，在团队管理上有项目和专业两个维度。也就是说，有些团队是项目维度的，整个团队共同维护一个产品，成员来自不同的职业岗位；有些团队是专业维度的，比如一个组都是前端工程师，维护不同的产品。　　因为前端组是设计部最接近后台技术的团队，所以团队平时的工作和技术交流分享，都不局限于前端技术领域，还包括很多服务器端或者移动端的技术。从前端到后端，一些技术问题都要我们自己来解决。　　在招聘前端工程师的时候，我们对应聘者的要求是，在掌握基本前端技术的前提下，最好有更为全面的技术。这样，即使我们的项目人力结构、平台和方向发生变化的时候，他也能够更加灵活地转移到其他角色中。而且技术的全面更能表现一个人对技术的热情以及较强的学习能力。从团队多样性来讲，多一些技术种类的话，大家在一起也能碰撞出新的火花。　　有一次，我在 QQ 群发布了一条简单的信息：招聘前端工程师，全栈更佳。随后有一个全栈工程师A君向我自荐。　　我仔细看了他的简历：三年工作经验，擅长 PHP、MySQL 数据库、jQuery、HTML 和 CSS，对 CDN 加速和网络安全也颇有研究。他的简历让我眼前一亮，于是我跟他进行了一次简单的电话面试。　　电话面试的第一个环节照例是让A君简短地介绍自己。A君在一个传统行业的小公司做 IT 技术支持工作，公司的 3 个网站项目都是他一手搭建，从架构到编码细节他都如数家珍。他号称能解决一切技术问题，老板提出的所有需求都能完成，而且只有他能完成。随着最近公司业务量越来越大，他还招了两个下属，但是主要的编程工作还是他在做。　　我问他：我们的职位是前端工程师，那么您有哪些前端方面的技能呢？他回答：我擅长 HTML、CSS 和 JavaScript。　　对于 Web 性能优化，您有哪些了解和经验吗？他思索了一阵答道：我们在发布项目之前压缩 CSS 和 JavaScript 源代码，这样文件体积就变小了，用户加载必要资源所花的时间也就更短了。我继续说道，很好，还有吗？他想了半天，答不上来了。 压缩源码和图片　　JavaScript 文件源代码可以采用混淆压缩的方式，CSS 文件源代码进行普通压缩，JPG 图片可以根据具体质量来压缩为 50% 到 70%，PNG 可以使用一些开源压缩软件来压缩，比如 24 色变成 8 色、去掉一些 PNG 格式信息等。选择合适的图片格式　　如果图片颜色数较多就使用 JPG 格式，如果图片颜色数较少就使用 PNG 格式，如果能够通过服务器端判断浏览器支持 WebP，那么就使用 WebP 格式和 SVG 格式。合并静态资源　　包括 CSS、JavaScript 和小图片，减少 HTTP 请求。开启服务器端的 Gzip 压缩　　这对文本资源非常有效，对图片资源则没那么大的压缩比率。使用 CDN　　或者一些公开库使用第三方提供的静态资源地址（比如 jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。延长静态资源缓存时间　　这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。把 CSS 放在页面头部，把 JavaScript 放在页面底部　　这样就不会阻塞页面渲染，让页面出现长时间的空白。　　每一个条目都可以进一步深层挖掘下去。 Web 性能优化分为服务器端和浏览器端两个方面。　　此外，由于中文的歧义性，Web 性能优化这个词既可以解读成页面加载速度（Page Speed）的优化，也可以解读成页面渲染性能（Page Performance）的优化。或者是二者的集合。所以，应聘者如果能在这个问题上多做一些分析，会有很高的加分。但是A君在网络性能方面的研究只是浅尝辄止，停留在压缩资源方面，这说明他还没有足够理解 HTTP 协议本身。　　关于网络性能和 HTTP 协议，作为大公司的前端工程师是非常看重的，因为每一个页面都会有亿万用户访问量，任何一点对服务器带宽压力都会积少成多，最终造成很大的成本。关于这方面的技术详解，我在后面会有一篇单独的文章来分析。　　接着上面的故事，我想既然他对 Web 性能优化方面不太熟悉，可能他是一个偏后台的程序员，因而就又问道：关于服务器端 MVC 架构的技术实现，您是怎样理解的？他说：是数据模型、视图、控制器的分离。　　我更进一步问道：这种架构方式有什么好处？您在项目中是如何应用这一架构的？他回答说：MVC 的架构方式会让项目可维护性更高，所有涉及界面的代码都在视图（View）里面，所有涉及核心逻辑的代码都在模型（Model）里面，URL 路由之类的代码都在控制器（Controller）里面。我在项目中使用了 MVC 架构的 PHP 框架CodeIgniter。　　我一边打开他的网站，一边继续跟他电话沟通。当看到网站的 CSS 代码都直接内嵌在 HTML 头部的时候，我忍不住问他：为什么您的网站的 CSS 代码都内嵌在 HTML 里面呢，是使用自动化工具合并进去的吗？他支支吾吾地说：因为在本地调试的时候，CSS 文件修改经常不生效，所以就直接在 HTML 里面改了，这样比较快。