写代码的我-CSDN博客

原创 web新能优化五-图片的预加载

什么是预加载，以及预加载的优点是什么？图片等静态资源在使用之前的提前请求资源使用到时能从缓存中加载，提升用户体验页面展示的依赖关系维护首先预加载第一种实现方式可以是这样子滴 <img src="http://pic26.nipic.com/20121213/6168183_00444490

2017-12-02 21:48:53 1508

原创 web新能优化四-图片的懒加载

在做web端开发的时候，有些场景是需要加载很多资源的，比如图片、css、js等，举个例子来说，在电商网站，需要很多图片，但是浏览器并行加载资源的能力是有限的，这就需要我们思考如何能在不影响用户体验的情况下解决这个问题，从而提高用户体验，今天这篇文章主要是讲解图片的懒加载和预加载实现原理懒加载实现原理先看一张图当我们的图片不在可视区域内，浏览器不会加载图片资源，当我们的图片进入可视区域

2017-12-02 19:43:21 570

原创 web性能优化三图片的相关优化

有损压缩-一张jpg图片的解析过程，损失的信息不会构成用户使用困扰可以看出，在一张紧jpg解析过程中会有损失，但是图片的损失还不会影响到用户的视觉 png8/png24/png32之间的区别 png8 png24 png32 256色 2^24色 2^24色支持透明不支持透明支持透明文件小介于两者之间文件大在实际项目中选择png图片

2017-11-30 22:42:23 402

原创 web性能优化二-文件压缩与混淆

html 压缩html压缩使用在线网站进行压缩在线压缩工具 nodejs提供的html-minifier工具后端模板引擎渲染压缩（ejs /jade模板引擎） gulp/webpack等构建工具提供的插件的压缩 css压缩首先对无效代码的删除，减少文件的大小，提升css渲染速度;对css语义进行合并使用在线网站进行压缩在线压缩工具；使用html-minifier对html中的css进行

2017-11-28 15:30:41 506

原创 web性能优化一

web性能优化对于任何大型项目都是必不可少的一环，那么如何做好web端的性能优化，从哪些方面入手？这些问题猛地提出来会让很多人有无从下手的感觉，那么接下来，我结合一些前辈发表的文章并总结下个人的性能优化经验，系统性的总结从哪些方面入手。首先提出一个问题：浏览器的一个请求从发送到返回都经历了什么？一个简单的流程：第一步：浏览器提出域名解析请求,并将该请求发送给本地的域名服务器（domai

2017-11-28 13:50:12 389

转载 css解决input里面光标位置靠上问题

在Chrome浏览器中，当设置了line-height时，input无文字，光标高度与line-height一致；input有文字，光标高度从input顶部到文字底部。当没有设置line-height时，则是与font-size一致。想让光标居中的解决方案是：让input的高度等于里面文字的高度，然后用padding把框撑起来，这样光标的高度和位置就固定了。如：input{ heig

2017-01-04 10:24:15 3525

小小程序猿