美文网首页
高性能js+页面加载速度

高性能js+页面加载速度

作者: Liberty寒风 | 来源:发表于2017-07-02 10:28 被阅读0次

代码运行速度

不要类型转换

即开始是什么类型的变量,就让他是什么类型,字符串转数字最好用parseInt.

不要重新构造对象

不要在以后再添加属性,最好从一开始定义对象时就确定好属性。

字符串链接

+=运算符似乎比+快很多

限制声明/传递变量的范围(作用域)

假如你调用一个函数,浏览器必须做一些所谓的范围查找,它的昂贵程度取决于它要查找多少范围。尽量不要依赖全局/高范围的变量,尽量使局部范围变量,并将它们传递给函数。更少的范围查找,更少的牺牲速度。

页面加载速度

延迟请求首屏外的文件

![](https://img.haomeiwen.com/i4880667/9ed0e27e70d82589.png?imageMogr2/auto-orient/strip)

页面初步加载这张图片的时候是直接以base64的方式(当然你也可以统一使用一张占位图loading.gif来替代)来快速显示一张极小的图片的,而图片本身的真实路径是存在data-src属性内的

优化页面模块排放顺序

比如有一个页面是这样的——左边是侧边栏,用于存放用户的头像啊、资料啊,以及网站投放的广告啊,而右侧是文章内容区域:

<body>
  <sidebar>
    <!-- 侧边栏内容 -->
  </sidebar>

  <content>
    <!-- 文章内容 -->
  </content>
</body>

于是乎,浏览器按照它的UI单线程准则从上到下先加载了侧边栏,再加载我们的文章。。。

很明显,这样不是一个人性化的加载顺序,我们得弄清楚,页面上各个区域模块,对于用户而言,哪个才是最重要、最应当首先展示的。

相关文章

  • 高性能js+页面加载速度

    代码运行速度 不要类型转换 即开始是什么类型的变量,就让他是什么类型,字符串转数字最好用parseInt. 不要重...

  • Vue项目总结

    (一)vue 1.页面加载速度优化 可在页面引入组件时引入异步加载的方式使加载速度变快export default...

  • 代码分片

    高性能:让用户每次只加载必要的资源,优先级不太高的资源则采用延迟加载等技术渐进式的获取,这样可以保证页面的首屏速度...

  • CSS和JS在网页中的放置顺序

    js是阻塞页面的加载,会影响页面加载的速度,js文件的大小和算法的复杂程度影响着页面的加载速度。浏览器在下载和执行...

  • JS延迟加载的几种方式

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。 JS延迟加载有助于提高页面加载速度。 ...

  • Webview缓存剖析以及解决方案

    1 Android WebView 存在什么性能问题? H5 页面加载速度慢 渲染速度慢 页面资源加载缓慢 耗费流...

  • js延迟加载的六种方式

    js实现延迟加载的几种方法,js的延迟加载有助与提高页面的加载速度 JS延迟加载,也就是等页面加载完成之后再加载 ...

  • 提高页面加载速度

    开启GZIP 以tomcat为例 在路径\apache-tomcat-7.0.77\conf\下找到server....

  • 优化页面加载速度

    首先从View层入手 DNS预读取 使用DNS预读取的方式在后台并行地进行DNS的解析,可以防止浏览器耗费时间去解...

  • 图片懒加载

    1.原理 当页面图片比较多的时候,加载速度会比较慢,所以为了增加页面加载速度,先将可视区域内的图片加载,其他区域的...

网友评论

      本文标题:高性能js+页面加载速度

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