zoukankan      html  css  js  c++  java
  • 前端性能优化相关小结

    网络请求:

    网络请求是web性能优化的一大重要知识点,不管是请求静态资源Img ,Js文件,Css文件 还是请求文档数据,HTTP响应报文,我们都需要考虑以下几种优化

    请求静态资源文件,打包,合并多个资源文件,压缩,减少请求次数,复杂情况可追加按需加载
    请求图片文件,做到懒加载,预加载,图片压缩
    其它网络请求,按需加载,合并多个接口,减少请求次数
    浏览器缓存,利用HTTP缓存机制对图片及静态资源合理缓存,提升渲染效率
    日常编码

    说到编码,可能就比较抽象了,每个人的 编码方式都不一样,在这里列举几种常见的

    Js方面:
    1,减少DOM频繁操作,尽量合并批量操作
    2,理性使用闭包,做到及时释放私有作用域变量
    3,避免动态注册事件 addeventlistener,做到及时销毁事件
    4,合理使用定时器和全局变量,做到及时清除与销毁
    5,频繁高并发的事件使用函数防抖和节流

    Css方面:
    1,避免使用通配符 *
    2,选择器尽量不超过两层的嵌套,便于CSSParser 解析,可采用最大父级不同类,
    3,避免频繁使用可继承属性,最好做到依赖父级,类似 color ,font-size

    Html 方面:
    1,引入资源文件的顺序,做到不必要的放置在文档后边
    2,HTML加载Js会堵塞,因此所有的Js尽量放在HTML文档主体结束标签 上边
    3,HTML加载Css不会堵塞,因此可以放在标签内

    从输入URL到页面渲染经历了什么:

    在浏览器输入 URL 首先会对 URL 地址进行域名解析,然后 TCP 传输, 中间夹杂着 HTTP 请求,最后浏览器解析 HTTP 响应报文进行文档渲染;这里针对DNS域名解析,TCP三次握手四次挥手,HTTP请求报文与响应报文,我们不做深度探索,后续深究;就拿最后一步浏览器针对文档渲染来说说 。

    浏览器解析文档资源并渲染页面是个怎样的过程呢

    1,浏览器通过 HTMLParser 把 HTML 解析成 DOM Tree (俗称DOM树)。
    2,浏览器通过 CSSParser 把 CSS 解析成 CSS Rule Tree(俗称CSSOM树)。
    3,浏览器将 JavaScript 通过 DOM API 或者 CSSOM API 将 JS 代码解析并应用到布局中,按要求呈现响应的结果。根据 DOM 树和 CSSOM 树来构造 render Tree(RANDER树)。

    这三步遍是浏览器解析文档渲染页面的大概过程了,最终的 rander 树就是整个页面的文档结构抽象表示,显然这些都是浏览器自己做的事情,那我们要如何针对URL渲染来做优化呢 ? 不要急,接着看

    layout:重排(俗称回流),当 render tree 中任一节点发生位置改变,就会重新布局,重新来计算所有节点在屏幕的位置。
    repaint:重绘,当 render tree 中任一元素样式属性发生变化时,都会重新绘制,比如字体大小,颜色等。

    通过上边的两种情况,我们可以联想到,减少页面的重排与重绘j就可以大大提升渲染的效率和体验性能 。所以从侧面推敲一下

    1,减少动态操作DOM增加减少元素以及修改DOM节点位置大小,避免重排(回流)
    2,减少动态设置DOM元素样式属性,避免重绘

    结论:减少零碎的DOM操作,尽量做到批量更新操作(不分节点还是样式属性)

  • 相关阅读:
    elasticsearch CriteriaQuery查询例子
    mysql转ElasticSearch的分析 及JAVA API 初探
    java利用HttpClient进行https接口调用
    JDK8新特性:使用stream、Comparator和Method Reference实现集合的优雅排序
    java爬虫入门
    AndroidStudio升到最新版本(3.1.2)之后
    怎样录制简单GIF动图
    android 集成友盟分享之后,想自定义分享面板的看过来
    Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果
    Android新特性之CardView的简单使用
  • 原文地址:https://www.cnblogs.com/benmumu/p/12126402.html
Copyright © 2011-2022 走看看