zoukankan      html  css  js  c++  java
  • 前端优化代码主要的几种方式!

    一、减少HTTP请求

    1.合并CSS、js:每次调用js、css都要发送一次http请求,所以并不是分开写好几个文件比较好

      js、css压缩。js压缩可以用grunt

    HTML优化:

    • 使用语义化标签
    • 减少iframe:iframe是SEO的大忌,iframe有好处也有弊端
    • 避免重定向

    CSS优化:

    • 删除空样式
    • 不滥用浮动,字体,需要加载的网络字体根据网站需求再添加
    • 选择器性能优化
    • 避免使用表达式,避免用id写样式

    js优化:

    • 压缩
    • 减少重复代码

    2.图片优化

    • 图片合并,CSS sprite技术
    • 不要在html中使用缩放图片
    • 用更小的并且可缓存的 favicon.ico
    • 缩小图片分辨率;
    • 改变图片格式,推荐PNG格式;
    • 降低图片保存质量。

    二、减少DOM操作

    减少对DOM元素的查询和修改,jquery也是有弊端的

    方法:

    • 缓存已经访问过的元素 
    • "离线"更新节点, 再将它们添加到树中
    • 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 

    三、使用JSON格式来进行数据交换

    JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

      与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小

    注意json的格式一定要严格符合标准

    四、js、css文件的加载顺序

    css放在<head>里,

    js放在<body>结束前:浏览器在执行JavaScript代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。

      因为这个阻塞的特点,建议把JavaScript代码放到</body>标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。

    五、控制cookie大小和污染、session不要存入大数据

    Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie

    使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

    针对 Web 组件使用域名无关性的 Cookie

    设置合理的生命周期,清除时期

    session是存在服务器的,所以如果存入大量的数据会给服务器带来很大的压力

    六、 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)
    各个浏览器都有针对的方案, Apache 例子【注意:下面的说明例子还不够精细,具体的环境上还要加一些调整】:

    ExpiresActive On
    ExpiresByType image/gif "modification plus 1 weeks"Lighttpd 启用 mod_expire 模块 后:

    $HTTP["url"] =~ ".(jpg|gif|png)___FCKpd___1quot; {
         expire.url = ( "" => "access 1 years" )
    }Nginx 例子参考:

    location ~* .(jpg|gif|png)$ {
      if (-f $request_filename) {
            expires      max;
        break; 
      }        
    }

  • 相关阅读:
    CVPR顶会热词统计
    @Annotation学习
    把一张表已有的数据对另一张表数据进行修改
    两张表数据不一致进行对比
    学习借鉴
    借鉴tcp
    借鉴tcp
    osi七层
    http学习
    Json学习
  • 原文地址:https://www.cnblogs.com/byk1112/p/7988547.html
Copyright © 2011-2022 走看看