如何提升前端性能优化
前端编程代码精简、易维护性、跨浏览器适应性是至关重要的议题。从实际工程项目角度考虑，最常见的前端性能优化问题。前端性能提升的法则，基本上涵盖了当前前端大多数的性能优化准则，众多更为专业和细致的优化手段均源自这些原则。
前端性能提升有哪些法则
1. 减少HTTP请求次数
2. 尽量合并图片、CSS、JS。例如，若一个页面有5个CSS文件，将其合并为一个，则仅需发起一次HTTP请求，节省网络请求时间，加速页面加载。
3. 使用CDN
4. 避免无效的src和href
5. 为文件头部指定过期时间
6. 使用gzip压缩内容
7. 将CSS置于顶部
8. 将JS置于底部
9. 避免使用CSS表达式
10. 将CSS和JS置于外部文件中
11. 权衡DNS查找次数
12. 精简CSS和JS
13. 避免跳转
14. 删除重复的JS和CSS
15. 配置ETags
16. 可缓存的AJAX
17. 使用GET完成AJAX请求
18. 减少DOM元素数量
19. 避免出现404错误
20. 减少Cookie大小
21. 使用无cookie的域
22. 避免使用滤镜
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，EarlyFlushBuffer
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培训官网。最后，祝愿小伙伴们工作顺利！
