# siyecao

**Repository Path**: KittySnow/siyecao

## Basic Information

- **Project Name**: siyecao
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-18
- **Last Updated**: 2021-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5移动端性能优化指南

## css方向

#### 推荐使用使用rem作为单位
（1） 使用媒体查询，不同分辨率设置不同的html的font-size

（2） 使用JS代码控制html的font-size大小

（3） 推荐使用postcss flexable.js 实现px自动转换成rem


#### 禁止a,button,input,optgroup,select,textarea等标签背景变暗效果
```css
a,button,input,optgroup,select,textarea{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
````
#### 注意渲染时列表ios端滑动不顺畅

（1） 在滚动容器内加

```css
-webkit-overflow-scrolling:touch
````

但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。

（2） 给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto
```css
body {overflow-x: hidden}
``` 
 
   
#### 使用CSS3开启GPU硬件加速提升网站动画渲染性能

（1） 为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);

（2） Opacity、Canvas、webGL、video 也可以开启GPU加速

#### 像素为0时不需要任何单位

#### 尽量不要在HTML标签中写style样式

#### 减少重排以及重绘（PC端通用）

（1） 不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。

（2） 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。

（3） 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

（4） 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)

（5） 不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）

（6） 用translate替代top改变

（7） 用opacity替代visibility（在独立图层下优化重绘）

## JS方向

#### 遵循雅虎军规，把脚本放在底部 

脚本会阻塞并行下载，HTTP/1.1官方文档建议浏览器每个主机名下并行下载的组件数不要超过两个，如果图片来自多个主机名，并行下载的数量就可以超过两个。如果脚本正在下载，浏览器就不开始任何其它下载任务，即使是在不同主机名下的。

有时候，并不容易把脚本移动到底部。举个例子，如果脚本是用document.write插入到页面内容中的，就没办法再往下移了。还可能存在作用域问题，在多数情况下，这些问题都是可以解决的。

一个常见的建议是用推迟（deferred）脚本，有DEFER属性的脚本意味着不能含有document.write，并且提示浏览器告诉他们可以继续渲染。不幸的是，Firefox不支持DEFER属性。在IE中，脚本可能被推迟，但不尽如人意。如果脚本可以推迟，我们就可以把它放到页面底部，页面就可以更快地载入。

#### 骨架屏

[相关使用文章vue版骨架屏配置](https://segmentfault.com/a/1190000020416483?utm_source=tag-newest)

#### 使用fastclick代替click事件

不一定所有的情况都适用fastclick [相关文章](https://blog.csdn.net/weixin_30302609/article/details/97936035)


## 数据加载方向

#### 尽量减少HTTP请求

（1） 由于移动端WebView能够同时响应的请求为4个（Android 4个，iOS 5后可以6个），所以要尽量缩减页面的请求个数，首次加载的请求个数不能超过4个

（2） CSS、JavaScript代码合并

#### 使用缓存
（1） 运用缓存能够减少向服务器的请求数，节约加载time，所以所有静态资源都要在服务器端设置缓存，而且尽量运用长Cache（备注：长Cache资源的更新可运用唯一标志）

（2） 缓存全部可缓存的资源

（3） 运用外联式引用CSS、JavaScript


#### 压缩HTML、CSS、JavaScript
（1） 削减加载的资源能够加速网页的呈现速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip
 
（2） 压缩（例如，剩余的空格、换行符和缩进）

#### 无阻塞

写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会堵塞页面的加载效率，因此CSS放在页面头部并运用Link方法引进，避免在HTML标签中写Style，JavaScript放在页面尾部或运用异步方法加载