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
本站文章如未注明均为原创 | 文章作者：刘晓帆 | 转载请注明来自：前端印象