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

    一、为什么要做性能优化?

    1、加快页面展示和运行速度(增强用户体验)

    2、节约服务器带宽流量

    3、减少服务器压力

    二、先分析一个页面从发起请求到展示到用户大概流程:

    1、DNS 查询

    2、发送 HTTP 请求

    3、等待服务器响应

    4、下载服务器响应内容

    5、解析 HTML、CSS、JS

    6、渲染 HTML、CSS、JS 和图片

    7、响应用户事件

    1、针对 DNS 查询优化

    减少网站所用的域名个数(现代浏览器基本都具备并行下载),减少 DNS 查询时间建议一个网站使用至少 2 个域,但不多于 4 个域来提供资源

    2、针对发送方面的请求优化

    localStorage(本地存储)静态资源打包,开启 Gzip 压缩(节省响应流量)Cookie 隔离(节省请求流量)使用 CDN 加速(访问最近服务器)

    3、针对等待服务器响应方面的优化

    合理设置 HTTP 缓存:Etag 与 Cache-control启用 HTTP/2(多路复用,并行加载)优化数据库查询部署负载均衡

    4、针对下载服务器响应内容优化

    用 CSS3 实现图片,对小图标进行 base64(降低请求数)延迟(defer)加载/异步(async)加载依赖针对解析 HTML、CSS、JS优化去掉无用的 HTML、CSS 和 JS优化首屏时间:脚本后位置、图片压缩、懒加载

    5、针对渲染 HTML、CSS、JS 和图片优化

    最小化重绘(repaint)和回流(reflow):批量修改元素样式、避免 table 布局等针对响应用户事件优化尽量不在前端做复杂的运算

    转自https://baijiahao.baidu.com/s?id=1589456719510687604&wfr=spider&for=pc

  • 相关阅读:
    前端带队之漫谈
    css3之currentColor
    安装及升级node
    谈JavaScript代码封装
    再玩儿一次——深入理解闭包
    【学习笔记】ES6标准入门
    【学习笔记】移动Web手册(PPK力作)
    使用webstorm操作git
    使用webstorm调试node程序
    前端代理nproxy
  • 原文地址:https://www.cnblogs.com/dzj1/p/10775165.html
Copyright © 2011-2022 走看看