美文网首页
《高性能 JavaScript》笔记

《高性能 JavaScript》笔记

作者: 前端技师胡帅博 | 来源:发表于2019-07-21 10:26 被阅读0次

2015年自学的时候看网上有个人的推荐买的,这么些年一直没看,前两天翻出来发现里面大多数的内容都已经不适用了,所以以后技术类的书应该不会再买纸质的了,技术的发展迭代实在是太快了。

将多个脚本文件合并成一个,减少请求次数;
将脚本文件放在文档底部,避免阻塞页面加载;

如果不是写原生的话,这两条基本用不上,框架都已经做好了

标识符解析的性能:location.href 比 window.location.href 要快,应为少了一层作用域链的搜索

这个……二三十年前这条优化应该还是比较有用的吧

重排(reflow)与重绘(repaint)

浏览器下载完所有页面组件(html,css,js,图片)后会生成两个内部数据结构:

  • DOM 树,表示页面结构
  • 渲染树,表示 DOM 节点该如何显示(对应到 css 就是盒子模型)
    这两个内部结构生成完之后,浏览器就开始绘制页面
    当 DOM 的变化影响了元素的几何属性(宽和高),浏览器就要重新计算元素的几何属性,同时计算其他受到影响的元素的几何属性和位置,重新构造渲染树,这个过程叫做重排,重排之后需要重新绘制,叫做重绘。改变元素的背景色不会影响宽和高,因此只会触发重绘。

重排何时发生:

  • 增删 DOM 元素
  • 元素位置改变
  • 元素尺寸改变(盒子模型)
  • 内容改变(文本或图片被另一个不同尺寸的图片替代)
  • 浏览器窗口尺寸改变

这个是全书最有价值的内容了,辅助理解了浏览器的工作原理

使用定时器进行性能优化的理念,有两个套路贯彻了,防抖和节流,这个用的时候搜索即可。

相关文章

  • 高性能 JavaScript - 数据存储

    这几天分享一下我看《高性能 JavaScript》的学习笔记,希望能对大家有所帮助。 在 JavaScript 中...

  • 《高性能javascript》笔记

    第一章 加载和执行 知识点 由于页面在加载遇到script标签时,会下载并执行js文件,从而阻塞包括页面绘制在内的...

  • 《高性能JavaScript》笔记

    用一周的时间看完了《高性能Javascript》,涉及到了javascript很多个方面的性能问题,但由于书比较薄...

  • 高性能javascript笔记

    最近在学习这本书,简单做下笔记。书中很多概念可以让人耳目一新,平常写代码也经常用到,只是没注意的亚子。 对于jav...

  • 《高性能 JavaScript》笔记

    2015年自学的时候看网上有个人的推荐买的,这么些年一直没看,前两天翻出来发现里面大多数的内容都已经不适用了,所以...

  • 《高性能javascript》笔记

    仅个人观后感:读完这本书感觉这本书对于工作几年的前端人员来说不值得去花精力或者时间精读,适合刚开始工作的新人 1....

  • 技术书刊

    Javascript# ########《JavaScript设计模式》《高性能网站建设指南》《高性能网站建设进阶...

  • 加载和运行JS的正确姿势

    前言 kyrieliuの《高性能JavaScript》读书笔记。 script标签是一个很“霸道”的狠角色,它的每...

  • 高性能JavaScript

    高性能JavaScriptauthor: @TiffanysBear 从《高性能JavaScript》一书中的整理...

  • 2017-12-27

    # Node.js学习笔记 ## 简介 - 编写高性能网络服务器的JavaScript工具包 - 单线程、异步、事...

网友评论

      本文标题:《高性能 JavaScript》笔记

      本文链接:https://www.haomeiwen.com/subject/tvrmlctx.html