扫码关注公众号
列举你知道的Web性能优化方法。
(1)压缩源码和图片(JavaScript采用混淆压缩,CSS进行普通压缩,JPG图片根据具体质量压缩为50%~70%,把PNG图片从24色压缩成8色以去掉一些PNG格式信息等)。(2)选择合适的图片格式(颜色数多用JPG格式,而很少使用PNG格式,如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式)。(3)合并静态资源(减少HTTP请求)(4)把多个CSS合并为一个CSS,把图片组合成雪碧图。(5)开启服务器端的Gzip压缩(对文本资源非常有效)。(6)使用CDN(对公开库共享缓存)。(7)延长静态资源缓存时间。(8)把CSS放在页面头部把JavaScript代码放在页面底部(这样避免阻塞页面渲染而使页面出现长时间的空白)。
如何优化服务器端的接口?
(1)接口合并:如果一个页面需要请求两部分以上的数据接口,则建议合并成一个以减少HTTP请求数。(2)减少数据量:去掉接口返回的数据中不需要的数据。(3)缓存数据:首次加载请求后,缓存数据;对于非首次请求,优先使用上次请求的数据,这样可以提升非首次请求的响应速度。
jQuery性能优化如何做?
(1)使用最新版本的jQuery类库。JQuery类库每一个新的版本都会对上一个版本进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery类库提高性能。不过需要注意的是,在更换版本之后,不要忘记测试代码,毕竟有时候不是完全向后兼容的。(2)使用合适的选择器。jQuery提供非常丰富的选择器,选择器是开发人员最常使用的功能,但是使用不同选择器也会带来性能问题。建议使用简凖选择器,如i选择器、类选择器,不要将i选择器嵌套等。(3)以数组方式使用jQuery对象。使用jQuery选择器获取的结果是一个jQuery对象。然而,jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单的for或者while循环来处理,而不是$.each(),这样能使代码更快。(4)每一个JavaScript事件(例如click、mouseover等)都会冒泡到父级节点。当需要给多个元素绑定相同的回调函数时,建议使用事件委托模式。(5)使用join()来拼接字符串。使用join()拼接长字符串,而不要使用“+”拼接字符串,这有助于性能优化,特别是处理长字符串的时候。(6)合理利用HTML5中的data属性。HTML5中的data属性有助于插入数据,特别是前、后端的数据交换;jQuery的data()方法能够有效地利用HTML5的属性来自动获取数据。
哪些方法能提升移动端CSS3动画体验?
(1)尽可能多地利用硬件能力,如使用3D变形来开启GPU加速,例如以下代码。-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);一个元素通过translate3d右移500X的动画流畅度会明显优于使用left属性实现的动画移动,原因是CSS动画属性会触发整个页面重排、重绘、重组。paint通常是最耗性能的,尽可能避免使用触发paint的CSS动画属性。如果动画执行过程中有闪烁(通常发生在动画开始的时候),可以通过如下方式处理。-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;(2)尽可能少使用box-shadows和gradients,它们往往严重影响页面的性能,尤其是在一个元素中同时都使用时。(3)尽可能让动画元素脱离文档流,以减少重排,如以下代码所示。position:fixed;position:absolute;