田佳奇分享PDF：前端性能调优攻略，助力Web前端初学者提升优化技巧-链接买卖平台

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，提前刷新缓冲区
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培训官网。最后，祝愿小伙伴们工作顺利！
如何提升前端性能
前端开发代码优化、可维护性、浏览器兼容性是至关重要的课题。从实际工程应用的角度出发，最常见的前端优化问题。前端性能提升规则，基本可以涵盖当前前端大部分的性能优化原则，许多更加专业和精细的优化方法都是从这些原则中延伸出来的。
前端性能提升都有哪些规则
1，减少HTTP请求次数
2，尽量合并图片、CSS、JS。例如，加载一个页面有5个CSS文件，将这5个文件合并成一个，就只需要发出一次HTTP请求，节省网络请求时间，加快页面加载速度。
3，使用CDN
4，避免空的src和href
5，为文件头指定Expires
6，使用gzip压缩内容
7，将CSS放到顶部
8，将JS放到底部
9，避免使用CSS表达式
10，将CSS和JS放到外部文件中
11，权衡DNS查找次数
12，精简CSS和JS

这里就涉及到CSS和JavaScript的精简了。例如，新浪的一个CSS文件，通过去除所有空格和换行，减小文件体积。目前市面上有许多压缩工具，大多数主流的前端构建工具都能够对CSS和JavaScript文件进行压缩，例如Grunt、Gulp等。

避免页面跳转
有一种情况可能会让人感到困惑，表面上看似无差异，实则多进行了一次页面跳转。例如，当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记录）来替代。

删除重复的JavaScript和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次执行也会浪费资源。在IE和Firefox中，无论脚本是否可缓存，都存在重复执行JavaScript的问题。
配置ETag
它用于判断浏览器缓存中的元素是否与服务器上的一致。相较于last-modified date更具灵活性，例如某个文件在1秒内修改了10次，ETag可以综合Inode（文件的索引节点数）、MTime（修改时间）和Size来精确地进行判断，避免UNIX记录MTime只能精确到秒的问题。在服务器集群使用时，可取后两个参数。使用ETag可以减少Web应用的带宽和负载。
可缓存的AJAX
异步请求同样会造成用户等待，因此在使用AJAX请求时，要主动告知浏览器如果该请求有缓存就去请求缓存内容。如下代码片段，cache:true就是显式地要求如果当前请求有缓存的话，直接使用缓存
$.ajax({ url:'url', dataType:"json", cache: true, success: function(son, status){} });
使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加合理。
减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之，减少DOM数量，就会减轻浏览器的解析负担。
避免返回404
例如外链的CSS、JavaScript文件出现问题返回404时，会破坏浏览器的并行加载。
减小Cookie体积
Cookie中不要存储过多信息，因为每个请求都需要携带它。
使用无Cookie的域
例如CSS、JavaScript、图片等，客户端请求静态文件时，减少了Cookie的反复传输对主域名的影响。
不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时会终止内容的呈现并冻结浏览器。在每一个元素（不仅仅是图片）上都会进行一次计算，增加了内存消耗，因此它的问题是多方面的。