zoukankan      html  css  js  c++  java
  • web前端优化手段

    web前端优化手段有很多,同种的优化方式或许在不同的网络协议会南辕北辙,下面就自己结合工作经验和学习总结的一些手段总结

    1、合并文件减小请求数:sprite图片的合成、合并脚本与样式。

    2、减小文件的大小:压缩代码(html、css、js),压缩图片(在美术和产品能接受的范围内),选择正确格式的图片(jpg/png)。

    3、cookie-free:将资源的站点都重定向到非页面站点,如:页面都是*.100bt.com,将资源站点都放在resource.a0bi.com站点。

    4、多站点放置资源,绕开浏览器的同站点资源加载个数的限制。

    5、异步加载js文件,非基础库script加上async/defer。

    6、按需加载文件,如:在相应式页面中,判断用户设备获取所需的文件。

    7、页面延迟加载,如:图片与脚本使用滚动加载,只加载出现在视口的图片和脚本效果对应的脚本文件。

    8、减少dom操作(感觉在现代浏览器意义不大)

    9、缓存需要多次操作的dom节点

    10、基础库的过期时间设置尽量大,充分利用页面缓存

    11、使用Worker

    12、使用cdn

    13、使用gzip压缩

    14、使用css3/canvas/svg 代替图片,使用data:image代替png图片

    15、使用offline

    16、DNS预读取(dns-prefetch)prefetch subresource prerender 

    17、分布加载页面ajax/bigpipe

    18、 避免重复的资源请求,不同模块同时请求相同资源,会导致资源的重复请求

    19、减少reflow/repaint

    20、使用switch-case不用if-else,使用while不使用for

    21、UI动画使用requestAnimationFrame 代替setTimeout和setInterval

    22、开启GPU加速脚本设置willChange,3Dtransform制作动画

  • 相关阅读:
    NKOI 1363 (基础二分)
    POJ 1321 棋盘问题(dfs八皇后变形)
    UVA 1368 DNA(模拟+贪心)
    暴力(解数阵)
    A Linear Algebra Problem(唯一性的判定)
    hdu 1565 方格取数(1)
    hdu 1074 Doing Homework
    hdu 1233 还是畅通工程
    hdu 1232 畅通工程
    hdu 1213 How Many Tables
  • 原文地址:https://www.cnblogs.com/peace1/p/5418221.html
Copyright © 2011-2022 走看看