• 网站性能优化


    1、资源压缩合并

    (1)图片:雪碧图

    (2)JS、CSS合并:利用项目构建工具webpack、grunt、gulp等。


    2、加快渲染

    CSS前置

    3、减少DOM操作

    (1)将DOM节点放入局部变量

    (2)内存中操作元素,使用文档片段

    document.createDocumentFragment()

    PS:这样做的优点是只会触发一次回流

    (3)一次性DOM节点生成

    通过innerHTML属性一次性生成节点,使用字符串拼接的方式,先生成相应的HTML字符串,再一次性写入innerHTML中。

    (4)通过类来修改样式

    (5) 使用事件代理


    4、减少HTTP请求

    (1)keep-Alive模式(持久连接)

    每个请求,应答客户和服务器都要新建一个连接,完成后立刻断开,持久连接模式使客户端到浏览器的连接持续有效,后续请求时避免了建立或者重新建立连接。

    PS:HTTP1.1版本支持

    (2)管线化

    在持久连接的前提下,通过将请求一次性打包发出,有效减少HTTP请求。

    PS:a)只有GET和HEAD请求可以实现管线化,POST有一定的限制;

            b)初次进行请求时不应该启动管线机制,因为服务器不一定支持HTTP1.1版本。


    5、非核心代码异步加载

    (1)<script>标签,动态脚本加载

    (2)<script defer>

    异步加载,后续文档元素和脚本文件同时加载,js脚本的执行要等到文档所有元素加载完后执行

    PS:IE只支持defer

    (3)<script async>

    异步加载,后续文档元素和脚本文件同时加载,加载完后自动执行js脚本。


    6、利用浏览器缓存

    (1)强缓存

    不请求服务器直接读取文件。

    HTTP 1.0 采用Expires头指定资源过期时间;

    HTTP 1.1 采用Cache-Control指定资源被缓存多久;

    (2)协商缓存

    向服务器发起请求,如果资源并未更新,response响应码为304,随后从浏览器缓存中下载该文件。

    HTTP 1.0 采用Last-ModifiedIf-Modified-Since来指定资源过期时间;

    HTTP 1.1 采用E-TagIf-None-Match来确定该资源是否过期;


    7、使用CDN加速资源

    在页面第一次打开时缓存没有作用,使用CDN可以加速资源。


    8、DNS预解析

    (1)页面中所有a标签在浏览器中默认打开dns,如果页面为https,很多浏览器默认关闭dns,使用标签强制打开dns:

    <meta http-equiv="x-dns-prefetch" href=" ">

    (2)预解析

    <link rel="dns-prefetch" href=" ">

     

  • 相关阅读:
    符号表
    经典算法-堆排序
    AngularJs基础
    Echars详解
    经典算法-快速排序
    经典算法-递归
    异常分类,异常抛出位置
    js的数据类型具体分析
    函数
    数据
  • 原文地址:https://www.cnblogs.com/nerrol/p/8065592.html
Copyright © 2020-2023  润新知