面试
推荐
关于
Github
Archives
码农学技术

提高页面渲染速度

2021/10/08

提高页面渲染速度

参考资料

一、浏览器内核介绍

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

  • JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

  • Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
  • Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  • Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
  • Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

二、优化页面渲染时间，写出高效的css代码

2.1.避免使用css表达式

2.2.指定页面图片的尺寸

2.3.把js放在 body 底部

提高网页加载速度，因为 HTML 加载不受制于脚本加载

<script src="../js/lib/require/require.min.js" data-main="../js/main.js"></script>
</body>
</html>

2.4.把css文件放在页面文档头部 head

浏览器可以尽快的执行它们。

<head>
<link rel="stylesheet" type="text/css" href="../css/zhglpt.css" media="all"/>
</head>

2.5.页面头部标明文档编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

2.6.减少渲染阻塞的js和css

- 异步执行js
- 推迟js的解析 
- 避免长时间运行js

2.7.优化css使用

- css被要求用来构造render tree并且在页面的最初渲染的时候页面css阻塞js的执行。
- 确保不必要的css文件被标记为不必要（例如 @media参数设置等），
- 确保关键css文件最小化，以及关键css文件加载时间最小化。

2.8.避免使用@import

CSS 导入 (@import) 可以检测和导入其他的css文件，但是最好不要使用，因为被导入的文件只有在@import规则本身被接受和解析后才会执行，增加了网络往返。

2.9.将css写在文档内部(html内嵌样式)

考虑将css写在文档内部，因为这样将会减少外部css文件下载时所耗费的网络往返次数，且只有一个HTML文档被当成关键资

Post Directory

扫码关注公众号：暂无公众号
发送 290992
即可立即永久解锁本站全部文章