2021年前端基础面试题 16-17 运行环境、性能和安全

16 运行环境、性能和安全

XSS/XSRF 攻击

预防XSS:替换特殊字符,如< 变为< 可以通过xss工具 npm i xss


17 性能优化

提升加载速度

减少资源体积(压缩代码)
减少访问次数(合并代码、SSR、缓存)
使用更快的网络(CDN)

提升渲染速度

CSS放在header内,js放在body最下面
尽早开始执行js,用DOMContentLoaded触发
懒加载
对dom查询进行缓存
频繁的dom操作合并到一起后统一插入
节流和防抖

页面加载过程

DNS(domain name server) 解析: 域名 – ip
HTTP
生成DOM Tree
生成CSSOM
整合DOM Tree和CSSOM合成Render Tree
遇到script暂停渲染,完成后继续
图片加载不会阻塞render tree

window.addEventListener('load') // 页面全部加载完成后触发,包括图片和视频
window.addEventListener('DOMContentLoaded') //Dom渲染完之后触发,无需等待图片和视频

图片懒加载的方式

将图片地址先写死一个预览的小图地址,而真实的图片地址可以放在例如data-relasrc属性中,当屏幕滚动到需要显示这个图片的位置时,替换src



本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:8 次浏览