（十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】

最新推荐文章于 2021-11-16 11:33:51 发布

lj1530562965

最新推荐文章于 2021-11-16 11:33:51 发布

阅读量499

点赞数

分类专栏：前端知识体系文章标签： javascript 前端面试

本文链接：https://blog.csdn.net/lj1530562965/article/details/106711012

版权

本文深入探讨浏览器运行环境，包括网页加载的HTML、媒体资源、JS/CSS形式与过程，以及渲染页面的步骤。重点讨论性能优化策略，如减少资源体积、合并代码、使用CDN和缓存，以及服务端渲染。同时，文章阐述了XSS和XSRF攻击及预防措施，强调安全在网页开发中的重要性。

摘要由CSDN通过智能技术生成

运行环境

即浏览器
下载网页代码，渲染出页面，期间会执行若干JS
要保证代码在浏览器中，稳定且高效

网页加载过程

加载资源的形式

html形式
媒体文件，如图片、视频等
javascript、css等

加载资源的过程

DNS解析（域名服务解析）：域名->IP地址，域名统一好记，IP地址不同区域因代理可能不一致不好标识，要转IP地址是因为浏览器真正访问时访问的是IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求，并返回给浏览器

渲染页面的过程

根据HTML代码生成DOM Tree
根据CSS代码生成CSSOM
根据DOM Tree和CSSOM整合形成Render Tree
根据Render Tree渲染页面
遇到

性能优化、体验优化

原则

多使用内存、缓存或其他方法
减少CPU计算量，减少网络加载耗时
适用于所有编程的性能优化，空间换时间

从何入手

让加载更快

减少资源体积，压缩代码，例如：webpack，服务器端也会进行gzip压缩，大约会压缩三分之一
减少访问次数，合并代码（精灵图、雪碧图、webpack），SSR服务端渲染，缓存（webpack的output加contenthash产生数字文件主要有这个效果）
使用更快的网络，CDN

缓存

静态资源加hash后缀，根据文件内容计算hash；
文件内容不变，则hash不变，则url不变
url和文件不变，则会自动触发http缓存机制，返回304

SSR

服务端渲染：将网页和数据一起加载，一起渲染
非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
早先的JSP、ASP、PHP,现在的Vue React SSR借助一些Node的能力来做

让渲染更快

css放在head中,js放在body最后
尽早开始执行JS，用DOMContentLoaded触发

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>运行环境 演示</title>
    </head>
    <body>
        <p>一段文字 1</p>
        <p>一段文字 2</p>
        <p>一段文字 3</p>
        <img
            id="img1"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570191150419&di=37b1892665fc74806306ce7f9c3f1971&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1411%2F13%2Fc14%2F26229_1415883419758.jpg"
        />

        <script src="./index.js"></script>
    </body>
</html>
const img1 = document.getElementById('img1')
img1.onload =