Safari网站优化：开发者必备清单
在Chrome或Firefox中流畅加载的网站，在iOS的Safari上却常常卡顿。HTTP/1.1的限制、单线程JavaScript引擎以及严格的内存限制，会导致请求排队、抖动和内存溢出崩溃。这份优化清单旨在解决Safari的典型问题，同时不影响功能。
Safari稳定性的关键修复
Safari在HTTP/1.1下限制每个域名最多6个连接，加载多个资源时会造成排队。单线程JS引擎难以处理频繁的滚动/调整大小事件，而超过4000×10000像素的画布可能导致标签页崩溃。
核心步骤
- 切换到HTTP/2
Nginx配置：
```nginx
server {
listen 443 ssl http2;
server_name mysite.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /var/www/html;
index index.html;
}
```
重新加载：sudo nginx -s reload。在DevTools中检查：Protocol = h2。
- 首屏以下图片懒加载
```html
<img src="hero.jpg" alt="主横幅" class="hero-image">
<img src="gallery/photo1.jpg" alt="照片" loading="lazy">
```
对于Swiper：
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="幻灯片">
<div class="swiper-lazy-preloader"></div>
```
- 除jQuery外所有脚本延迟加载
```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/slider.js" defer></script>
<script src="js/main.js" defer></script>
```
- 移除未使用的库
检查：console.log(window.THREE)。搜索项目：THREE. 或 three.js。
- 节流滚动/调整大小/滚轮事件
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- 移动端画布优化
根据屏幕宽度重新计算，在小分辨率下减少粒子数量。
高优先级加载优化
Nginx中的Gzip/Brotli压缩：
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;<head>中CDN预连接：
<link rel="preconnect" href="https://code.jquery.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>CSS的PurgeCSS（Gulp）：
const gulp = require('gulp');
const purgecss = require('gulp-purgecss');
gulp.task('purge', () => {
return gulp.src('dist/css/style.css')
.pipe(purgecss({
content: ['**/*.html', '**/*.js'],
safelist: [/swiper/, /modal/, /active/, /open/]
}))
.pipe(gulp.dest('dist/css'));
});PostCSS版本类似。
移除jQuery Migrate：确保控制台中没有JQMIGRATE。
font-display: swap：
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Lighthouse优化
关键CSS内联 + 异步加载：
<style>
.header { background: #fff; }
.hero { font-size: 2rem; }
</style>
<link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/main.css"></noscript>WebP带回退：
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="描述" loading="lazy" width="800" height="600">
</picture>Gulp处理WebP：
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
gulp.task('webp', () => {
return gulp.src('src/images/**/*.{jpg,png}')
.pipe(webp())
.pipe(gulp.dest('dist/images'));
});核心要点
- HTTP/2消除了Safari中的连接排队问题。
- 节流滚动/调整大小事件可防止单线程JS抖动。
- 懒加载 + 延迟加载减少了渲染阻塞。
- PurgeCSS和库移除削减了JS/CSS体积。
- 画布优化对于动画背景至关重要。
定期使用此清单进行审核，可最大程度减少iOS用户流失。
— Editorial Team
暂无评论。