前端性能优化有哪些,有没有前端性能优化知识推荐？

包括css和js 前端性能优化有哪些,有没有前端性能优化知识推荐？

如果我们在打开一个网站时速度很慢，势必会影响体验，甚至会造成用户流失、浏览量下降的情况。想要解决这个问题自然就需要Web前端开发人员对前端页面进行优化，众所周知，前端的页面主要包括HTML、CSS、JS等，想要解决这个问题。我建议可以从以下几个方面入手。

前端性能优化有哪些,有没有前端性能优化知识推荐？

1、减少HTTP请求达到性能优化

改善响应时间最简单的途径就是减少HTTP请求的数量次数。

2、使用字体图标

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。

3、合并脚本和样式表

将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间。不过合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说可能导致反而增加了下载量。

4、CSS Sprites技术

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，然后通过CSS background背景定位技术技巧布局网页背景。这样一来，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

5、页面渲染优化

在编写前端页面的时候，把CSS资源引用代码放到HTML文件的头部，这样浏览器可以优先下载CSS并尽早完成页面渲染！JavaScript的引用代码放到HTML文件底部，防止JS的加载和解析执行对页面渲染造成阻塞！

前端性能优化有哪些,有没有前端性能优化知识推荐？

6、手机端优化

在移动端访问时，不一定有WiFi，偶尔网络速度会比较慢，因此为了加快完成页面的加载，需要保证首屏加载资源最小化。不是首页面的数据，我们可以采用异步加载或者滚动加载。

7、页面缓存优化

合理利用浏览器缓存可以大大提高页面中静态资源的加载速度

8、图片优化

在手机端上比较重要，尽量不要以原图的形式直接使用，因为那样很消耗流量，而且加载时间更长！使用较小的图片或者压缩后的图片，不仅能尽快完成加载还能节省流量。

以上就是我分享的Web前端页面优化的几个技巧。对前端页面进行优化是前端工程师在工作中经常处理的问题之一，前端工程师能做的还有更多。

前端性能优化有哪些,有没有前端性能优化知识推荐？

web长页面如何优化？

微博和空间聚集了大量的图片和视频如果整页渲染会非常占用内存，这种情况应该如何优化呢？前端性能优化有哪些,有没有前端性能优化知识推荐？

想要成为一名合格的Web前端工程师，Web前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？

1、CSS精灵

CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2、代码压缩

（1）将table改为div布局

尽量将table标签布局HTML重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的HTML网页，所以搜索引擎索引权重也优于table布局的HTML网页。

（2）缩减精简div、span、ul、li等系列标签

布局DIV+CSS网页时候，有时候可以节约一些DIV布局代码，减少代码量。

（3）删除多余空格

删除多余空格换行，可以有效地压缩HTML代码占用字节，一般在开发完成后可以对HTML中代码进行删除换行和空格内容。

（4）表格类型布局时候适当使用table替代div布局

如果是本身是表格数据列表排版，我们最好选择table，因为表格布局使用table优于div布局，使用table布局却比div布局节约HTML标签代码和节约CSS样式。

（5）网页GZIP压缩

自己的服务器推荐设置网页Gzip压缩功能。

3、高质量的JS代码肯定能省很多事，封装JS以及重复调用方法能够减少很多操作。

4、减少对DOM的操作

（1）创建临时父元素。

（2）创建子元素，并添加内容，设置属性。

（3）把子元素加入到临时父元素中。

（4）把临时父元素添加到DOM树。

或：（1）找到要添加位置的元素。

（2）改变该元素内容为需要的HTML。

5、使用JSON格式来进行数据交换

原理：JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

6、高效使用HTML标签和CSS样式

7、使用CDN加速（内容分发网络）

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

8、精简CSS和JS文件

9、注意控制Cookie大小和污染

本人后台开发，前端说改个东西要两天，但我感觉撑死2小时，怎么办？

本人有五年前台开发经验，2年后台开发经验，实际上我觉得后台可能比前台还要容易，在不考虑比较深的技术壁垒的情况下，前台有原型图，我需要百分百还原，再加上画面特效，用户操作特效等挺麻烦的，有时候一个小小的点卡半天很正常，只要不是特别简单的需求，说随便两个小时搞好的我是不怎么相信的。转后台之前，本来以为很难，结果后台写起来真的就是好快，我经常做到无聊到没事做把人家的活揽过来一起做，后来还是前后台一起搞了，后台框架搭好以后，剩下的只是业务接口实现而已。总的来说，前台入手容易精通难，后台更多偏向框架的灵活使用。不要瞧不起前台，特别是某些后来开发人员觉得不就是写个界面么？但我想说界面的逻辑不比后台简单，前几年曾经去参加一个公司的面试，以后后开发人员跟我在那装，一个劲的说就是前台而已，很简单的事情，说了好多次，把我说烦了，我就跟他探讨前后台，屁都不懂的面试官，就一新生蛋子，最后我说你公司连面试官都这水平，与我期望不符合，要过来简历就撤了，带着有色眼镜看待技术的人一般都是那种一知半解，一瓶子不满，半瓶子晃悠的人