前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何做网站性能优化?

如何做网站性能优化?

作者头像
娜姐
发布2021-01-14 10:41:45
2.1K0
发布2021-01-14 10:41:45
举报
文章被收录于专栏:娜姐聊前端

优化网站性能有很多方法,总体来说,可以几个方面入手:代码优化,利用缓存,减少请求数量等等。

1. 代码优化
(1) CSS
  • 避免使用CSS表达式
  • 尽可能用类和ID选择,少用后代选择器,子选择,通配符选择器等高级选择器(CSS选择器是从右到左开始匹配)
(2)JavaScript
  • 尽量避免全局查找,建议使用局部变量
  • 将常用变量缓存起来使用
  • 不要使用with语句(会增加作用域链长度)
  • 有效利用正则表达式处理字符串
  • 尽量使用全等===做判断(避免变量隐式转换)
  • 利用setTimeout定时器将耗时长的大任务分割为N个异步任务执行
  • 使用window.requestAnimationFrame()绘制动画,而不是setInterval()
(3)DOM操作
  • innerHtml代替DOM操作,减少DOM操作次数
  • 缓存DOM节点查找的结果
  • 采用事件委托监听DOM事件
  • 少用iframe
  • 尽可能批量修改DOM,可以通过下面的步骤减少重绘和重排的次数:
    • 隐藏元素,进行修改,然后再显示它
    • 使用一个文档片断(document.createDocumentFragment())在已存DOM之外创建一个子树,然后将它拷贝到文档中
    • 将原始元素拷贝到一个脱离文档的节点中,修改副本,然后覆盖原始元素
(4)HTML
  • 样式表和脚本文件都采用外部文件链接方式加载
  • 样式表链接定义在<header>内,脚本文件放在<body>末尾
  • 根据场景可采用JavaScript异步加载模式(动态创建<script>标签)
  • 和渲染无关的脚步文件可以在window.onload()事件触发后再加载
2. 减少HTTP请求数量
  • 雪碧图,图标字体文件
  • data:url渲染图片
  • 合并CSS/JavaScript
  • 利用缓存:和后端配合,利用ExpiresCache-Control:max-age开始强缓存,或者利用Last-Modified/If-Modified-SinceE-Tag/If-None-Match开启协商缓存。
3. 其他
  • 静态资源放置上CDN上
  • HTTP请求开启GZIP
  • 减少DNS查找
  • 压缩CSS/JavaScript
  • 避免重定向
  • 将资源文件放置在多个域名下,提高浏览器并发连接数量
代码语言:javascript
复制
移动端性能优化

* 使用CSS3动画(transition, 3D transform, canvas),开启硬件加速
* 使用requestAnimationFrame代替setTimeout/setInterval运行动画
* 避免使用CSS3阴影效果(box-shadow, text-shadow)
* 避免使用Web字体(字体文件需要下载,解析,重绘)

注意:1-3都适用手机端优化
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 代码优化
    • (1) CSS
      • (2)JavaScript
        • (3)DOM操作
          • (4)HTML
          • 2. 减少HTTP请求数量
          • 3. 其他
          相关产品与服务
          内容分发网络 CDN
          内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档