HTML、HTTP、Web综合面试题(三)
1.⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
- ⾏内元素有:
a b span img input select strong
- 块级元素有:
div ul ol li dl dt dd h1 h2 h3 h4… p
- 空元素:
<br> <hr> <img> <input> <link> <meta>
- ⾏内元素不可以设置宽⾼,不独占⼀⾏
- 块级元素可以设置宽⾼,独占⼀⾏
2.HTML全局属性(global attribute)有哪些
class
:为元素设置类标识data-*
: 为元素增加⾃定义属性draggable
: 设置元素是否可拖拽id
: 元素 id ,⽂档内唯⼀lang
: 元素内容的的语⾔style
: ⾏内 css 样式title
: 元素相关的建议信息
3.Canvas和SVG有什么区别?
svg
绘制出来的每⼀个图形的元素都是独⽴的DOM
节点,能够⽅便的绑定事件或⽤来修 改。canvas
输出的是⼀整幅画布svg
输出的图形是⽮量图形,后期可以修改参数来⾃由放⼤缩⼩,不会失真和锯⻮。⽽
canvas
输出标量画布,就像⼀张图⽚⼀样,放⼤会失真或者锯⻮
4.HTML5 为什么只需要写 <!DOCTYPE HTML>
HTML5
不基于SGML
,因此不需要对DTD
进⾏引⽤,但是需要doctype
来规范浏览器 的⾏为- ⽽
HTML4.01
基于SGML
,所以需要对DTD
进⾏引⽤,才能告知浏览器⽂档所使⽤的⽂档 类型
5.如何在⻚⾯上实现⼀个圆形的可点击区域?
svg
border-radius
- 纯
js
实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等
6.viewport
怎样处理 移动端 1px
被 渲染成 2px
问题?
- 局部处理
mate
标签中的viewport
属性 ,initial-scale
设置为 1rem
按照设计稿标准⾛,外加利⽤transfrome
的scale(0.5)
缩⼩⼀倍即可;
- 全局处理
mate
标签中的viewport
属性 ,initial-scale
设置为 0.5rem
按照设计稿标准⾛即可
7.meta viewport相关
<!DOCTYPE html> <!--H5标准声明,使⽤ HTML5 doctype,不区分⼤⼩写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明⽂档使⽤的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使 <meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述-->
<meta name=”keywords” content=””/> <!-- ⻚⾯关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--⽹⻚作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启⽤ WebApp 全屏模式,删除苹果默认的⼯具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=
<!--添加智能 App ⼴告条 Smart App Banner(iOS 6+ Safari)-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果 <meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使⽤兼容模 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码- <meta name=”HandheldFriendly” content=”true”> <!--针对⼿持设备优化,主要是针 <meta name=”MobileOptimized” content=”320″> <!--微软的⽼式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应⽤模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone
设置⻚⾯不缓存-->
<meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
8.渲染优化
- 禁⽌使⽤
iframe
(阻塞⽗⽂档onload
事件)iframe
会阻塞主⻚⾯的Onload
事件- 搜索引擎的检索程序⽆法解读这种⻚⾯,不利于
SEO
iframe
和主⻚⾯共享连接池,⽽浏览器对相同域的连接有限制,所以会影响⻚⾯的并 ⾏加载- 使⽤
iframe
之前需要考虑这两个缺点。如果需要使⽤iframe
,最好是通过
javascript
- 动态给
iframe
添加src
属性值,这样可以绕开以上两个问题
- 禁⽌使⽤
gif
图⽚实现loading
效果(降低CPU
消耗,提升渲染性能) - 使⽤
CSS3
代码代替JS
动画(尽可能避免重绘重排以及回流) - 对于⼀些⼩图标,可以使⽤
base64
位编码,以减少⽹络请求。但不建议⼤图使⽤,⽐较耗 费 CPU - ⻚⾯头部的
<style></style> <script></script>
会阻塞⻚⾯;(因为 Renderer进程中 JS 线程和渲染线程是互斥的) - ⻚⾯中空的
href
和src
会阻塞⻚⾯其他资源的加载 (阻塞下载进程) - ⽹⻚
gzip , CDN
托管, data 缓存 ,图⽚服务器 - 前端模板
JS
+数据,减少由于HTML
标签导致的带宽浪费,前端⽤变量保存AJAX
请求结 果,每次操作本地变量,不⽤请求,减少请求次数 - ⽤
innerHTML
代替DOM
操作,减少DOM
操作次数,优化javascript
性能 - 当需要设置的样式很多时设置
className
⽽不是直接操作style
- 少⽤全局变量、缓存
DOM
节点查找的结果。减少IO
读取操作 - 图⽚预加载,将样式表放在顶部,将脚本放在底部 加上时间戳
- 对普通的⽹站有⼀个统⼀的思路,就是尽量向前端优化、减少数据库操作、减少磁盘 IO
HTML、HTTP、Web综合面试题(三)相关推荐
- 【JavaScript精华系列】JavaScript高级程序面试题汇总之Web综合问题
三年前端开发人员这样背面试题 迟早进大厂系列 玩转 JavaScript .点赞.收藏.评论.关注.三连支持! Web综合问题 文章目录 Web综合问题 1.前端需要注意那些SEO 2. img标签的 ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 计算机控制电梯如需改变功能 则,电梯维修项目教程 教学课件 作者 孙文涛附加答案试卷综合实训三模拟试题(13).doc...
PAGE 5 深圳高级技工学校2011-2012学年第二学期 <电梯综合实训三>理论模拟试题(13) : 号 学 : 级 班 : 名 姓 ┄ ┄ ┄ ┄一一 ┄ ┄┄ ┄┄┄ 线 此 过 ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 金三银四 “狂飙” 季,一波综合面试题来了
进入金三银四,很多小伙伴都有跳槽的打算,今天小编准备了一套测试相关的综合面试题,内容涵盖:测试基础.Linux命令.MySQL.自动化.性能的常见题目,希望能帮到大家. 测试基础 1.没有需求文档,如 ...
- JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
- OSPFv2的综合实验试题分析第1例(CCNP阶段)
OSPFv2的综合实验试题分析第1例 OSPF综合实验环境图与配置原则 配置必须遵守的事项: 1 如果没有特别申请,禁止使用静态路由.再发布等技术. 2 不允许使用需求中明确禁止的技术来完成实验 3 ...
- java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题,想不拿到offer都难!...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
- Web前端面试题集锦
Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
最新文章
- 真正的飞车-赛道狂飙:日出极限版
- ASP.NET中使用Cache类来缓存页面的信息
- 开始→运行→输入的命令集锦 1
- mqtt协议详解_IoT物联网设备上云技术方案详解
- php 没有libmysql.dll,PHP5.3以上版本没有libmysql.dll,以及由此带来的困扰
- 全民学后端快餐教程(1) - 只不过是写个Java程序
- 数车计算机编程教学caxa,CAXA数控车(数控车床编程工具)V2018.1.0 正式版
- 一、Spring Boot整合redies
- Fdfs_client类报错
- 基于java的奖学金_基于Java的奖学金评定系统设计与实现毕业设计论文.doc
- 在Windows 8/WP/Silverlight/WPF下创建五角星
- 清明节---山东又叫寒食节--吃冷食
- armbian 斐讯n1_斐讯N1安装Armbian
- 函数式接口 BiConsumer接口和Consumer接口
- 业务不间断重启-gr与nsr
- [附源码]Python计算机毕业设计SSM基于Java的流浪动物救助系统(程序+LW)
- openmeetings 安装ssl
- 蓝桥杯第十一届真题:八次求和
- Ardunio-电视红外遥控,控制LeArm机械臂
- 淘宝双十一喵果总动员一共多少级?喵果总动员什么时候兑换红包
热门文章
- java创建一定长度的list_java第三季中对String泛型的List进行排序(随机生成长度不超过10的字符串)...
- Android自定义view之围棋动画,真牛皮
- Excel数据分析常用函数④——日期函数(now,today,datedif,weekday,weeknum,text)
- 全面屏虚拟键适配方案
- c#串口通信(三)--半双工通信的数据接收
- C++使用OPENSSL进行RSA加密,java服务端解密
- KVM虚拟机支持虚拟化(kvm虚拟化嵌套)
- TFmini 常见问题与解答
- java通过比对MD5值判断是否是相同图片
- 怎样利用开源软件赚钱?