前端性能优化

资源加载

样式表加载放在头部,js文件加载放在body结束标签前。样式表先加载,避免页面开始加载时,页面显示混乱;js文件执行的是逻辑处理,不会影响页面的初始显示,放在尾部加载可以让页面更快地渲染出来。

图标做成雪碧图,通过background-position来显示。页面使用图标较多时,发出多个请求,会影响页面加载。图片比较小时,还可以编译成 base64 字符串的形式。

资源按需加载,图片懒加载。为保证页面加载渲染速度,可以考虑对资源进行按需加载,比如对页面进行分页,或页面滚动到底部时,再进行更多资源的加载。

使用CDN来加载资源。利用最靠近每位用户的服务器,来将资源发送给用户。

内容分发网络(英语:Content delivery network或Content distribution network,缩写:CDN)是指一种透过互联网互相连接的计算机网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。

合理使用缓存。对于某些更新不频繁的资源,可以设置缓存,当未超出过期时间时,直接使用缓存中的资源,不再从服务器调取。

页面渲染

减少页面回流(reflow)。当发生回流(reflow),渲染树中受到影响的部分,需要重新构建,并重绘(repaint),这整个过程会消耗性能。
适当地减少DOM操作,减少回流。对于需要多次回流的元素,可以考虑将它的position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。
repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
回流一定会伴随着重绘,但是重绘不一定会引起回流。

代码优化

css代码优化。css样式表中,对元素的查找设置,是右结合的,尽量写能精确定位的元素选择器。

js代码优化。对于执行完毕后,不再需要的变量,及时删除置空,避免占内存。

嗯,暂时想到这么多,后续再补充

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...
    bennnnn阅读 1,762评论 2赞 4
  • 速记笔记markdown工具: https://pandao.github.io/editor.md/实验服务器:...
    桃花島主阅读 2,334评论 0赞 34
  • 前端性能优化资料整理 页面性能差的直接后果是用户需要等待,而等待,尤其是不确定要多长时间的等待会给用户带来焦虑,为...
    飘零之雪阅读 930评论 2赞 3
  • 性能优化的话大致有以下几个部分:加载优化图片优化CSS优化脚本优化渲染优化 加载优化 1.减少http请求 基本原...
    进击的蒸汽机阅读 478评论 0赞 0
  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 9,521评论 5赞 89

友情链接更多精彩内容