如何做网站性能优化？

娜姐

发布于 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
利用缓存：和后端配合，利用Expires或Cache-Control:max-age开始强缓存，或者利用Last-Modified/If-Modified-Since或E-Tag/If-None-Match开启协商缓存。

3. 其他

静态资源放置上CDN上
HTTP请求开启GZIP
减少DNS查找
压缩CSS/JavaScript
避免重定向
将资源文件放置在多个域名下，提高浏览器并发连接数量

移动端性能优化

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

注意：1-3都适用手机端优化

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

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

缓存