web性能优化

js方面

  1、js代码优化

    a、减少dom操作 比如document.getElementByTagName('div')等获得的集合是一个动态集合,每次访问都需要重新执行这个查询而更新动态结果,遍历时可将其转为数组或保存其length属性;

    b、减少作用域查找(少使用全局变量和闭包)

  2、减少reflow和repaint(只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会 引起浏 览器 repaint(重绘)。repaint 的速度明显快于 reflow)

  3、js文件放尾部

css方面

  1、css选择符优化(css选择符是从右向左解析,尽量避免多层嵌套),少使用通配符选择器(*是给所有标签加上样式,在设置之前会遍历所有标签,性能差)

  2、css文件放头部

加载图片方面:

  1、CSS Sprites技术将多个图片整合到一个图片

  2、使用图片懒加载

http请求方面

  1、减少http请求(合并css文件,js文件,图片等,减少请求次数)

  2、数据交换使用json格式(JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,同时便于解析)

  3、压缩文件,减小文件大小

服务器方面:

  1、使用缓存(通过设置http头的cache-control和expires属性实现)

  2、使用CND加速(CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上)

 

posted on 2018-10-26 11:34  myMaria  阅读(89)  评论(0)    收藏  举报

导航