如何理解HTML结构的语义化
- 符合W3C统一规范标准,是技术趋势
- 没有样式时浏览器的默认样式也能让结构清洗
- 屏幕阅读器会根据你的标记来“读”你的网页
- 对其他移动终端友好,如机顶盒,PDA
- 对SEO友好
前端角度出发做好SEO优化需要考虑什么?
- 外链数量和质量
- HTML页面结构和内容
- Meta标签优化 Title,网站描述(Description),Author,Category(目录),Language(编码语种)
- 关键词分析(针对关键词优化)和选择(确定主关键词)时SEO最重要的工作之一,关键词密度,相关度,突出行
鼠标单击Button1后将Button1移动到Button2的后面
1 |
|
判断字符串出现最多的字符
1 | let arr = [1, 1, 7, 9, 2, 8, 2, 1]; |
数组去重
1 | let arr = [1, 1, 7, 9, 2, 8, 2, 1]; |
数组随机排序
1 | var arr = [1,2,3,4,5,6,7,8,9,10]; |
多指操作
gesturestart
- 手指触碰当前元素,屏幕上有两个或者两个以上的手指
注意:我们说的多指,指定是两个手指
gesturechange
- 手指触碰当前元素,屏幕上有两个或者两个以上的手指位置在发生移动
gestureend
- 在gesturestart后, 屏幕上只剩下两根以下(不包括两根)的手指
rotation
- event.rotation 手指旋转的角度,一般只考虑0-90度
- 一般指手指放在元素上进行缩放
手指列表
- changedTouches:触发事件的手指列表
- targetTouches:元素身上的手指列表
- touches:屏幕上的手指列表
HTML5的离线缓存技术
- 用户离线更新机器上的缓存文件
- 新建的 .appcache 文件缓存机制
如何使用
- 页面头部加一个manifest的属性
1 | <!DOCTYPE HTML> |
- 在cache.manifest 文件的编写离线存储资源
1 | CACHE MANIFEST |
- 在离线状态时,操作window.applicationCache进行需求实现。
请描述一下 cookies,sessionStorage 和 localStorage 的区别?
1 | cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。 |
移动端适配方案
视口
- 桌面浏览器中,浏览器窗口就是约束你的CSS布局视口(初始包含块)
- 它的作用是给CSS布局限制了一个最大宽度,视口宽度和浏览器窗口宽度一致
- 但是在移动端,情况比较复杂
布局视口 layout viewport
- 浏览器厂商为了让用户在小屏幕下网页也能够很好显示,把视口宽度设置很大,一般 980px
- 所以在手机上,视口与浏览器屏幕宽度不再关联,完全独立的,这个浏览器厂商定的的视口为 布局视口.
布局视口我们是看不见的,只知道网页的最大宽度是 980px ,并且被缩放在了屏幕内。
可以这样设置布局视口的宽度:
1 | <meta name="viewport" content="width=640"> |
- 媒体查询与布局视口
1 | @media (min-width: 700px){ |
document.documentElement.clientWidth/Height
返回布局视口的尺寸
视觉视口
- 视觉视口是用户正在看到的网页的区域,大小是屏幕中CSS像素的数量。
window.innerWidth
返回视觉视口的尺寸
理想视口
- 布局视口不友好,苹果引入了理想视口的概念,他是对设备来说最理想的布局视口尺寸,
1 | <meta name="viewport" content="width=device-width"> |
定义理想视口是浏览器的事情,并不能简单地认为是开发者定义的,开发者只能使用。
screen.width/height
返回理想视口的尺寸,有兼容问题
缩放
缩放与设备像素、CSS像素的关系
- 用户放大元素,CSS像素占用更多的设备像素
缩放与视口
- 页面被用户放大,视觉视口内CSS像素数量减少;被用户缩小,视觉视口内CSS像素数量增多就行了
缩放比例
- 在下载浏览器中,可以这么算(理想视口与视觉视口的比)
1 | zoom level = screen.width / window.innerWidth |
- 设置缩放
1 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
- 使用initial-scale有一个副作用:同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1与width=device-width的效果是一样的。
完美视口
- 解决各种浏览器兼容问题的理想视口
1 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
设备像素比
DPR :
dpr = 设备像素 / CSS像素
可以通过JS得到 像素比 :
window.devicePixelRatio
AMD
- 英文原译:Asynchronous Module Definition,异步模块加载机制;
- RequeireJS 遵循 AMD 规范,对模块的态度是预执行
1 | //AMD方式定义模块 |
- jQuery 默认支持 AMD 规范 引入需要将 jQuery —> jquery
- angular 不支持 AMD 规范
CMD
- Commen Module Definition
- 定义一个模块时候不需要立即制定依赖模块,在需要的时候require就可以
- SeaJS 遵循CMD规范 对模块的态度是懒执行
- 阿里的人写的,已经卖给国外了,整合了AMD/CommenJS
1 |
|
CommenJS
- 利用JS的优势,运行在不同的JavaScript主机环境中,填补EcamaScript的空白
- CommenJS 定了很多应用程序(非浏览器应用)使用的API
- NodeJS 是CommenJS的实现
commonjs和ES6模块化暴露的本质分别是什么,请详细说明
1、commonjs暴露的方式
- module.exports = value;
- exports.xxx = value;
- 暴露的本质是exports对象
2、ES6中暴露的方式
- export xxx (常规暴露,暴露的本质是对象,接收的时候只能以对象的解构赋值的方式来接收值)
- export default (默认暴露,暴露任意数据类型,暴露什么数据类型,接收什么数据类型)
webpack
注: “__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
什么是webpack
- 模块打包机(bundler): 分析你的项目结构,找到JS模块,还有一些浏览器不能运行的扩展语言(Scss, TypeScript),并将其转换和打包为合适的格式供浏览器使
1 | // 一个常见的`webpack`配置文件 |
WebPack和Grunt以及Gulp相比
- Gulp 基于数据流,从内存中往硬盘里面通过pipe管道输入数据 (项目构建工具)
- Gulp 任务化 监视文件 gulp.watch(‘js/*/.js’, callback )
- 模块依赖 所有的文件都是模块 除了 HTML (引入JS文件)
- WebPack本身只能加载JS模块 借助 loader 加载 css文件
- webpack 里面 利用 require() 去寻找相互依赖
Promise对象
- 作用: 可以将异步操作以同步的流程表达出来,避免了层层嵌套
- ES6的Promise是一个构造函数, 用来生成promise实例
- promise有三种状态(‘初始化状态’, ‘成功的状态’, ‘失败的状态’)
- 通过执行异步任务返回的结果(通常是发送ajax请求)来修改promise的状态
- 当promise的状态发生改变的时候会调用promise的实例中的then方法的成功或者失败的回调后函数,去执行相应的操作
理解RESful接口
- api接口的分类
- restful: rest风格
- restless: 非rest风格
- rest接口
- http://localhost/users
- http://localhost/users/2
- 不用带行为参数, 参数是路径的一个节点
- 请求的行为由请求方式来决定
- get: 查询(读, 获取数据) R read
- post: 添加(保存), C create
- delete: 删除, D delete
- put: 更新, U update
- 非rest接口
- http://newsapi.gugujiankong.com/Handler.ashx?action=getusercomments&userid=514
- 可以带上行为参数, 通过key=value的形式携带
- 一般只有2种请求式:
- 使用json-server库
- 使用:
- 下载 json-server
- 创建一个数据库文件: src/mock/db.json
- 启动服务器: json-server –watch src/mock/db.json
- 编码测试访问rest接口
- axios
- axios.get(): get请求, 查询
- axios.post(): post请求, 保存
- axios.put(): put请求, 更新
- axios.delete(): delete请求, 删除