HTML
-
HTML5新增加的内容或者API
-
API层
- canvas: 用来写游戏还是很不错的，推荐开源游戏框架：pixi.js
- 离线: 想起 Cache Manifest , 和 Cache APIs 。再加上 Service Worker 的特性，用户体验能提升不少。
- 拖放: Drag & Drop , 对用户体验也有很大的提升。推荐开源库：dragula
- 历史: 简而言之就是可以使用history对象控制地址了，一般会被单页应用用作路由控制，如果不支持，然后降级为hash。
- 网络存储: sessionStorage & localStorage，这个应该不陌生，保存一些稍大的数据，或者不适合放在Cookie的，就用网络存储。 类似的还有 IndexedDB 和 WebSQL。 推荐开源库：localForage。
-
元素与属性
- section 文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。写文章的时候经常会用到
- 标记高亮一个词。
-
-
input与textarea的区别
- input
- 可以指定 type 为 url, email, 可以方便地检测用户输入。还是指定为 file, submit, button, checkbox, radio, datetime, color等，改变input的样式和行为。
- 可以通过 value 属性指定初始值
- 宽高只能通过 CSS 指定
- textarea
- 可以输入多行文字
- 输入值初始化需要用标签对包裹，并可以夹杂 HTML 代码，而不会被浏览器解析
- 宽高能用 CSS 或 rows, cols 指定
- 相同点
- 都可以使用 maxlength, minlength等限制输入
- input
-
用一个div模拟textarea的实现
- 加个 contenteditable 属性就行
- 在项目中如果需要用到富文本，在 Github 中搜索 rich editor 就行了，或者搜索 WYSIWYG (what you see is what you get), 百度的 ueditor 也是不错的
-
忽略页面中的电话号码
-
左右布局：左边定宽、右边自适应
- absolute + padding leftright
- flex布局未来趋势
- table (内容过多时 会出问题) leftright
- float解决方案 leftright
- absolute + padding
-
BFC、IFC
- BFC: ‘Block Formatting Context’, BFC 表现原则: 内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素,自成一方天地。
- IFC: Inline Formatting Contexts, 直译为”内联格式化上下文”,个人理解为行内盒子模型。
-
图片懒加载
核心代码时检测当前元素是否在当前视图中：function elementInViewport(el) { var rect = el.getBoundingClientRect() // For invisible element. 对于不可见元素 if (rect.top + rect.bottom + rect.left + rect.right + rect.height + rect.width === 0) { return false; } return ( rect.top >= 0 // Pre load. && rect.top <= ((window.innerHeight || document.documentElement.clientHeight) + 100) && rect.left >= 0 // Hide carousel except the first image. Do not add equal sign. && rect.left < (window.innerWidth || document.documentElement.clientWidth) ) } -
实现页面加载进度条
- AJAX
- Elements
- Document
- Event Lag
-
事件委托
利用事件冒泡和e.target来确定事件和元素。在jQuery中有$.delegate方法去代理事件。使用委托代理的原因：- 需要绑定事件的元素很多，且处理逻辑类似。
- 元素是动态创建，或频繁增加、删除，导致元素绑定事件过于复杂的。
// 参考 https://github.com/zenorocha/delegate/blob/master/src/delegate.js const delegate = (element, selector, type, callback) => { element.addEventListener(type, (e) => { let target = e.path.find(ele => ele.matches(selector)) if (target) { callback.call(element, e); } }); }; -
实现 extend 函数
浅拷贝使用 Object.assign 就够了，大多数情况下，使用该方法。
直接 Clone 一个 Nested Object 的简便方法:var origin = {"a": "a"} var copy = JSON.parse(JSON.stringify(origin)); -
跨域的问题以及解决方式
-
解决方式：
- JSONP(JSON with Padding): 利用加载 JS 文件不需要遵循同源策略的原理。
- CORS(Cross-Origin Resource Sharing): 在服务器端返回允许跨域访问的头。
- WebSockt：利用 WebSocket 不需要遵循同源策略的原理。
-
JSONP
JSONP 原理是加载一个 script，并执行一段回调 JS ，因为加载 JS 不需要遵循同源策略。但由此也带来了JSONP的一些问题：- 无法发送特定的头部
- 只能是 GET 请求
- 无法发送 body
-
-
拖拽功能
- 1
- 2
- 3
- 4
- 5
-
手写parseInt的实现
- const parseInt = str => str - 0;
- const parseInt = str => str / 1;
- const parseInt = str => str * 1;
- const parseInt = str => +str;
- 复杂写法
const parseInt = str => { let n = 0; let i = 1; str.split('').reverse().map(s => { n += i * (s.charCodeAt(0) - 48); i *= 10; }); return n; } -
分页器组件
为了减少服务端查询次数，点击“下一页”怎样能确保还有数据可以加载（请求数据不会为空）？- 服务器需要返回总数，当前偏移量，根据总数和偏移量判断是否是最后一页。
- 参考微信的接口，给一个下一页的起始项的id，如果当前页最后一个id和下一页起始id相同，就是最后一页。
-
require.js的实现原理
与webpack相比，两者打包的异同及优缺点- 同：
都以模块化方式组织代码 - 异：
requirejs 只能加载JS文件
webpack 可以打包JS，CSS，甚至是图片
- 同：
-
项目中使用过哪些优化方法
- 页面静态化，（如：Jada, Pug在静态编译后部署）
- CDN加速, 多地缓存
- 前端渲染 (Data + View) / 后端渲染( SSR, SEO 等), 视具体情况选择，如：
- 前端渲染，适合大流量的场景
- 后端渲染，适合SEO优化，用户体验提升等场景
- 缩减域名，以减少DNS解析时间，（可采用进行优化）
- 如果遇到域名解析的问题，可尝试HTTPDNS方案
- Combo服务器合并CSS,JS请求,减少第一屏网络请求。（如果采用HTTP2.0方案，资源合并可省略）
- 异步加载非核心业务和逻辑资源
- 资源和请求缓存，可参考缓存的答案
- Cache-Control/Expires 前端缓存
- Last-Modified/Etag 服务器端缓存，304
- 如果是和Native混合开发的，还可以使用Native缓存
- DNS就近解析应用服务器，需要和CDN配合使用
-
输入一个URL，Enter之后发生了什么
- 浏览器解析URL, 如: https://www.google.com.hk/#newwindow=1&q=hello
- 协议：http, https等
- 域名：www.google.com.hk
- 资源路径: /
- 参数查询：q=hello, 关键词hello
- DNS
- 浏览器 DNS 缓存
- HOSTS 查询
- DNS 服务器查询
- ARP 查询
- TCP 握手, TLS 握手
- HTTP(s), (或SPDY， 或HTTP2.0)
- Header
- Domain
- Body
- Gateway / Nginx，网关和负载均衡服务器
- 查询本地缓存
- 请求上游应用服务器
- 浏览器解析HTML，并请求资源
- CSS
- JS
- 图片
- 生成 DOM-Tree，结合CSS进行渲染
- 浏览器解析URL, 如: https://www.google.com.hk/#newwindow=1&q=hello
-
页面的渲染过程
- 解析整个HTML，得到DOM树和样式树
- DOM树和样式树，经过渲染，得到一颗渲染树
- 根据渲染树，开始布局，计算各个节点宽度，位置，高度等
- 然后开始绘制整个页面并显示
- 在渲染过程中如果使用了GPU，还可以进行GPU渲染
-
静态资源或者接口等如何做缓存优化
- redis/memcache 做数据缓存
- SQL 查询做缓存
- 指定 Cache-Control/Expires 缓存时间
- Last-Modified/Etag 缓存 ( 304 ) 方案
- 网关服务器做缓存，需要更新时，再回源到应用服务器
- CDN多机房，多网关缓存
-
页面DOM节点太多，会出现什么问题？如何优化？
- 页面卡顿，帧率下降
- 优化：
- 采用Virtual Dom技术，可参考: virtual-dom
- 多次操作DOM，改为批量一次操作DOM
- 及时移走页面不用的DOM
- 避免不必要的DIV嵌套
前端安全问题 CSRF和XSS
-
CSRF Cross-site request forgery 跨站请求伪造
-
简单描述：
跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。[1] 跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任
-
防御措施
- 检查referer, X-Requested-With, Orign头
- 使用POST代替GET
- 添加校验Token至表单中
- 添加验证码或其他人机验证手段，如 Google 的 recaptcha
- 把Token放到自定义的HTTP Header, Cookie-to-Header Token
-
-
XSS: Cross-site_scripting
- 简单描述:
跨站脚本（英语：Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
- 防御措施
- 过滤特殊字符串 ( encoding / escaping )
- 保护Cookie
- 使用HttpOnly字段防止被JS获取，（因为攻击通常会采集敏感信息）
- 使用HTTPs代替HTTP，（运营商经常会通过注入广告）
- 禁用JS，（这个不太现实）
- 推荐！设置CSP: Content_Security_Policy 介绍，Content-Security-Policy 文档。这个在Github有使用：
Content-Security-Policy:default-src 'none'; base-uri 'self'; block-all-mixed-content; child-src render.githubusercontent.com; connect-src 'self' uploads.github.com status.github.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com wss://live.github.com; font-src assets-cdn.github.com; form-action 'self' github.com gist.github.com; frame-ancestors 'none'; img-src 'self' data: assets-cdn.github.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; media-src 'none'; script-src assets-cdn.github.com; style-src 'unsafe-inline' assets-cdn.github.com - 设置 X-XSS-Protection 头
-
HTTP 安全头
- Strict-Transport-Security: Strict-Transport-Security: max-age=31536000 ; includeSubDomains
- Public-Key-Pins: Public-Key-Pins: pin-sha256="d6qzRu9zOECb90Uez27xWltNsj0e1Md7GkYYkVoZWmM="; pin-sha256="E9CZ9INDbd+2eRQozYqqbQ2yXLVKB9+xcprMF+44U1g="; report-uri="http://example.com/pkp-report"; max-age=10000; includeSubDomains
- X-Frame-Options: X-Frame-Options: deny
- X-XSS-Protection: X-XSS-Protection: 1; mode=block
- X-Content-Type-Options: X-Content-Type-Options: nosniff
- Content-Security-Policy: Content-Security-Policy: script-src 'self'
- X-Permitted-Cross-Domain-Policies: X-Permitted-Cross-Domain-Policies: none
- Referrer-Policy: Referrer-Policy: no-referrer
跨域
跨域请求的含义
浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如JavaScript）对不同域的服务进行跨站调用。
一般的，只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。
跨域请求并非是浏览器限制了发起跨站请求，而是请求可以正常发起，到达服务器端，但是服务器返回的结果会被浏览器拦截。
利用 JSONP 实现跨域调用
JSONP 是 JSON 的一种使用模式，可以解决主流浏览器的跨域数据访问问题。其原理是根据XmlHttpRequest 对象受到同源策略的影响，而
JSONP总结:
- 只能使用 GET 方法发起请求，这是由于 script 标签自身的限制决定的。
- 不能很好的发现错误，并进行处理。
- 与 Ajax 对比，由于不是通过 XmlHttpRequest 进行传输，所以不能注册 success、 error 等事件监听函数。
服务器端 (需要返回函数的调用形式)
router.get('/list', function(req, res, next) { console.log(req.query) var users = [ {id:1, name:"F"}, {id:2, name:"Z"}, {id:3, name:"X"}, {id:4, name:"M"}, {id:5, name:"N"}, {id:6, name:"A"}, {id:7, name:"B"}, {id:8, name:"D"}, {id:9, name:"C"}, {id:10, name:"L"}, ]; var data = req.query.callback123+"("+JSON.stringify(users)+")"; res.send(data); });使用 CORS 实现跨域调用
1 什么是 CORS？
Cross-Origin Resource Sharing（CORS）
跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。
服务器端控制
res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", ' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8");CORS 与 JSONP 的对比
- CORS 除了 GET 方法外，也支持其它的 HTTP 请求方法如 POST、 PUT 等。
- CORS 可以使用 XmlHttpRequest 进行传输，所以它的错误处理方式比 JSONP 好。
- JSONP 可以在不支持 CORS 的老旧浏览器上运作。
一些其它的跨域调用方式
- window.name
window对象有个name属性，该属性有个特征：即在一个窗口 (window)的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每个页面对 window.name 都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
- window.postMessage()
这个方法是 HTML5 的一个新特性，可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent，如果在函数执行的过程中调用了他，就会让后面的函数超时无法执行。