运行环境 基础
运行环境即浏览器（server端有nodejs）
- 下载网页代码，渲染出页面，期间会执行若干js
- 保证代码在浏览器中：稳定且高效
网页加载过程
- 加载资源的形式： html代码、媒体文件（图片、视频）、js、css
- DNS解析：域名-》IP地址
- 浏览器根据ip地址向服务器发起http请求
- 服务器接收、处理http请求，并返回给浏览器
- 根据html代码生成 dom tree，根据css代码生成cssom
- 将dom tree和cssom整合成render tree
- 浏览器根据render tree渲染页面
- 遇到
<script>则暂停渲染，优先加载并执行js代码，完成后再继续渲染render tree，直至完成
-
为何 放在head中，减少卡顿问题，样式出现变化问题，让css在dom tree生成前就生成
-
为何把js放在最后？ 让html、css先渲染出来给用户看，再通过js修改相关内容。
-
window.onload和DOMContentLoaded
- DOmContentLoaded 在dom加载完以后就执行
- window.onload 在所有图片加载完才执行
性能优化、体验优化
- 没有标准答案，但要求尽量全面
- 手写防抖、节流
原则：
- 多使用内存、缓存或其他方法（用空间换时间）
- 减少cpu计算量，减少网络加载耗时
从何入手
-
让加载更快
- 减少资源体积，压缩代码
- 减少访问次数，合并代码，ssr服务端渲染，缓存
- 使用更快的网络：cdn
-
让渲染更快
- css放在head里，js放在body最下面
- 今早开始js执行，用DOMContentLoaded触发
- 懒加载（图片懒加载，上划加载更多）
<img id="img1" src="preview.png" data-realsrc="abc.png" /> <script type="text/javascript"> var img1 = document.getElementById('img1') img1.src = img1.getAttribute('data-realsrc') </script>- 对dom查询进行缓存（放到for循环外）
- 频繁dom操作，合并到一起插入dom结构
- 防抖 debounce ：用户输入结束或暂停时，才触发onchange事件
const input1 = document.getElementById('input1') let timer = null input1.addEventListener('keyup',function(){ if(timer){ 在定时期间再次执行则清空定时器，不走onChange事件 clearTimeout(timer) } timer = setTimeout(()=>{ console.log(input1.value) // 清空定时器 timer = null },500) }) // 封装一下 function debounce(fn, delay=500){ // timer 是在闭包（函数作为返回值、函数作为参数传入）中的 let timer = null; return function (){ if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(this, arguments) timer = null }, delay) } } input1.addEventListener('keyup',debounce(function(){console.log(input1.value)},600))- 节流throttle 无论拖拽、滚动速度多快，都会间隔一定时间才触发
<div id="div1" draggable="true">拽一把</div> <script> const div1 = document.getElementById('div1'); let timer = null; div1.addEventListener('drag',function(e){ if(timer){ return; } timer = setTimeout(()=>{ console.log(e.offsetX,e.offsetY) timer = null; },500) }) </script> // 封装一下 function throttle (fn,delay=100){ let timer = null; return function(){ if(timer){ return; } timer=setTimeout(()=>{ fn.applay(this,arguments) timer = null; },delay) } } div1.addEventListener('drag',throttle(function(e){ console.log(e.offsetX,e.offsetY) },200))
安全
- 常见web前端攻击方式及如何处理？
- xss 跨站请求攻击
- 在一个博客网站中发布添加
<script>脚本的博客，脚本内容是获取cookie，发送到我的服务器，同时我的服务器配合跨域 - 有人查看这篇博客，我的服务器则可以获得访问者cookie
- 预防：替换特殊字符，< 替换为< > 替换为> 那么
<script>就会变成<script> 而不会作为脚本执行。 自己替换太麻烦，可以使用npm包（xss）可以用来解决xss攻击
- xsrf跨站请求伪造
预防：
- 使用post接口，在post接口使用跨域，需要server端支持
- 增加验证，例如密码、短信验证码、指纹等
