web常用术语

打开浏览器按F12，用术语你看到的用术语那堆东西就是Web术语的具象化。Network面板里每一条请求都带着Status Code，用术语200是用术语正常，404是用术语找不到，500是用术语服务器自己崩了。这些数字不是用术语随便定的，HTTP协议里每个区间都有明确分工。用术语1xx表示还在处理，用术语2xx成功，用术语3xx跳转，用术语4xx是用术语你这边的问题，5xx是用术语对方的问题。记住这个分类，用术语排查故障时能省一半时间。用术语

DOM这个词听起来抽象，其实就是浏览器把HTML字符串解析成的一棵树。你右键“检查元素”看到的层级结构，就是DOM树的可视化。JavaScript能通过document.getElementById这类方法操作它，改个颜色、删个节点都行。但DOM操作很贵，频繁改会触发重排和重绘，页面就卡了。我见过一个列表页，每渲染一条数据就操作一次DOM，一千条数据直接让浏览器假死。后来改成先拼好HTML字符串再一次性插入，流畅得像换了个页面。

说到渲染，不得不提CSS的盒模型。每个元素都是一个矩形盒子，由content、padding、border、margin四层组成。box-sizing默认是content-box，你设width:100px，实际占位是100加左右padding加左右border。很多人被这个坑过，明明设了100%宽度却溢出容器。改成border-box就直观了，宽度包含padding和border，算起来省心。

跨域是前端绕不开的坎。浏览器同源策略规定，协议、域名、端口三者完全一致才算同源。localhost:3000访问localhost:8080就是跨域，因为端口不同。解决方案有CORS、JSONP、代理服务器。CORS最正规，服务端加个Access-Control-Allow-Origin头就行。但带cookie的请求需要服务端设Allow-Credentials为true，同时前端xhr.withCredentials也要为true，两边缺一不可。我调试这个花了整整一下午，最后发现是服务端漏了那个头。

RESTful API设计里，GET查、POST增、PUT改、DELETE删，这套约定用好了接口一目了然。但实际项目里很多人用POST干所有事，接口名写成/getUserList、/addUser、/updateUser。能用，但不够优雅。状态码也别全返回200，创建成功返回201，删除成功返回204，客户端处理起来更清晰。

WebSocket和HTTP不同，它是全双工通信。HTTP是请求-响应模式，服务端不能主动推消息。WebSocket建立连接后双方都能随时发数据，适合聊天室、实时股价这类场景。握手阶段用HTTP升级协议，之后就是独立的TCP连接了。心跳包得自己维护，不然中间代理可能把闲置连接断掉。

LocalStorage和SessionStorage都是本地存储，区别在生命周期。LocalStorage除非手动清除否则一直在，SessionStorage关掉标签页就没了。容量都是5MB左右，存token、用户偏好够用。但别存敏感信息，XSS攻击能直接读走。Cookie容量小得多，4KB左右，每次请求都会自动带上，所以别塞太多东西，影响性能。

最后说下CDN。静态资源放CDN上，用户从最近节点加载，速度提升明显。但缓存更新是个坑。文件名带hash值最稳妥，内容变了文件名就变，强制刷新缓存。或者用查询字符串?v=2，但有些CDN对查询字符串不敏感，可能不生效。我倾向于hash方案，虽然构建配置麻烦点，但省心。

最新评论