揭秘隐藏版的前端加速秘籍：深度解析前端性能提升之道
如何提升前端性能优化
前端编程代码优化、易维护性、浏览器适配性是至关重要的议题。从实际工程项目角度考虑，最常见的前端优化难题。前端性能提升的规则，基本上包含了当前前端大部分的性能优化准则，众多更高级和细致的优化策略均源自这些原则。
前端性能提升有哪些策略
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以上版本的用户无效。
22.不要在HTML中放大图片
比如你需要的图片尺寸是50 50
那就不用用一张500500的大尺寸图片，以免影响加载
23.缩小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培训官网。最后祝愿小伙伴们工作顺利！
