前端页面渲染优化

1.禁止使用iframe(阻塞父文档onload事件);
*iframe会阻塞主页面的Onload事件;
*搜索引擎的检索程序无法解读这种页面,不利于SEO;
*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以绕开以上两个问题。

2.禁止使用gif图片实现loading效果(降低CPU消耗,提升渲染性能);
3、使用CSS3代码代替JS动画(尽可能避免重绘重排以及回流)css3平面动画开启translateZ(0),打开浏览器3d加速,在一定程度可缓解卡顿。不宜多用;

4、对于一些小图标,可以使用base64位编码,以减少网络请求。但不建议大图使用,比较耗费CPU;
小图标优势在于:
1.减少HTTP请求;
2.避免文件跨域;
3.修改及时生效;

5、页面头部的<style></style> 会阻塞页面;(因为 Renderer进程中 JS线程和渲染线程是互斥的);
6、页面头部<script</script> 会阻塞页面;(因为 Renderer进程中 JS线程和渲染线程是互斥的);
7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程);

8、网页Gzip,CDN托管,data缓存 ,图片服务器;
9、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
10、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
11、当需要设置的样式很多时设置className而不是直接操作style。
12、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
13、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
14、图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

15、 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。
向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,
能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,
本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。
减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),
减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

16、通过改变src的情况下**.MP3(不同于mp3)在移动端有可能不能播放。

原文地址:https://www.cnblogs.com/jingrf/p/8555738.html

时间: 2024-10-07 06:33:27

前端页面渲染优化的相关文章

【前端性能】高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看

【前端性能】高性能滚动 scroll 及页面渲染优化--转发

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

前端高性能滚动 scroll 及页面渲染优化

前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看

高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,

web 前端页面性能优化总结

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化 得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户

对前端页面的优化小计

做前端也算10来年了,针对Js及页面相关的功能,基本上知道一些优化,现在做一个简单的总结,这是我个人对互联网的一些理解,当然有强人有更好规范,值得我们去学习 1.因为根据浏览器的加载方式不同,尽量不让head中出现js的加载,如果是在head中的话,这样页面会在等待js下载完成后再进行加载 2.在页面元素呈现之前加载所有需要的css,因为页面(差不多所有的浏览器都是加载一部分内容就通过样式表进行渲染,所以当然越早加载越好. 3.俗话说得好,互联网时代字节就是金钱,所以尽量要保持最少的传输量,对于

前端页面性能优化方式

避免内嵌/嵌入代码∞ ? 您有三种基本方法可以在您的页面上包含CSS或JavaScript: 1)内联: CSS内部定义一个style属性和JavaScript内部的一个onclick属性,例如在任何HTML标签中; 2)嵌入式: CSS在<style>标签内部定义,JavaScript内部<script>标记; 3)外部: CSS中从加载<link>和从JavaScript的src所述的属性<script>标记. 前两个选项尽管减少了HTTP请求的数量,实

动态ip代理教你:如何用爬虫实现前端页面渲染

在很早以前,几乎绝大多数网站全全都是利用后端渲染的,即在服务器端组装形成完整的HTML页面,随后再将完整页面返回给前端进行展现.而近期,随着AJAX技术的不断普及,和AngularJS这类SPA框架的广泛应用,前端渲染的页面越来越多. 不知大伙儿有没有听说过,前端渲染相比于后端渲染,是不利于进行SEO的,因为对网络爬虫不友好.究其原因,就是因为前端渲染的页面是需要在浏览器端执行JavaScript代码(即AJAX请求)才能获取后端数据,随后才能拼装成完整的HTML页面. 针对这类情况,当前也是已