web前端性能优化方法总结、移动页面性能优化-超级全面

web性能优化的具体方法（way）

一）内容层面

1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

  2、避免重定向（/还是需要的）

  3、切分到多个域名

  4、杜绝404

二）网络传输阶段

1、减少传输过程中实体的大小

    1）缓存

    2）cookie优化

    3）文件压缩（Accept-Encoding：g-zip）

2、减少请求的次数

    1）文件适当的合并

    2）雪碧图

3、异步加载（并发,requirejs）

4、预加载、延后加载、按需加载

三）渲染阶段

1、js放底部，css放顶部

2、减少重绘和回流

       3、合理使用Viewport 等meta头部

       4、减少dom节点

      5、BigPipe

四）脚本执行阶段

1、缓存节点，尽量减少节点的查找

2、减少节点的操作（innerHTML）

3、避免无谓的循环，break、continue、return的适当使用

4、事件委托

移动端页面性能优化方案

Html5优化

1、加载优化

减少http请求、合并css、js、缓存、压缩html\css\js、使用首屏加载、按需加载、预加载、压缩图片、减少cookie影响加载速度、避免重定向、异步加载第三方资源。

2、脚本执行优化

css在头部，js在尾部、避免图片和iFrame等空scr，影响当前加载速度和效率、避免多次重设图片大小，会导致多次重绘、

3、css优化

避免写在html标签中写style、避免css表达式、移除空的css、正确使用display属性，影响页面渲染、不滥用float计算量较大、不滥用web字体，加载解析耗时、不声明过多的Font-size。

4、js执行优化

减少重绘和回流、缓存Dom选择于计算；缓存列表length；尽量使用事件带来；尽量使用Id选择权; touch事件优化；

5、渲染优化

html使用viewpoint，可以加速页面的渲染；减少Dom节点；动画优化；高频事件优化；GPU加速；

详情：

转载：https://blog.youkuaiyun.com/alex_hou0814/article/details/91421331

转载：https://blog.youkuaiyun.com/w2326ice/article/details/64122372/