zoukankan      html  css  js  c++  java
  • Web—10-前端性能优化

    前端性能优化

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

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

    一、代码部署:

    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、使用字体图标
    7、使用css sprite(雪碧图)
    8、使用svg图形
    9、避免使用CSS表达式 
    body{
     background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
    }
    10、避免使用css滤镜
    
    javascript:
    1、减少引用库的个数
    2、使用requirejs或seajs异步加载js
    3、JS放到页面底部引入
    4、避免全局查找
    5、使用原生方法
    6、用switch语句代替复杂的if else语句
    7、减少语句数,比如说多个变量声明可以写成一句
    8、使用字面量表达式来初始化数组或者对象
    9、使用innerHTML取代复杂的元素注入
    10、使用事件代理(事件委托)
    11、避免多次访问dom选择集
    12、高频触发事件设置使用函数节流
    13、使用Web Storage缓存数据
    
  • 相关阅读:
    转:Windows 7下安装CentOS双系统
    STL学习总结之<迭代器>
    转:linux静态库与动态库
    指向类成员和成员函数的指针
    STL学习总结之<仿函数>
    转:Linux Crontab 定时任务 命令详解
    转: 解决 Redhat 出现”This system is not registered with RHN”更新
    IOS 判断设备屏幕尺寸、分辨率
    IOS 文件管理共通函数整理
    IOS 编译ffmpeg For SDK6.1,模拟器、armv7、armv7s均可使用
  • 原文地址:https://www.cnblogs.com/swjblog/p/9858990.html
Copyright © 2011-2022 走看看