【JavaScript】网页优化

最新推荐文章于 2022-05-23 15:03:38 发布

七日谭

最新推荐文章于 2022-05-23 15:03:38 发布

阅读量280

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/Adollar/article/details/114838501

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

1 页面渲染过程

根据 HTML 代码生成 DOM Tree
根据 CSS 代码生成 CSSOM
将 DOM Tree 和 CSSOM 整合形成 Render Tree(框架和样式结合)
根据 Render Tree 渲染页面
遇到 script 则暂停渲染，优先加载并执行 JS 代码，完成再继续
直至把 Render Tree 渲染完成

1.1 渲染中途遇到 script 的情况

当渲染中途遇到 script 时，会先停止渲染，去执行 JS 。因为，可能 JS 中会存在修改 DOM 节点的内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="container">default</div>
        <script type="text/javascript">
            document.getElementById('container').innerHETML = 'updata by js'
        </script>
        <a>test</a>
    </body>
</html>

1.2 css 应该放在 head 中

css 需要放在 head 中，为了让渲染时能一次渲染到位，如果放在body 中，对于网络不好的用户，可能造成内容出现，却没有样式，需要等待一段时间才会出现有样式的内容。这个等待过程是一个二次渲染的过程。

1.3 建议把 JS 放在 body 最后

JS 不放在 body 内部的最后时，会延长页面渲染的时间，因为，渲染过程遇到 JS 时，会暂停渲染。当然，如果你需要用 JS 对渲染过程做一些特殊处理，也可以不放在最后。

1.4 img 标签

当 img 的图片比较大时，并不会阻塞渲染过程，渲染会继续进行，img 的图片加载好了，随时都可以渲染到页面。

1.5 window.onload 和 DOMContentLoaded

window.addEventListener('load', function () {
    //页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
    //DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="container">
        	<img src="./img.png" id="img1">
        </div>
        <script type="text/javascript">
            const img1 = document.getElementById('img1')
            img1.onload = function () {
                console.log('img loaded')
            }
            window.addEventListener('load', function () {
                console.log('window loaded')
            })
            document.addEventListener('DOMContentLoaded', function () {
                console.log('dom content loaded')
            })
        </script>
        <a>test</a>
    </body>
</html>

打印顺序 dom content loaded–>img loaded–>window loaded

2 性能优化

2.1 性能优化原则

多使用内存、缓存或其他方法
减少 CPU 计算量，减少网络加载耗时

2.2 优化的方式：

减少资源体积：压缩代码；服务器会进行 gzip 压缩
减少访问次数：合并代码、SSR 服务端渲染、缓存、合并图片(雪碧图)

缓存：
```
module.exports = {
    mode: 'production',
    entry: path.join(__dirname, 'src', 'index'),
    output: {
        filename: 'bundle.[contenthash].js',
        path:path.join(__dirname, 'dist')
    },
}
```
在 webpack 中配置 contenthash 可以给文件名添加 hash 值。静态资源加 hash 后缀，根据文件内容计算 hash；文件内容不变，则 hash 不变，则 url 不变；url 和文件不变，则会自动触发 http 缓存机制，返回 304。

CDN:

内容服务基于缓存服务器，也称作代理缓存(Surrogate)，它位于网络的边缘，距用户仅有"一跳"(Single Hop)之遥。同时，代理缓存是内容提供商源服务器（通常位于CDN服务提供商的数据中心）的一个透明镜像。这样的架构使得CDN服务提供商能够代表他们客户，即内容供应商，向最终用户提供尽可能好的体验，而这些用户是不能容忍请求响应时间有任何延迟的。

SSR:（server side render)

服务端渲染：将网页和数据一起加载，一起渲染。

非 SSR (前后端分离) ：先加载网页，再加载数据（ajax 请求），再渲染数据。

懒加载:

懒加载就是延迟加载，也就是说当对象需要用到的时候再去加载。

渲染更快：

css 放在 head，JS 放在 body 最下面
尽早开始执行 JS, 用 DOMContentLoaded 触发

对DOM 查询进行缓存

// 不缓存 DOM 查询结果
for (let = 0; i < document.getElementsByTagName('p').length; i++) {
    // 每次循环，都会计算 length，频繁进行 DOM 查询
}

// 缓存 DOM 查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i++) {
    // 缓存 length， 只进行一次 DOM 查询
}

频繁 DOM 操作，合并到一起插入 DOM 结构

const listNode = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到 DOM 树中
const frag = document.createDocumentFragment()
// 执行插入
for (let x = 0; x < 10; x++) {
    const li = document.createElement('li')
    li.innerHTML = 'list item' + x
    frag.appendChild(li)
}
// frag 完成之后，再插入到 DOM 树中
listNode.appendChild(frag)

节流 throttle 、防抖 debounce
节流、防抖

七日谭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】网页优化

文章目录1 页面渲染过程1.1 渲染中途遇到 script 的情况1.2 css 应该放在 head 中1.3 建议把 JS 放在 body 最后1.4 img 标签1.5 window.onload 和 DOMContentLoaded2 性能优化2.1 性能优化原则2.2 优化的方式：1 页面渲染过程根据 HTML 代码生成 DOM Tree根据 CSS 代码生成 CSSOM将 DOM Tree 和 CSSOM 整合形成 Render Tree(框架和样式结合)根据 Rende
复制链接

扫一扫