前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说。 HTML、CSS、JS、AJAX 等前端技术开发的 Web 页面 服务端数据返回、网络传输、页面渲染等 计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间指 ...
分类:
Web程序 时间:
2018-04-26 21:09:17
阅读次数:
207
1. 减少http请求数常用的减少http请求数有以下几种:1)合并图片。当图片较多时,可以合并为一张大图,从而减少http请求数。经常变化的图片可能不太合适,变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外,还可以充分利用缓存来提升性能。2)合并压缩css样式表和js脚本,他们的共同目的都是为了减少http连接数。3)去掉不必要的请求。开发写代码或者系统升级之后残留的无效
分类:
其他好文 时间:
2018-04-25 15:21:57
阅读次数:
143
HTTP是一种客户端/服务器协议,由请求和响应构成。浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应。该协议使用简单的纯文本格式。请求的类型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE。 前端性能优化十四个规则: 1. 减少HTTP请 ...
分类:
其他好文 时间:
2018-03-30 12:19:54
阅读次数:
155
1、压缩图片 2、减少冗余代码 3、避免404错误 4、避免滤镜的使用 5、在HTML中不要使用压缩图片 6、DNS解析优化,DNS缓存,减少DNS查找。 7、异步加载(并发、require) 8、预加载、延迟加载,按需加载 9、减少重绘和回流 10、减少DOM节点 11、减少节点的操作(inner ...
分类:
其他好文 时间:
2018-03-24 17:31:34
阅读次数:
200
Web前端性能优化的9大问题 1、请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器 ...
分类:
Web程序 时间:
2018-03-24 15:19:42
阅读次数:
200
很好地一篇文章,转过来。 前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用 ...
分类:
其他好文 时间:
2018-03-22 13:36:32
阅读次数:
224
前端性能优化中图片资源的优化。 1.懒加载(延迟加载) 1.图片进入可视区域之后请求图片资源; 2.对于电商等图片较多,页面很长的业务场景很适用; 3.可以减少无效资源的加载; 4.并发加载的资源过多会阻塞js的加载,影响网站的正常使用; 懒加载的要点就是img标签src属性为空(占位图),给一个d ...
分类:
其他好文 时间:
2018-03-15 17:57:57
阅读次数:
224
1、减少HTTP请求次数:css雪碧图,字体图标,代码压缩,图片大小控制,CDN托管、data缓存、图片服务器 2、前端模版+js数据,减少由于HTML标签导致的带款浪费 3、减少页面重绘,用innerHtml替代DOM操作 4、减少IO读取的操作:少用全局变量、缓存DOM节点查找的结果 5、避免使 ...
分类:
其他好文 时间:
2018-03-07 20:19:17
阅读次数:
164
摘要: 前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,我们常常竭尽全力进行前端页面优化,但却忽略了这样做的效果和意义。先不急于探究前端优化具体可以怎样去 ...
分类:
其他好文 时间:
2018-03-01 19:49:28
阅读次数:
207
相对于桌面端浏览器,移动端Web浏览器上有一些较为明显的特点:设备屏幕较小、新特性兼容性较好、支持一些较新的HTML5和CSS3特性、需要与Native应用交互等。但移动端浏览器可用的CPU计算资源和网络资源极为有限,因此要做好移动端Web上的优化往往需要做更多的事情。首先,在移动端Web的前端页面 ...
分类:
移动开发 时间:
2018-03-01 19:44:37
阅读次数:
222