前端优化都有啥

前端优化

网络层面

请求过程优化

  1. 减少 HTTP 请求

  2. 使用 HTTP2

  3. 使用服务端渲染

    客户端渲染: 获取 HTML 文件,根据需要下载 JavaScript 文件,运行文件,生成 DOM,再渲染。 服务端渲染:服务端返回 HTML 文件,客户端只需解析 HTML。

    优点:首屏渲染快,SEO 好。

    缺点:配置麻烦,增加了服务器的计算压力。

  4. 静态资源使用 CDN

  5. DNS 预解析 (采用DNS Prefetch 一种DNS 预解析技术)

ini 复制代码
<link rel="dns-prefetch" href="www.baidu.com" />
//只有部分浏览器支持

6.压缩 (采用Gzip压缩)

减少不必要的请求(浏览器缓存)

  1. 强缓存
  2. 协商缓存(对比缓存)
  3. CDN缓存
  4. 预加载
ini 复制代码
<link rel='prefetch' href='main.js'>
//只有部分浏览器支持
  1. 预渲染
ini 复制代码
<link rel='prerender' href='http://www.a.com'> 
//只有部分浏览器支持
  1. 应用缓存(Cookie,Storage,Service Worker)

浏览器渲染层面优化

1. 优化资源加载

  • CSS文件放在head中,先外链,后本页
  • JS文件放在body底部,先外链,后本页
  • 异步script标签 (defer: 异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似async: 异步加载,加载完成后立即执行)

2.减少重绘回流

避免使用层级较深的选择器,避免使用CSS表达式,元素适当地定义高度或最小高度,给图片设置尺寸,不要使用table布局,能够使用CSS实现的效果,尽量使用CSS而不使用JS实现

前端性能优化(一)

前端性能优化的七大手段

前端性能优化 24 条建议(2020)

相关推荐
求知若渴,虚心若愚。4 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
GSDjisidi4 小时前
日本IT就职面试|仪容&礼仪篇分享建议
面试·职场和发展
LinDaiuuj5 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~5 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟6 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus7 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉7 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A7 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6667 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus8 小时前
React之react-dom中的dom-server与dom-client
前端·react.js