# 安全与性能

# 前端的角度出发如何做好 SEO

• 了解搜索引擎如何抓取网页和如何索引网页 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web cra何进行工作，搜索引擎如何对搜索结果进行排序等等。
• Meta 标签优化 主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如 Au 者），Category（目录），Language（编码语种）等。
• 如何选取关键词并在网页中放置关键词 搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词（一般在 5 个上后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
• 了解主要的搜索引擎 虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有 Google，Yahoo，Bing 等有百度，搜狗，有道等。 不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。 还要了解各搜索门户和搜索的关系，比如 AOL 网页搜索用的是 Google 的搜索技术，MSN 用的是 Bing 的技术。
• 主要的互联网目录 Open Directory 自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
• 按点击付费的搜索引擎 搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有 Overture 当然也包括 Google 的广告项目 Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面化和排名的学问，你得学会用最少的广告投入获得最多的点击。
• 搜索引擎登录 网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如 Yahoo 要 299 美元），但是好消少到目前为止）最大的搜索引擎 Google 目前还是免费，而且它主宰着 60％ 以上的搜索市场。
• 链接交换和链接广泛度（Link Popularity） 网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也不同网站之间的链接来 Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
• 标签的合理使用

前后端分离如何seo

• 使用prerender。但是回答prerender，面试官肯定会问你，如果不用prerender，让你直接去实现，好的，请看下面的第二个答案。
• 先去 https://www.baidu.com/robots.txt 找出常见的爬虫，然后在nginx上判断来访问页面用户的User-Agent是否是爬虫，如果是爬虫，就用nginx方向代理到我们自己用nodejs + puppeteer实现的爬虫服务器上，然后用你的爬虫服务器爬自己的前后端分离的前端项目页面，增加扒页面的接收延时，保证异步渲染的接口数据返回，最后得到了页面的数据，返还给来访问的爬虫即可。

# 网站性能优化

content方面
减少HTTP请求：合并文件、CSS精灵、inline Image
减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减少DOM元素数量
Server方面
使用CDN
配置ETag
对组件使用Gzip压缩
Cookie方面
减小cookie大小
css方面
将样式表放到页面顶部
不使用CSS表达式
使用不使用@import
Javascript方面
将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM访问
图片方面
优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片

# 页面性能监测

performance检测页面性能
主要有4方面：（对照下图）
1.控制按钮。
2.overview。页面性能的高级汇总（FPS:帧率，CPU:CPU占用，NET:网络请求）
3.火焰图。CPU堆叠追踪的可视化（左侧名称是主线程的各种事件，Network:网络请求详细情况）
4.数据统计。以图表的形式汇总数据（summary:统计报表，Bottom-Up:事件时长顺序，Call Tree:事件调用顺序，Event log:事件发生的先后顺序）
HTML 文件为蓝色，脚本为黄色，样式表为紫色，媒体文件为绿色，其他资源为灰色

做录制：
打开想要查看的页面，刷新页面，打开performance面板，点击Record按钮（当前面板左上角），开始录制，recode按钮变为红色，执行页面交互，再次点击Record停止录制。完成录制后，开发者工具会猜测哪一部分记录最相关，并自动缩放到那一部分

# XSS的攻击原理，怎么预防

XSS是什么
XSS是一种跨站脚本攻击，是属于代码注入的一种，攻击者通过将代码注入网页中，其他用户看到会受到影响(代码内容有请求外部服务器);
xss攻击分类：

• 反射型：攻击者构造一个带有恶意代码的url链接诱导正常用户点击，服务器接收到这个url对应的请求读取出其中的参数然后没有做过滤就拼接到Html页面发送给浏览器，浏览器解析执行
• 存储型： 攻击者将带有恶意代码的内容发送给服务器（比如在论坛上发帖），服务器没有做过滤就将内容存储到数据库中，下次再请求这个页面的时候服务器从数据库中读取出相关的内容拼接到html上，浏览器收到之后解析执行
• dom型：dom型xss主要和前端js有关，是前端js获取到用户的输入没有进行过滤然后拼接到html中

扩展
CSRF是一种跨站请求伪造，冒充用户发起请求，完成一些违背用户请求的行为(删帖，改密码，发邮件，发帖等)
防御方法举例:

• 使用encodeURIComponent对url中的参数进行编码(反射型xss)，对一些关键字和特殊字符进行过滤(<>,?,script等)，或对用户输入内容进行URL编码(encodeURIComponent);
• Cookie不要存放用户名和密码，对cookie信息进行MD5等算法散列存放，必要时可以将IP和cookie绑定;
• 对用户的输入进行过滤(适用于所有类型的xss攻击)
• 对用户的输入使用innerText或者textContent进行设置，而不是使用innerHTML或者outerHTML进行设置
• 服务器端设置cookie为httpOnly让前端无法通过js获取到用户的cookie
• 关键请求使用验证码，比如转账请求，避免恶意脚本发送这些关键请求

#

# 常见web安全及防护原理

sql注入原理
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令
总的来说有以下几点
永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双”-“进行转换等
永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接
不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息
XSS原理及防范
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点
XSS防范方法
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击
XSS与CSRF有什么区别吗？
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤
登录受信任网站A，并在本地生成Cookie
在不登出A的情况下，访问危险网站B
CSRF的防御
服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数
通过验证码的方法

# CDN缓存

• CDN 是一种部署策略，根据不同的地区部署类似nginx 这种服务服务，会缓存静态资源。前端在项目优化的时候，习惯在静态资源上加上一个 hash 值，每次更新的时候去改变这个 hash，hash 值变化的时候，服务会去重新取资源
• (CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件

# 负载均衡

当系统面临大量用户访问，负载过高的时候，通常会使用增加服务器数量来进行横向扩展，使用集群和负载均衡提高整个系统的处理能力

# layout、painting 和 compositing 的区别

layout：表示布局图，规划图等
painting：指油画，上颜色的画。。
compositing：指影像

# 网页验证码

• 区分用户是计算机还是人的公共全自动程序；
• 可以防止恶意破解密码、刷票、论坛灌水；
• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

# 页面大量图片，如何优化加载，优化用户体验

• 图片懒加载。在页面的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• 如果图片为css图片，可以使用CSSsprite，SVGsprite等技术。
• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
• 如果图片展示区域小于图片的真实大小，应在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。