• 前端优化代码主要的几种方式!


    一、减少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; 
      }        
    }

  • 相关阅读:
    Postgresql HStore 插件试用小结
    postgres-xl 安装与部署 【异常处理】ERROR: could not open file (null)/STDIN_***_0 for write, No such file or directory
    GPDB 5.x PSQL Quick Reference
    postgresql 数据库schema 复制
    hive 打印日志
    gp与 pg 查询进程
    jquery table 发送两次请求 解惑
    python 字符串拼接效率打脸帖
    postgresql 日期类型处理实践
    IBM Rational Rose软件下载以及全破解方法
  • 原文地址:https://www.cnblogs.com/byk1112/p/7988547.html
Copyright © 2020-2023  润新知