提升网站加载速度的技巧分析：前端性能优化的策略详解
如何提升前端性能
前端编程代码优化、维护性、浏览器兼容性是至关重要的议题。从实际工程应用的角度来看，最常见的前端优化问题。前端性能提升的规则，基本上涵盖了当前前端大部分的性能优化原则，许多更为专业和细致的优化方法都是从这些原则中衍生出来的。
前端性能提升都有哪些策略
1. 减少HTTP请求次数
尽可能合并图片、CSS、JS。例如，一个页面有5个CSS文件，将其合并为一个，则只需发起一次HTTP请求，节省网络请求时间，加快页面加载速度。
2. 使用CDN
网站上的静态资源，如CSS、JS和图片，都使用CDN分发。
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空时，浏览器在渲染时会将当前页面的URL作为它们的属性值，从而加载页面内容作为它们的值。因此，应避免此类疏忽。
4. 为文件头指定Expires
Expires用于设置文件的过期时间，通常对CSS、JS和图片资源有效。它可以使内容具有缓存性，这样在下一次访问相同的资源时，就可以通过浏览器缓存区读取，无需再次发起HTTP请求。
5. 使用gzip压缩内容
gzip可以压缩任何文本类型的响应，包括HTML、XML和JSON。这可以大大缩小请求返回的数据量。
6. 将CSS放到顶部
网页上的资源加载是从上到下顺序进行的，因此将CSS放在页面顶部可以优先渲染页面，让用户感觉页面加载很快。
7. 将JS放到底部
加载JS时会对后续的资源造成阻塞，必须等待JS加载完毕才能加载后续文件，因此将JS放在页面底部最后加载。
8. 避免使用CSS表达式
例如，以下CSS表达式的例子：
font-color: expression((new Date()).getHours()%3?"#FFFFFF":"#AAAAAA");
这个表达式会持续在页面上计算样式，影响页面性能。并且CSS表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件，可以参考原则4。但有时为了减少请求，也会直接写入页面，需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机名会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE用户的图片下载速度就会受到影响。因此，新浪会使用多个二级域名来放置图片。
下面是新浪微博的图片域名，我们可以看到它有多个域名，这样可以确保这些不同域名可以同时下载图片，而无需排队。但是，如果使用的域名过多，响应时间就会变慢，因为不同域名的响应时间不一致。
11. 精简CSS和JS
这涉及到CSS和JS的压缩。例如，以下新浪的一个CSS文件，将空格和换行符全部删除，减少文件大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行CSS和JS文件的压缩，如grunt、glup等。
12. 避免跳转
有一种现象可能会很麻烦，看起来没什么差别，实际上进行了一次页面跳转。例如，当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http:// baidu.com时，实际上返回的是一个包含301代码的跳转，它指向的是http:// baidu.com/（注意末尾的斜杠）。在nginx服务器中可以使用rewrite；Apache服务器中可以使用Alias或者mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转，例如访问http:// baidu.com/bbs跳转到http:// bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另一个域名之间关系的DNS记录）来替代。
13. 删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中，不管脚本是否可缓存，都存在重复运算JavaScript的问题。
14. 配置ETags
它用于判断浏览器缓存中的元素是否与服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode（文件的索引节点(inode)数）、MTime（修改时间）和Size进行精确判断，避免UNIX记录MTime只能精确到秒的问题。在服务器集群使用时，可以取后两个参数。使用ETags减少Web应用带宽和负载。
15. 可缓存的AJAX
异步请求同样会造成用户等待，因此在使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段，cache:true就是显式地要求如果当前请求有缓存的话，直接使用缓存
$.ajax({ url:'url', dataType:"json", cache: true, success: function(son, status){} });
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之，大原则是减少DOM数量，这样可以减少浏览器的解析负担。
18. 避免404
例如，外链的CSS、JS文件出现问题返回404时，会破坏浏览器的并行加载。
19. 减少Cookie的大小
Cookie里面不要塞太多东西，因为每个请求都得带着它跑。
20. 使用无cookie的域
例如，CSS、JS、图片等，客户端请求静态文件时，减少了Cookie的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
IE专有属性AlphaImageLoader用于纠正7.0以下版本中PNG图片的半透明显示问题。此滤镜的缺陷在于，当浏览器加载图片时，它会中断内容的展示并使浏览器冻结。它会在每个元素（不仅仅是图片）上执行一次计算，增加了内存消耗，因此问题涉及多个方面。
完全避免使用AlphaImageLoader的最佳策略是使用PNG8格式替代，这种格式在IE中表现良好。如果确实需要使用AlphaImageLoader，请使用下划线_filter属性，使其对IE7以上版本的用户无效。
-
避免在HTML中调整图片大小
例如，你需要的图片尺寸是5050
那么就无需使用一张500500的大尺寸图片，以免影响加载速度。
-
缩小favicon.ico并缓存
如何进行Web前端性能优化
本文将探讨Web前端新手如何进行性能优化？影响用户访问的主要因素是前端页面。网站的构成通常分为两部分：前端和后端。我们可以理解为后端负责实现网站功能，例如：用户注册，用户可以为文章发表评论等。而前端呢？实际上应该属于功能展示。
我们建设网站的目的是什么？不就是为了吸引目标用户访问吗？因此，我们可以理解为前端才是真正与用户接触的部分。
除了后端需要在性能上优化外，前端的页面更需要在性能优化上投入精力，这样才能为用户提供更好的体验。不仅如此，如果前端优化得当，不仅可以为企业节省成本，还能吸引更多用户，因为良好的用户体验。
说了这么多，那么我们应该如何对前端页面进行性能优化呢？
前端性能优化方法：
一、内容方面
1. 减少HTTP请求：合并文件、CSS精灵、内联图片
2. 减少DNS查询：在DNS查询完成之前，浏览器不能从该主机下载任何文件。方法：DNS缓存、将资源分布到适当数量的主机名，平衡并行下载和DNS查询
3. 避免重定向：减少不必要的中间访问
4. 使Ajax可缓存
5. 延迟加载非必须组件
6. 预加载未来所需组件
7. 减少DOM元素数量
8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
9. 减少iframe数量
10. 避免404错误
二、服务器方面
1. 使用CDN
2. 添加Expires或Cache-Control响应头
3. 对组件使用Gzip压缩
4. 配置ETag
5. FlushBufferEarly
6. Ajax使用GET进行请求
7. 避免空src的img标签
三、Cookie方面
1. 减小Cookie大小
2. 引入资源的域名不包含Cookie
四、CSS方面
1. 将样式表放到页面顶部
2. 不使用CSS表达式
3. 不使用import
4. 不使用IE的Filter
五、JavaScript方面
1. 将脚本放到页面底部
2. 将javascript和css从外部引入
3. 压缩javascript和css
4. 删除不需要的脚本
5. 减少DOM访问
6. 合理设计事件监听器
六、图片方面
1. 优化图片：根据实际颜色需求选择色深、压缩
2. 优化CSS精灵
3. 不要在HTML中调整图片大小
4. 保证favicon.ico小且可缓存
七、移动端
1. 保证组件小于25k
2. 将组件打包成一个多部分文档
以上就是本文关于Web前端新手如何进行性能优化的分享，希望对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端知识，请关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
