![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
性能优化
文章平均质量分 69
qq_33203555
这个作者很懒,什么都没留下…
展开
-
web前端性能优化
作为一个前端工程师,性能优化是很有必要的。好的用户体验能一定程度上决定产品的命运。而提升用户体验有很多方面,比如,界面设计,操作设计,网页加载性能等。。。 提升性能我们可以从如下几个方面考虑:减少http请求合理设置 HTTP缓存在动态网页中,我们难免会与后台服务器交互,减少http请求的数目在性能提升上是十分明显的。比如我们可以:简化步骤,将请求数据尽可能的封装在少的接口中,当然这是不破坏程序原创 2017-09-18 23:14:46 · 336 阅读 · 0 评论 -
JS异步加载方案
defer与asyncdeferhtml4为script标签定义了一个扩展属性:defer。defer指明本元素所含的脚本不会修改dom,因此代码能安全地延迟执行。但是该属性并不是一个理想的跨浏览器解决方案。该属性只有IE4+和firefox3.5+的浏览器支持。用法如下:<script type='text/javascript' src='test.js' defer></script>带有原创 2017-09-20 23:03:17 · 436 阅读 · 0 评论 -
JS中的事件委托
事件委托利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。这有效地解决了以下问题: 1、事件处理程序过多的问题。 2、dom元素移除而事件处理程序未垃圾回收,导致性能变差。 3、新增的dom元素需要重新绑定事件处理程序。 如果我们不采用事件委托,很可能像如下这样绑定事件处理程序:<ul id="menu"> <li class='item'>1</li>原创 2017-10-27 22:15:34 · 252 阅读 · 0 评论 -
图片懒加载
图片懒加载在一定程度上可以大大优化性能,增强用户体验。主要就是当图片在可视区域时再加载真实的图片,不在时用一张图片代替。具体代码如下://节流函数用于滚动时避免多次执行加载图片函数var throttle = function(){ //获取第一个参数 var isClear = arguments[0],fn; //如果第一个参数是boolean类型那么第一个参数则...原创 2019-04-10 15:51:45 · 307 阅读 · 0 评论 -
性能优化gzip压缩
gzip压缩可以提升资源加载40%以上得性能。gzip压缩需要资源为.gz得文件。同时服务器需要设置开启gzip压缩。本文介绍webpack构建得项目中开启gzip压缩,以及nginx配置gzip。如下是开启gzip压缩前后得网页加载对比由上图可知,vendor的那个js加载时间从8.64s缩短到了4.82秒,可见gzip压缩对于性能提升的作用很大。1、webpack开启gzip压缩在...原创 2019-04-26 14:35:03 · 1127 阅读 · 0 评论