前端面试题整理-性能优化及安全篇

1、前端试题整理性能优化及安全篇1、什么是web语义化，以及他的优势web语义化是指通过HTML标记表页包含的信息，包含了HTML标签的语义化和css命名的语义化HTML标签的语义化是指：通过使包含语义的标签（如h1-h6）恰当地表档结构css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义， 如Microformat通过添加符合规则的class描述信息优势：去掉样式后页呈现清晰的结构盲使读屏器更好地阅读搜索引擎更好地理解页，有利于收录便于团队项的可持续运作及维护2、前端需要注意哪些SEOtitle、description、keywords：title值强调重点即可，重

2、要关键词出现不要超过2次，且要靠前，不同页title要有所不同； description把页内容度概括，长度合适，不可过分堆砌关键词，不同页description有所不同； keywords列举出重要关键词即可HTMLW3C规范：语义化代码让搜索引擎容易理解页HTMLHTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容定会被抓取jsjs获取内容iframe中的内容alt提站速度：站速度是搜索引擎排序的个重要指标3、web开发中会话跟踪的法有哪些1）cookiesessionURL重写4）input 5）ip地址4、前端开发中，如何优化图像1、不图，尽量css3代替。 如说要实现修

3、饰效果，如半透明、边框、圆、阴影、渐变等等2、使量图SVG替代位图3webfont、CSS Sprites等4CSS或JavaScript实现预加载5HTTP协议设置合理的缓存6、WebP图格式能给前端带来的优化。WebP持损、有损压缩，动态、静态图，压缩率优于GIF、JPEG、JPEG2000、PG等格式5、你所了解到的Web攻击技术XSS（Cross-Site Scripting，跨站脚本攻击）：WebHTML标签或者JS进的种攻击。SQL注攻击 ）：指攻击者通过设置好的陷阱，强制对已完成的认证户进预期的个信息或设定信息等某些状态更新6、什么是渐进增强渐进增强是指在web设计时强调可访问性

4、、语义化HTML标签、外部样式表和脚本。保证所有都能访问页的基本内容和功能同时为级浏览器和带宽户提供更好的户体验核原则如下：CSS提供增强的布局通过侵式、外部javascript提供增强功能7、哪些操作会造成内存泄漏内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。象的其他对象的数量。如果个对象的引数量为没有其他对象引过该对象）， 或对该对象的惟引是循环的，那么该对象的内存即可回收。setTimeout 的第个参数使字符串函数的话，会引发内存泄漏。闭包、控制台志、循环（在两个对象彼此引且彼此保留时，就会产个循环）8、从输URL到页加载发了什么总体来说分为以下个过程DNS解析TCP连接HTTP

5、请求HTTP报浏览器解析渲染页连接结束9、介绍下重绘和回流（Repaint & Reflow ），以及如何进优化改变了背景颜、边框、字体的颜，浏览器重新绘制颜的过程称为重绘都会导致整个页重排，浏览器会重新计算结构位置，重新渲染页，称 为回流回流必定会发重绘，重绘不定会引发回流。解决案：利档碎 createDocumentFragment 或者利模板字符串，将操作的元素进字符串拼接，最后打包放页中10、如何进站性能优化content向：HTTPCSSinline ImageDNS查询：DNS缓存、将资源分布到恰当数量的主机名，平衡 DNS查询避免重定向：多余的中间访问使Ajax可缓存元素数量将资

6、源放到不同的域下：浏览器同时从个域下载资源的数有限，增加域可以提并下载量数量404页ServerCDNExpiresCache-Control响应头Gzip压缩ETagFlush Buffer EarlyAjaxGET进请求src的img标签Cookiecookiecookiecss将样式表放到页顶部CSS表达式importIE的FilterJavascript将脚本放到页底部将javascript和css从外部引javascript和css删除不需要的脚本访问合理设计事件监听器图优化图：根据实际颜需要选择深、压缩css精灵HTML中拉伸图favicon.ico并且可缓存11、XSS和CSRF 如何避免防御XSS攻击：a：HttpOnly 浏览器禁页的JS访问带有HttpOnly属性的Cookie。b：输检查 XSS Filter JS和服务器端