前端两个重点：性能优化、安全

最新推荐文章于 2024-07-13 05:37:04 发布

hl199626

最新推荐文章于 2024-07-13 05:37:04 发布

阅读量1k

点赞数

分类专栏：经验分享文章标签：前端性能优化安全经验分享

本文链接：https://blog.csdn.net/hl199626/article/details/125500178

版权

经验分享专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文探讨了前端性能优化的多个方面，包括加载优化、执行优化、渲染优化和样式优化，提供了一系列具体措施，如减少HTTP请求、压缩代码、设置viewport、避免CSS表达式等。同时，文章还关注了前端安全问题，详细介绍了如何防止iframe被滥用、禁用opener的恶意操作，以及如何通过设置sandbox属性增强iframe的安全性。

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

前端中有哪些可以优化的呢？
主要分为以下几类：

加载优化：

减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookies、避免重定向、异步加载第三方资源。

执行优化：

CSS写在头部、JS写在尾部并异步、避免img、iframe等的src为空、避免重置图像大小、图像尽量避免使用DataURL。

渲染优化：

设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速。

样式优化：

避免在HTML中书写style、避免CSS表达式、移除CSS空规则、正确使用display、不滥用float。

脚本优化：

减少重绘和回流、缓存DOM选择与计算、缓存length的值、尽量使用事件代理、使用id选择器、touch事件优化。

安全

前端常见安全问题的7个方面：

iframe
opener
CSRF（跨站请求伪造）
XSS（跨站脚本攻击）
ClickJacking（点击劫持）
HSTS（HTTP严格传输安全）
CND劫持

1、iframe

a.如何让自己的网站不被其他网站的 iframe 引用？

// 检测当前网站是否被第三方iframe引用
// 若相等证明没有被第三方引用，若不等证明被第三方引用。当发现被引用时强制跳转百度。
if(top.location != self.location){
    top.location.href = 'http://www.baidu.com'
}

如何禁用，被使用的 iframe 对当前网站某些操作？

sandbox是html5的新属性，主要是提高iframe安全系数。iframe因安全问题而臭名昭著，这主要是因为iframe常被用于嵌入到第三方中，然后执行某些恶意操作。
现在有一场景：我的网站需要 iframe 引用某网站，但是不想被该网站操作DOM、不想加载某些js（广告、弹框等）、当前窗口被强行跳转链接等，我们可以设置 sandbox 属性。如使用多项用空格分隔。

allow-same-origin：允许被视为同源，即可操作父级DOM或cookie等
allow-top-navigation：允许当前iframe的引用网页通过url跳转链接或加载
allow-forms：允许表单提交
allow-scripts：允许执行脚本文件
allow-popups：允许浏览器打开新窗口进行跳转
“”：设置为空时上面所有允许全部禁止

2、opener

如果在项目中需要 打开新标签 进行跳转一般会有两种方式

// 1) HTML -> <a target='_blank' href='http://www.baidu.com'>
// 2)  JS  -> window.open('http://www.baidu.com')
 /* 
 * 这两种方式看起来没有问题，但是存在漏洞。
 * 通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象。
     window.opener.location.replace('https://www.baidu.com') 
  * 即使在跨域状态下 opener 仍可以调用 location.replace 方法。
 */

使用 rel 属性解决：

<a target="_blank" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>

<!-- 
  通过 rel 属性进行控制：
  noopener：会将 window.opener 置空，从而源标签页不会进行跳转（存在浏览器兼容问题）
  noreferrer：兼容老浏览器/火狐。禁用HTTP头部Referer属性（后端方式）。
  nofollow：SEO权重优化，详情见 https://blog.csdn.net/qq_33981438/article/details/80909881
 -->

使用 window.open():

<button onclick='openurl("http://www.baidu.com")'>click跳转</button>

function openurl(url) {
    var newTab = window.open();
    newTab.opener = null;
    newTab.location = url;
}