zoukankan      html  css  js  c++  java
  • 前端性能优化

    从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。

    前端性能优化分为如下几个方面:

    一、代码部署

    1、代码的压缩与合并

    2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。

    3、使用内容分发网络CDN

    4、为文件设置Last-Modified【上次访问时间】、Expires【过期事件】和Etag(为文件做本地的缓存)

    5、使用GZIP压缩传送

    6、权衡DNS查找次数(使用不同域名会增加DNS查找)

    7、避免不必要的重定向(加"/")

    二、编码

    html

    1、使用结构清晰,简单,语义化标签

    2、避免空的src和href

    3、不要在HTML中缩放图片

    css

    1、精简css选择器

    2、把CSS放在顶部

    3、避免@import方式引入样式

    4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:http://tool.css-js.com/base64.html

    5、使用css动画来取代javascript动画

    6、使用字体图标,图标库网站:http://fontawesome.io/icons/,在线制作网站:www.iconfont.cn

    7、使用css sprite(使用雪碧图)

    8、使用svg图形

    9、避免使用css表达式   a{star:expression(onfous=this.blur)}

    10、避免使用滤镜(filter)

    javascript

    1、减少引用库的个数

    2、使用requirejs或seajs异步加载js

    3、JS放到页面底部引入

    4、避免全局查找($("#div1 span");

    5、减少属性查找

    6、使用原生方法(document.getElementById("div1");)

    7、用switch语句代替复杂的if else语句

    8、减少语句数,比如说多个变量声明可以写成一句

    9、使用字面量表达式来初始化数组或者对象

    10、使用DocumentFragments或innerHTML取代复杂的元素注入

    11、使用事件代理(事件委托)

    12、避免多次访问dom选择集(把常用的元素存在一个变量中。var $li = $("#ul li");)

    13、高频触发事件设置使用函数节流,如:onmousemove、onmouseover

    14、使用Web Storage缓存数据

    15、使用Array的join方法来替代字符串的"+"连接(先将要连接的字符串放在数组)

     

    常用此方法:

  • 相关阅读:
    hihocoder-1014 Trie树
    51Nod-1265 四点共面
    cf466B Wonder Room
    2014.9.13模拟赛【数位和乘积】
    2014.9.13模拟赛【环上的游戏】
    bzoj2719[Violet 4]银河之星
    wikioi1450 xth的旅行
    poj2352 stars
    2014.9.6模拟赛【藏妹子之处】
    2014.9.6模拟赛【工资】
  • 原文地址:https://www.cnblogs.com/qijunjun/p/7245034.html
Copyright © 2011-2022 走看看