zoukankan      html  css  js  c++  java
  • 前端页面优化

    1.禁止使用iframe(阻塞父文档onload事件);
            *iframe会阻塞主页面的Onload事件;
            *搜索引擎的检索程序无法解读这种页面,不利于SEO;
            *iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

            使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
            动态给iframe添加src属性值,这样可以绕开以上两个问题。

    2.禁止使用gif图片实现loading效果(降低CPU消耗,提升渲染性能);
    3、使用CSS3代码代替JS动画(尽可能避免重绘重排以及回流);
    4、对于一些小图标,可以使用base64位编码,以减少网络请求。但不建议大图使用,比较耗费CPU;
                小图标优势在于:
                    1.减少HTTP请求;
                    2.避免文件跨域;
                    3.修改及时生效;

    5、页面头部的<style></style> 会阻塞页面;
        (因为 Renderer进程中 JS线程和渲染线程是互斥的);
        
    6、页面头部<script</script> 会阻塞页面;
        (因为 Renderer进程中 JS线程和渲染线程是互斥的);
        
    7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程);

    8、网页Gzip,CDN托管,data缓存 ,图片服务器;
        
    9、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
        
    10、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
        
    11、当需要设置的样式很多时设置className而不是直接操作style。
        
    12、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
       
    13、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
        
    14、图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。

    15、 避免在页面的主体布局中使用table。
             table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
             对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。
             
             向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,
             能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,
             本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。
            
             减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),
             减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

  • 相关阅读:
    Code Forces Gym 100886J Sockets(二分)
    CSU 1092 Barricade
    CodeChef Mahesh and his lost array
    CodeChef Gcd Queries
    CodeChef GCD2
    CodeChef Sereja and LCM(矩阵快速幂)
    CodeChef Sereja and GCD
    CodeChef Little Elephant and Balance
    CodeChef Count Substrings
    hdu 4001 To Miss Our Children Time( sort + DP )
  • 原文地址:https://www.cnblogs.com/pandaQQQ/p/9634316.html
Copyright © 2011-2022 走看看