前端优化方案

Posted 2020-11-08 best仙

网络通讯方面

1. 减少HTTP请求数
   1. 合并资源，如合并 javascript 文件、CSS 文件，利用 CSS Sprite 合并图片等
   2. 内联图片,data url节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。
2. 域名提前解析，在页面中不同域名的链接需指定预取域名：<link rel="dns-prefetch" href="http://this-is-a.com">，IE9+支持
3. 避免重定向（重定向会增加http请求的次数）
4. cookie优化，cookie越多会导致请求头越大
5. 启用GZIP压缩（Accept-Encoding：g-zip）
6. 使用 CDN加速，减小服务器压力
7. 合理利用HTTP缓存，通过设置Expires

页面渲染方面

• 建议将 CSS 文件放在页首，以便构建 DOM 树；而将 JavaScript 文件尽量放在页面下方，防止阻塞构建 DOM 树；而 JavaScript 的 onload 事件里，不要写太多影响首屏渲染的、操作 DOM 树的 JavaScript 代码。
• 精简 JavaScript 和 CSS 代码，并进行代码压缩，使得css和js资源更快的下载
• 编写高效的CSS代码
• 重要的图片或者想让用户优先看到的图片使用img标签，次要的图片使用background引入