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

    1em=16px(但不完全是)

    em会继承父元素的字体大小。
    ie 部分浏览器不支持em。

    rem继承根元素的字体大小html。 px和rem

    vue里面用jq只能在mounted里面或者updata里面才可以原因是:dom已经挂载。


    什么是web语义化有什么好处?

    Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

    web前端性能优化总结:
    1、减少http请求,合理设置 HTTP缓存
    2、使用浏览器缓存
    3、在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。
    4、CSS Sprites
    5、LazyLoad Images
    6、CSS放在页面最上部,javascript放在页面最下面
    7、异步请求Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
    8、减少cookie传输
    9、CDN加速 CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存

    性能优化的具体方法(way)
    一)内容层面
    1、DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)
    2、避免重定向(/还是需要的)
    3、切分到多个域名
    4、杜绝404

    网络传输阶段
    1、减少传输过程中实体的大小
    1)缓存
    2)cookie优化
    3)文件压缩(Accept-Encoding:g-zip)

    2、减少请求的次数
    1)文件适当的合并
    2)雪碧图

    3、异步加载(并发,requirejs)
    4、预加载、延后加载、按需加载

    渲染阶段
    1、js放底部,css放顶部
    2、减少重绘和回流
    3、合理使用Viewport 等meta头部
    4、减少dom节点
    5、BigPipe

    脚本执行阶段
    1、缓存节点,尽量减少节点的查找
    2、减少节点的操作(innerHTML)
    3、避免无谓的循环,break、continue、return的适当使用
    4、事件委托

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

  • 相关阅读:
    js判断是否第一次访问跳转
    dt系统中tag如何使用like与%来进行模糊查询
    DT图库列表修改内容标题字数
    第二周冲刺第四天个人博客
    04《梦断代码》阅读笔记01
    第二周冲刺第三天个人博客
    03《构建之法》阅读笔记03
    第二周冲刺第二天个人博客
    02《构建之法》阅读笔记02
    第二周冲刺第一天个人博客
  • 原文地址:https://www.cnblogs.com/lhl66/p/7822624.html
Copyright © 2011-2022 走看看