美文网首页
前端优化技巧

前端优化技巧

作者: 暖lily | 来源:发表于2020-08-07 15:16 被阅读0次

(一)减少http请求次数或者减少请求内容的大小

每发送一次http请求,都需要完成请求+响应这个完整的http事务,会消耗一些时间;也可能导致http链接通道的阻塞。为了提高页面加载速到和运行的性能,我们应该减少请求次数和请求内容大小

1.css-sprit(雪碧图) /css图片精灵,把一些小图标,合并到一张大图上,通过背景图片定位,定位到具体的小图。

2.css或者js文件进行合并压缩,减小文件大小(服务器端开启资源文件的GZIP压缩)

3.前后端数据传输时候,采用json格式

4.采用图片懒加载技术
在页面开始加载时候,不请求真实UTP地址,而是用默认占位,当页面加载完成后,再根据条件依次加载真实图片(减少页面首次加载http请求次数)
数据懒加载:
开始加载页面时候,只把首屏或者前两屏的数据从服务器端进行请求

(二)编写代码时候技巧

1.js代码中,尽量减少对dom的操作(会导致页面重绘和回流)
dom存在映射机制(js中dom元素对象和页面中dom结构是存在映射机制 的,一改则都改)。页面中dom结构改变或者样式改变,会触发浏览器的回流(浏览器会把dom结构重新进行计算)和重绘(把一个元素的样式重新渲染)
2.代码压缩去掉多余的注释空格,目的是减小文件大小

cakes
1.gpu 图形处理器,可以使显卡减少对cpu的依赖,并分担一些原本cpu的工作(像 3d图形处理方面)

相关文章

  • 网站性能提升----脚本的加载执行

    谈到网站优化这块,不管是前端后端都有许多各自的优化技巧,这个系列针对的是前端部分的优化; 标题是JavaScrip...

  • 前端优化技巧

    (一)减少http请求次数或者减少请求内容的大小 每发送一次http请求,都需要完成请求+响应这个完整的http事...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端SEO优化技巧

    一、搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • Python-02进阶-07代码优化技巧

    代码优化技巧 优化原则 核心技巧 其他技巧 Python 代码性能优化技巧 常用代码优化技巧 sort()优于so...

  • 前端存储工具 —— localforage

    在前端缓存数据是前端优化的技巧之一。但是,当数据量超过5M时,常用的 localstorage 就无法使用了。这时...

  • Unity优化技巧集合

    知乎作者:Mack Unity优化技巧(上)Unity优化技巧(中)Unity优化技巧(下)

  • chrome浏览器相关

    1.11 个Chrome骚技巧让你为所欲为2.前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

网友评论

      本文标题:前端优化技巧

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